/*
Theme Name: Jollycat VFX
Theme URI: https://jollycat.de
Author: David Moretto / Jollycat
Description: Schnelles, eigenständiges Portfolio-Theme für Jollycat VFX – ohne Page Builder.
Version: 1.0.14
Text Domain: jollycat-vfx
*/

:root {
  --ink: #090909;
  --paper: #f2efe9;
  --muted: #a8a39b;
  --line: rgba(255,255,255,.14);
  --orange: #f06431;
  --orange-hot: #ff7b3d;
  --max: 1240px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--ink); color: var(--paper); font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; line-height: 1.55; }
body.menu-open { overflow: hidden; }
a { color: inherit; text-decoration: none; }
img, video { max-width: 100%; height: auto; display: block; }
.site-wrap { overflow: clip; }
.shell { width: min(calc(100% - 40px), var(--max)); margin-inline: auto; }
.eyebrow { color: var(--orange); font-size: .76rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.display { font-size: clamp(3rem, 8vw, 8rem); line-height: .88; letter-spacing: -.065em; margin: 0; max-width: 12ch; }
.section-title { font-size: clamp(2.2rem, 5vw, 5rem); line-height: .96; letter-spacing: -.045em; margin: .45rem 0 1rem; }
.lead { max-width: 720px; color: #c8c3ba; font-size: clamp(1.08rem, 1.8vw, 1.35rem); }
.button, .wp-block-button__link { display: inline-flex; align-items: center; justify-content: center; gap: .65rem; padding: .9rem 1.25rem; border-radius: 999px; font-weight: 800; background: var(--orange); color: #111; border: 1px solid var(--orange); transition: transform .2s ease, background .2s ease; }
.button:hover, .wp-block-button__link:hover { transform: translateY(-2px); background: var(--orange-hot); }
.button--ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,.3); }
.is-style-outline .wp-block-button__link { background:transparent; color:#fff; border-color:rgba(255,255,255,.45); }
.is-style-outline .wp-block-button__link:hover { background:#fff; color:#111; }

.site-header { position: fixed; inset: 0 0 auto; z-index: 50; background: linear-gradient(to bottom, rgba(0,0,0,.84), transparent); }
.site-header.is-scrolled { background:rgba(9,9,9,.9); backdrop-filter:blur(16px); border-bottom:1px solid var(--line); }
.header-inner { height: 92px; display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.brand { display: inline-flex; align-items: center; gap: .8rem; font-weight: 900; letter-spacing: -.02em; }
.brand img { width: 52px; height: 52px; object-fit: contain; }
.brand span small { display: block; color: var(--muted); font-size: .62rem; letter-spacing: .18em; text-transform: uppercase; }
.nav { display: flex; align-items: center; gap: clamp(1rem, 2.5vw, 2.4rem); font-size: .76rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.nav-list { display:flex; align-items:center; gap:clamp(1rem,2.5vw,2.4rem); list-style:none; padding:0; margin:0; }
.nav a:hover { color: var(--orange); }
.menu-toggle { display: none; border: 0; padding: .5rem; background: none; color: white; font: inherit; }

.hero { min-height: clamp(630px, 74svh, 760px); position: relative; display: grid; align-items: end; padding: 150px 0 64px; background: #111 url('assets/images/hero.webp') center center / cover no-repeat; }
.hero::after { content: ""; position: absolute; z-index:1; inset: 0; background: linear-gradient(90deg, rgba(0,0,0,.9) 0%, rgba(0,0,0,.48) 54%, rgba(0,0,0,.22)), linear-gradient(0deg, #090909 0%, transparent 30%); pointer-events:none; }
.hero .hero-video { position:absolute; z-index:0; inset:0; width:100%; height:100%; margin:0; overflow:hidden; }
.hero .hero-video video { width:100%; height:100%; object-fit:cover; }
.hero-media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .66; }
.hero::before { content:""; position: absolute; z-index:1; width: 40vw; aspect-ratio: 1; border-radius: 50%; background: var(--orange); filter: blur(110px); opacity: .17; right: -12vw; top: 15vh; animation: hero-pulse 7s ease-in-out infinite alternate; pointer-events:none; }
@keyframes hero-pulse { to { transform: translate(-7vw, 7vh) scale(.78); opacity: .08; } }
.hero-content { position: relative; z-index: 2; }
.hero-copy { margin: 1.4rem 0 2rem; max-width: 610px; color: #d7d2ca; font-size: clamp(1.05rem, 1.8vw, 1.35rem); }
.hero-actions { display: flex; flex-wrap: wrap; gap: .75rem; }
.hero-tags { margin-top: 3.5rem; display: flex; flex-wrap: wrap; gap: .55rem; }
.hero-tags span { border: 1px solid var(--line); border-radius: 99px; padding: .4rem .75rem; color: #c8c3ba; font-size: .78rem; }

.featured-section { padding-top:clamp(2.5rem,5vw,5rem); }
.featured-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-top:1.25rem; }
.featured-project { position:relative; min-height:clamp(260px,30vw,410px); margin:0; overflow:hidden; border-radius:18px; background:#1a1a1a; }
.featured-project img { width:100%; height:100%; object-fit:cover; transition:transform .5s cubic-bezier(.2,.8,.2,1); }
.featured-project:hover img { transform:scale(1.045); }
.featured-project__meta { position:absolute; inset:auto 0 0; padding:3rem 1.1rem 1.15rem; background:linear-gradient(transparent,rgba(0,0,0,.88)); }
.featured-project__meta span { color:#e4ded5; font-size:.72rem; font-weight:800; letter-spacing:.11em; text-transform:uppercase; }
.featured-project__meta h3 { margin:.2rem 0 0; font-size:clamp(1rem,1.5vw,1.35rem); line-height:1.1; }
.featured-link { margin:1.2rem 0 0; text-align:right; font-size:.85rem; font-weight:800; }
.featured-link a { color:var(--orange); text-decoration:underline; text-underline-offset:.25em; }

.marquee { overflow: hidden; border-block: 1px solid var(--line); background: #0e0e0e; }
.marquee-track { display: flex; width: max-content; gap: 2.4rem; padding: 1rem 0; animation: move 28s linear infinite; font-weight: 900; font-size: clamp(1rem, 2vw, 1.45rem); text-transform: uppercase; }
.marquee-track span::after { content: "✦"; color: var(--orange); margin-left: 2.4rem; }
@keyframes move { to { transform: translateX(-50%); } }

.content-section { padding: clamp(3.5rem, 6vw, 6rem) 0; scroll-margin-top:80px; }
#services { background:#171717; border-block:1px solid rgba(255,255,255,.08); }
.intro-grid { display: grid; grid-template-columns: .7fr 1.3fr; gap: 8vw; align-items: start; }
.intro-copy { font-size: clamp(1.5rem, 3.4vw, 3.2rem); line-height: 1.15; letter-spacing: -.035em; margin: 0; }
.intro-copy em { color: var(--orange); font-style: normal; }

.services { display: grid; grid-template-columns: repeat(2, 1fr); border-top: 1px solid var(--line); }
.services { counter-reset: services; }
.service { position:relative; padding: 2.1rem 0; display: grid; grid-template-columns: 70px 1fr; gap: 1rem; border-bottom: 1px solid var(--line); counter-increment: services; cursor:pointer; transition:background-color .25s ease; }
.service::before { content: "0" counter(services); color: var(--orange); font-weight: 800; }
.service:nth-child(odd) { padding-right: 2rem; border-right: 1px solid var(--line); }
.service:nth-child(even) { padding-left: 2rem; }
.service:last-child:nth-child(odd) { grid-column:1/-1; border-right:0; padding-right:0; }
.service-no { color: var(--orange); font-weight: 800; }
.service h3 { font-size: clamp(1.45rem, 3vw, 2.5rem); letter-spacing: -.035em; margin: 0 0 .65rem; transition:color .25s ease; }
.service h3 a::before { content:"↗"; position:absolute; top:1.7rem; right:clamp(.4rem,2vw,1.5rem); color:var(--orange); font-size:1.35rem; opacity:.75; transition:transform .25s ease,opacity .25s ease; }
.service h3 a::after { content:""; position:absolute; inset:0; }
.service h3 a:focus-visible::after { outline:3px solid var(--orange); outline-offset:-3px; }
.service:focus-within h3 { color:#ff9063; }
.service:hover h3 a::before, .service:focus-within h3 a::before { transform:translate(3px,-3px); opacity:1; }
.service p { margin: 0; color: var(--muted); max-width: 48ch; }
@media (hover:hover) and (pointer:fine) {
  .service:hover { background-color:rgba(240,100,49,.1); }
  .service:hover h3 { color:#ff9063; }
}
.production-section { padding-top:0; }
.production-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.production-card { min-height:390px; padding:clamp(1.5rem,4vw,3.5rem); border-radius:24px; background:#191714; display:flex; flex-direction:column; justify-content:space-between; }
.production-card--show { background:#181c1f url('assets/images/shows.webp') center / cover no-repeat; position:relative; }
.production-card--show::before { content:""; position:absolute; inset:0; border-radius:inherit; background:rgba(0,0,0,.69); }
.production-card--show > * { position:relative; }
.production-card h2 { font-size:clamp(2rem,3.7vw,3.8rem); line-height:.98; letter-spacing:-.045em; margin:1.5rem 0; max-width:15ch; }
.production-card p:last-child { max-width:55ch; color:#c9c4ba; }

.reel { position: relative; min-height: min(78vw, 820px); background: #111; border-radius: 28px; overflow: hidden; }
.reel figure { margin: 0; }
.reel video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.reel::after { content:""; position:absolute; inset:0; background: linear-gradient(0deg, rgba(0,0,0,.75), transparent 55%); pointer-events:none; }
.reel-play { position:absolute; z-index:4; left:50%; top:50%; width:clamp(84px,10vw,132px); aspect-ratio:1; transform:translate(-50%,-50%); display:grid; place-items:center; border:1px solid rgba(255,255,255,.75); border-radius:50%; background:rgba(240,100,49,.92); color:#111; box-shadow:0 15px 60px rgba(0,0,0,.45); cursor:pointer; transition:transform .2s ease,opacity .2s ease,background .2s ease; }
.reel-play:hover { transform:translate(-50%,-50%) scale(1.08); background:var(--orange-hot); }
.reel-play:focus-visible { outline:3px solid white; outline-offset:4px; }
.reel-play span { width:0; height:0; margin-left:8px; border-top:17px solid transparent; border-bottom:17px solid transparent; border-left:27px solid #111; }
.reel.is-playing .reel-play { opacity:0; pointer-events:none; }
.reel-copy { position: absolute; z-index: 2; inset: auto 5% 9%; display: flex; align-items: end; justify-content: space-between; gap: 2rem; pointer-events:none; transition:opacity .2s ease; }
.reel.is-playing .reel-copy { opacity:0; }
.reel-copy h2 { margin: 0; font-size: clamp(2.6rem, 7vw, 7rem); letter-spacing: -.06em; line-height: .85; }

.portfolio-head { display:flex; justify-content:space-between; align-items:end; gap:2rem; margin-bottom:2rem; }
.filters { display:flex; flex-wrap:wrap; gap:.55rem; margin:1.6rem 0 2rem; }
.filter { cursor:pointer; color:#d8d3cb; border:1px solid var(--line); background:transparent; border-radius:999px; padding:.55rem .85rem; font:inherit; font-size:.78rem; font-weight:800; }
.filter.is-active, .filter:hover { background:var(--paper); color:#111; }
.portfolio-grid { display:grid; grid-template-columns:repeat(12,1fr); grid-auto-flow:dense; gap:12px; }
.project-card { position:relative; min-height:320px; grid-column:span 4; overflow:hidden; border-radius:16px; background:#181818; }
.project-card.is-wide { grid-column:span 8; min-height:470px; }
.project-card img { width:100%; height:100%; object-fit:cover; transition:transform .5s cubic-bezier(.2,.8,.2,1), filter .3s; }
.project-card:hover img { transform:scale(1.045); }
.project-meta { position:absolute; inset:auto 0 0; padding:3.5rem 1.2rem 1.2rem; background:linear-gradient(transparent,rgba(0,0,0,.86)); }
.project-meta h3 { margin:0; font-size:1.15rem; }
.project-meta span { color:#d1cbc2; font-size:.75rem; text-transform:uppercase; letter-spacing:.1em; }
.project-card.is-hidden { display:none; }

.ai-note { display:grid; grid-template-columns:1fr 1fr; gap:6vw; padding:clamp(3rem,6vw,6rem); border-radius:28px; background:#111; border:1px solid var(--line); }
.ai-note p { color:var(--muted); }
.network-title { margin:0 0 1.5rem; font-size:clamp(1.6rem,2.6vw,2.5rem); letter-spacing:-.035em; }
.network { display:grid; grid-template-columns:repeat(2,1fr); gap:12px; }
.network-card { position:relative; min-height:390px; overflow:hidden; border:1px solid var(--line); border-radius:20px; background:#1a1a1a; }
.network-card::after { content:""; position:absolute; inset:0; background:linear-gradient(0deg,rgba(0,0,0,.86),rgba(0,0,0,.05) 70%); pointer-events:none; }
.network-card .network-image { position:absolute; inset:0; margin:0; }
.network-card .network-image img { width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }
.network-card:hover .network-image img { transform:scale(1.04); }
.network-card__copy { position:absolute; z-index:1; inset:auto 1.5rem 1.5rem; }
.network-card h3 { font-size:clamp(1.7rem,3vw,3rem); line-height:1; letter-spacing:-.04em; margin:.25rem 0 1rem; }
.network-card p { margin:0; }
.network-card a { text-decoration:underline; text-underline-offset:.2em; font-weight:800; }
.network-card a::after { content:""; position:absolute; inset:0; }

.contact-section { border-top: 1px solid var(--line); background: #101010; }
.contact-grid { display:grid; grid-template-columns:1fr 1fr; gap:8vw; align-items:start; }
.contact-intro p:last-child { color:var(--muted); max-width:48ch; }
.contact-form .wpforms-container { margin:0 !important; --wpforms-label-color:var(--paper); --wpforms-field-background-color:#1a1a1a; --wpforms-field-text-color:var(--paper); --wpforms-field-border-color:rgba(255,255,255,.2); }
.contact-form .wpforms-container .wpforms-field-label { color:var(--paper) !important; font-weight:700; }
.contact-form .wpforms-required-label { color:var(--orange) !important; }
.contact-form .wpforms-container input[type="text"], .contact-form .wpforms-container input[type="email"], .contact-form .wpforms-container textarea { width:100%; max-width:none; color:var(--paper) !important; background:#1a1a1a !important; border:1px solid rgba(255,255,255,.2) !important; border-radius:12px; padding:.8rem 1rem; font:inherit; }
.contact-form input:focus, .contact-form textarea:focus { border-color:var(--orange); outline:2px solid rgba(240,100,49,.35); }
.contact-form button[type="submit"] { border:0; border-radius:999px; background:var(--orange); color:#111; padding:.9rem 1.4rem; font:inherit; font-weight:800; cursor:pointer; }
.contact-form button[type="submit"]:hover { background:var(--orange-hot); }

.entry-content > *:not(.alignfull) { width:min(calc(100% - 40px),var(--max)); margin-left:auto; margin-right:auto; }
.entry-content > .alignwide { width:min(calc(100% - 40px),var(--max)); }
.page-main { padding:150px 0 80px; min-height:70vh; }
.service-page-hero { position:relative; display:flex; align-items:end; min-height:clamp(400px,54svh,640px); padding:150px 0 4rem; background:#171717; overflow:hidden; }
.service-page-hero::after { content:""; position:absolute; inset:0; background:linear-gradient(90deg,rgba(0,0,0,.86),rgba(0,0,0,.28) 80%),linear-gradient(0deg,#090909,transparent 55%); }
.service-page-hero__image { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.service-page-hero__inner { position:relative; z-index:1; }
.service-page-back { display:inline-block; margin-bottom:clamp(2rem,7vh,5rem); color:#e4ded5; font-size:.8rem; font-weight:800; letter-spacing:.07em; text-transform:uppercase; }
.service-page-back:hover { color:var(--orange); }
.service-page-hero h1 { max-width:12ch; margin:.3rem 0 0; font-size:clamp(3.2rem,8vw,7.5rem); line-height:.9; letter-spacing:-.055em; }
.service-page-content { padding:clamp(3.5rem,7vw,7rem) 0; }
.service-page-content .entry-content { display:grid; grid-template-columns:minmax(0,.75fr) minmax(0,1.25fr); gap:clamp(1.5rem,5vw,6rem); align-items:start; }
.service-page-content .entry-content > * { width:auto; margin:0; }
.service-page-content .entry-content > .service-page-lead { grid-column:1/-1; max-width:46ch; font-size:clamp(1.35rem,3vw,2.5rem); line-height:1.18; letter-spacing:-.025em; color:var(--paper); }
.service-page-content .entry-content > h2 { grid-column:1; font-size:clamp(1.8rem,3.3vw,3.4rem); line-height:1.04; letter-spacing:-.04em; }
.service-page-content .entry-content > h2 + p, .service-page-content .entry-content > h2 + ul { grid-column:2; color:#c8c3ba; }
.service-page-content .entry-content > ul { padding-left:1.25rem; }
.service-page-content .entry-content li { padding-bottom:.65rem; }
.service-page-content .entry-content > .wp-block-buttons { grid-column:1/-1; margin-top:1rem; }
.service-page-next { margin-top:clamp(4rem,8vw,8rem); padding-top:2rem; border-top:1px solid var(--line); }
.service-page-next__links { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem; margin-top:1.2rem; }
.service-page-next__links a { display:flex; justify-content:space-between; gap:1rem; align-items:end; min-height:140px; padding:1.5rem; border:1px solid var(--line); border-radius:18px; background:#171717; font-size:clamp(1.4rem,2.6vw,2.4rem); font-weight:800; letter-spacing:-.035em; line-height:1.1; transition:border-color .2s ease,background-color .2s ease; }
.service-page-next__links a:hover { border-color:var(--orange); background:#211713; }
.service-page-next__links span { color:var(--orange); }
.site-footer { padding:4rem 0 2rem; border-top:1px solid var(--line); }
.footer-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:3rem; }
.footer-title { font-size:clamp(2.6rem,6vw,6rem); line-height:.9; letter-spacing:-.055em; margin:0 0 1rem; }
.footer-list { list-style:none; margin:0; padding:0; color:var(--muted); }
.footer-list a:hover { color:var(--orange); }
.footer-bottom { display:flex; justify-content:space-between; gap:1rem; margin-top:4rem; padding-top:1.4rem; border-top:1px solid var(--line); color:var(--muted); font-size:.78rem; }

@media (max-width: 800px) {
  .shell { width:min(calc(100% - 28px),var(--max)); }
  .header-inner { height:76px; }
  .nav { display:none; position:fixed; inset:0; background:#0a0a0a; padding:110px 28px 40px; flex-direction:column; align-items:flex-start; font-size:1.4rem; }
  .nav.is-open, .nav.is-open .nav-list { display:flex; flex-direction:column; align-items:flex-start; }
  .menu-toggle { display:block; position:relative; z-index:2; }
  .display { font-size:clamp(3.5rem,17vw,6rem); }
  .hero { min-height:82svh; padding-top:120px; }
  .featured-grid { grid-template-columns:repeat(2,1fr); }
  .featured-project { min-height:300px; }
  .intro-grid, .ai-note, .footer-grid, .production-grid, .contact-grid { grid-template-columns:1fr; }
  .services { grid-template-columns:1fr; }
  .service, .service:nth-child(odd), .service:nth-child(even) { padding:1.6rem 0; border-right:0; grid-template-columns:46px 1fr; }
  .portfolio-head { align-items:start; flex-direction:column; }
  .project-card, .project-card.is-wide { grid-column:span 6; min-height:270px; }
  .reel { min-height:70vh; border-radius:18px; }
  .reel-copy { align-items:start; flex-direction:column; }
  .network { grid-template-columns:1fr; }
  .service-page-content .entry-content { grid-template-columns:1fr; }
  .service-page-content .entry-content > .service-page-lead,
  .service-page-content .entry-content > h2,
  .service-page-content .entry-content > h2 + p,
  .service-page-content .entry-content > h2 + ul,
  .service-page-content .entry-content > .wp-block-buttons { grid-column:1; }
  .service-page-content .entry-content > h2 { margin-top:1.5rem; }
  .service-page-next__links { grid-template-columns:1fr; }
}
@media (max-width:520px) {
  .featured-grid { gap:8px; }
  .featured-project { min-height:240px; border-radius:12px; }
  .featured-project__meta { padding:2.5rem .7rem .8rem; }
  .featured-project__meta h3 { font-size:1rem; }
  .project-card, .project-card.is-wide { grid-column:1/-1; min-height:310px; }
  .hero { padding-bottom:42px; }
  .hero-tags { margin-top:2rem; }
  .footer-bottom { flex-direction:column; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior:auto; } *,*::before,*::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; } }

.cookie-settings-trigger { border:0; padding:0; background:none; color:inherit; font:inherit; text-decoration:underline; text-underline-offset:.2em; cursor:pointer; }
.cookie-notice { position:fixed; z-index:100; right:20px; bottom:20px; width:min(420px,calc(100vw - 40px)); padding:1.35rem; border:1px solid rgba(255,255,255,.2); border-radius:18px; background:#191919; color:#f2efe9; box-shadow:0 18px 60px rgba(0,0,0,.5); }
.cookie-notice[hidden] { display:none; }
.cookie-notice__close { position:absolute; top:.65rem; right:.8rem; border:0; background:none; color:#f2efe9; font-size:1.5rem; cursor:pointer; }
.cookie-notice__eyebrow { margin:0 0 .35rem; color:var(--orange); font-size:.72rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase; }
.cookie-notice h2 { margin:.1rem 1.4rem .7rem 0; font-size:1.45rem; line-height:1.15; }
.cookie-notice p { margin:.55rem 0; color:#d7d2ca; font-size:.9rem; }
.cookie-notice__status { margin:1rem 0; padding:.7rem .85rem; border:1px solid rgba(255,255,255,.14); border-radius:10px; font-size:.85rem; }
.cookie-notice__status strong { display:block; color:#fff; }
.cookie-notice__actions { display:flex; align-items:center; justify-content:space-between; gap:1rem; }
.cookie-notice__actions a { color:#ddd; font-size:.82rem; text-decoration:underline; text-underline-offset:.2em; }
.cookie-notice__actions button { border:0; border-radius:999px; padding:.65rem 1.1rem; background:var(--orange); color:#111; font:inherit; font-size:.85rem; font-weight:800; cursor:pointer; }