@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap');
:root{
  --bg:#090909;
  --panel:#111111;
  --panel-2:#151515;
  --line:#2b2b2b;
  --line-2:#3b3b3b;
  --text:#f1eee8;
  --muted:#a8a39d;
  --muted-2:#7f7a74;
  --gold:#c8a97e;
  --gold-soft:rgba(200,169,126,.16);
  --shadow:0 24px 80px rgba(0,0,0,.45);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--text);font:500 14px/1.6 Manrope,system-ui,sans-serif;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
button,input{font:inherit}
img,video{display:block;max-width:100%}
#progress{position:fixed;top:0;left:0;height:2px;background:linear-gradient(90deg,#fff,var(--gold));width:0;z-index:120}
.nav{position:fixed;inset:0 0 auto;z-index:50;height:84px;display:flex;align-items:center;justify-content:space-between;padding:0 5%;background:linear-gradient(180deg,rgba(9,9,9,.9),rgba(9,9,9,.7) 80%,rgba(9,9,9,0));backdrop-filter:blur(10px)}
.logo{display:flex;align-items:center;gap:12px;font-size:22px;font-weight:800;letter-spacing:-.05em}
.logo-mark{width:34px;height:34px;border:1px solid rgba(255,255,255,.16);display:grid;place-items:center;border-radius:50%;font-size:17px;background:rgba(255,255,255,.03)}
.logo-word{letter-spacing:-.04em}
.logo-dot{color:var(--gold)}
.navlinks{display:flex;gap:28px}
.navlinks a,.navpremium,.iconbutton,.menubtn{font-size:11px;letter-spacing:1.4px;text-transform:uppercase}
.navlinks a{color:var(--muted)}
.navlinks a:hover,.navpremium:hover{color:#fff}
.navright{display:flex;gap:12px;align-items:center}
.iconbutton,.menubtn{border:1px solid var(--line);background:transparent;color:#fff;width:42px;height:42px;display:grid;place-items:center}
.navpremium{padding:13px 18px;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.04)}
.menubtn{display:none}
main{min-height:100vh}
.hero{position:relative;min-height:98svh;display:flex;align-items:flex-end;overflow:hidden;background:#050505}
.hero::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 20% 20%, rgba(255,255,255,.08), transparent 35%),radial-gradient(circle at 80% 20%, rgba(255,255,255,.07), transparent 28%),linear-gradient(110deg,var(--hero1,#2d2d2d),var(--hero2,#090909) 58%, #040404 100%)}
.hero::after{content:"";position:absolute;inset:-20%;background:linear-gradient(120deg,transparent 0 36%,rgba(255,255,255,.045) 36% 44%,transparent 44% 54%,rgba(255,255,255,.025) 54% 61%,transparent 61% 100%);transform:rotate(-6deg)}
.hero-content,.hero-visual,.hero-index{position:relative;z-index:1}
.hero-content{padding:0 0 105px 6%;max-width:760px}
.eyebrow{font-size:11px;letter-spacing:3px;color:#d6cec2;text-transform:uppercase}
.hero h1,.page h1,.section h2{font-weight:700;line-height:.96;letter-spacing:-.08em;margin:18px 0 22px}
.hero h1{font-size:clamp(76px,10vw,148px);max-width:780px}
.hero-meta{display:flex;gap:12px;flex-wrap:wrap;color:#ddd2c7;font-size:13px;letter-spacing:.6px}
.hero-meta span{color:#6a655f}
.hero-desc{max-width:640px;color:#ddd4ca;font-size:15px;line-height:1.95;margin:26px 0 0}
.buttonrow{display:flex;gap:14px;flex-wrap:wrap;margin-top:32px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:16px 22px;border:1px solid var(--line-2);background:#151515;color:#fff;cursor:pointer;transition:.25s}
.btn:hover{transform:translateY(-1px);border-color:#6b655f;background:#1a1a1a}
.btn.light{background:#f1eee8;color:#101010;border-color:#f1eee8}
.btn.light:hover{background:#fff;border-color:#fff}
.btn.small{padding:11px 14px;font-size:11px;letter-spacing:1px;text-transform:uppercase}
.hero-visual{position:absolute;right:5%;bottom:78px;width:min(36vw,470px)}
.poster-stack{position:relative;height:560px}
.hero-poster{position:absolute;inset:auto;aspect-ratio:3/4;width:68%;border:1px solid rgba(255,255,255,.12);box-shadow:var(--shadow);padding:22px;display:flex;flex-direction:column;justify-content:space-between;overflow:hidden}
.hero-poster::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,255,255,.04),transparent 30%,rgba(0,0,0,.24) 80%)}
.hero-poster.main{right:0;top:0;z-index:2;transform:rotate(2deg)}
.hero-poster.second{left:3%;top:17%;z-index:1;transform:rotate(-8deg);opacity:.92}
.hero-poster.third{left:22%;bottom:0;z-index:0;transform:rotate(8deg);opacity:.75}
.poster-kicker,.poster-year,.poster-genre,.poster-rating,.poster-title,.poster-label{position:relative;z-index:1}
.poster-kicker,.poster-year,.poster-genre{font-size:11px;letter-spacing:2px;text-transform:uppercase;color:rgba(255,255,255,.8)}
.poster-title{font-size:clamp(26px,3vw,44px);font-weight:800;line-height:.95;letter-spacing:-.07em;max-width:92%}
.poster-bottom{display:flex;justify-content:space-between;align-items:end;gap:16px}
.poster-rating{font-size:28px;font-weight:700;letter-spacing:-.06em}
.poster-label{font-size:11px;letter-spacing:1.8px;text-transform:uppercase;color:rgba(255,255,255,.78)}
.hero-index{position:absolute;left:6%;bottom:44px;display:flex;gap:14px;align-items:center;color:#a99f92;font-size:12px;letter-spacing:2px}
.hero-index strong{color:#fff;font-size:18px;letter-spacing:0}
.hero-index button{border:1px solid var(--line-2);background:#111;color:#fff;width:42px;height:42px;cursor:pointer}
.ticker{display:flex;gap:18px;overflow:auto;padding:18px 5% 0;color:#817b75;letter-spacing:1.8px;font-size:11px;text-transform:uppercase;border-top:1px solid rgba(255,255,255,.06)}
.ticker span{white-space:nowrap}.ticker span::after{content:"✦";margin-left:18px;color:#5f5b57}
.section,.page{padding:100px 5% 0}
.page{padding-top:148px;padding-bottom:88px;min-height:60vh}
.page h1,.section h2{font-size:clamp(42px,6vw,84px)}
.pageintro,.subtle{max-width:760px;color:var(--muted);line-height:1.9;font-size:14px}
.section-heading{display:flex;justify-content:space-between;gap:24px;align-items:end;margin:16px 0 34px}
.textlink{font-size:11px;letter-spacing:1.6px;text-transform:uppercase;border-bottom:1px solid #78716b;padding-bottom:8px;color:#ded7cd}
.statsband{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:34px}
.statscard{padding:26px;border:1px solid var(--line);background:linear-gradient(180deg,#141414,#101010)}
.statscard strong{display:block;font-size:36px;line-height:1;letter-spacing:-.05em}
.statscard span{display:block;margin-top:10px;color:var(--muted);font-size:12px}
.cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.movie-card{display:flex;flex-direction:column;gap:0;min-width:0;background:#121212;border:1px solid rgba(255,255,255,.06);overflow:hidden;transition:transform .25s,border-color .25s,box-shadow .25s}
.movie-card:hover{transform:translateY(-4px);border-color:rgba(255,255,255,.14);box-shadow:var(--shadow)}
.poster{position:relative;aspect-ratio:3/4;padding:18px;display:flex;flex-direction:column;justify-content:space-between;overflow:hidden}
.poster::before{content:"";position:absolute;inset:0;background:linear-gradient(145deg,var(--c1,#445),var(--c2,#111) 70%,#070707)}
.poster::after{content:"";position:absolute;inset:auto -20% 18% -20%;height:55%;background:linear-gradient(180deg,transparent,rgba(0,0,0,.3) 30%,rgba(0,0,0,.65));transform:rotate(-8deg)}
.poster > *{position:relative;z-index:1}
.poster-top{display:flex;justify-content:space-between;gap:12px;align-items:flex-start}
.badge,.rating-badge{display:inline-flex;align-items:center;justify-content:center;padding:8px 10px;font-size:10px;letter-spacing:1.4px;text-transform:uppercase}
.badge{background:rgba(255,255,255,.88);color:#111;font-weight:800}
.rating-badge{border:1px solid rgba(255,255,255,.35);backdrop-filter:blur(8px)}
.poster-title-small{font-size:28px;font-weight:800;line-height:.95;letter-spacing:-.07em;max-width:86%}
.poster-meta{font-size:11px;letter-spacing:1.6px;text-transform:uppercase;color:rgba(255,255,255,.82)}
.cardbody{padding:16px}
.cardtitle{display:flex;justify-content:space-between;gap:12px;font-size:15px;font-weight:700}
.cardtitle span:last-child{font-size:12px;font-weight:500;color:#d5cec4}
.cardmeta{margin-top:7px;color:var(--muted);font-size:12px;line-height:1.6;min-height:38px}
.cardactions{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:14px}
.cardbtn{padding:12px;border:1px solid var(--line-2);background:#0f0f0f;color:#f4eee4;font-size:11px;letter-spacing:1.4px;text-transform:uppercase;cursor:pointer}
.cardbtn:hover{border-color:#6b655f;background:#171717}
.cardbtn.light{background:#f1eee8;color:#111;border-color:#f1eee8}
.wide-banner{position:relative;overflow:hidden;background:#111;min-height:460px;margin:92px 5% 0;padding:70px 7%;display:flex;align-items:center;border:1px solid rgba(255,255,255,.06)}
.wide-banner::before{content:"";position:absolute;inset:0;background:linear-gradient(120deg,var(--banner1,#332820),#0e0e0e 44%,var(--banner2,#17212b));opacity:.95}
.wide-banner::after{content:"";position:absolute;inset:-30% auto -30% 44%;width:45%;background:radial-gradient(circle,rgba(255,255,255,.18),transparent 60%);filter:blur(22px)}
.banner-content{position:relative;z-index:1;max-width:720px}
.banner-content h2{font-size:clamp(48px,6vw,100px);line-height:.98;letter-spacing:-.08em;margin:14px 0 18px}
.banner-content p{max-width:460px;color:#d2c8bc;line-height:1.9;font-size:14px}
.feature-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.featuretile{position:relative;padding:34px;min-height:330px;border:1px solid rgba(255,255,255,.06);background:linear-gradient(135deg,var(--c1,#2c2c2c),var(--c2,#111) 72%,#0b0b0b);overflow:hidden;transition:transform .25s,border-color .25s}
.featuretile::after{content:"";position:absolute;right:-40px;bottom:-50px;width:200px;height:200px;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.12),transparent 65%)}
.featuretile:hover{transform:translateY(-4px);border-color:rgba(255,255,255,.16)}
.featuretile small{font-size:11px;letter-spacing:2px;text-transform:uppercase;color:#ddd2c7}
.featuretile h3{font-size:35px;line-height:1;letter-spacing:-.06em;margin:20px 0 14px;max-width:250px}
.featuretile p{max-width:290px;color:#cec4b8;font-size:13px;line-height:1.85}
.featuretile ul{margin:18px 0 0;padding-left:18px;color:#f2eee6;font-size:12px;line-height:1.9}
.statement{padding:118px 8% 24px;text-align:center}
.statement h2{max-width:1050px;margin:18px auto;font-size:clamp(34px,4.8vw,70px);font-weight:600;letter-spacing:-.07em;line-height:1.08}
.statement h2 span{color:#8c857e}
.catalog-tools{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;margin:26px 0 18px}
.filters{display:flex;gap:8px;flex-wrap:wrap}
.filter{padding:12px 18px;border:1px solid var(--line-2);background:transparent;color:#d7cfc4;cursor:pointer;font-size:11px;letter-spacing:1.4px;text-transform:uppercase}
.filter.active,.filter:hover{background:#f1eee8;color:#111;border-color:#f1eee8}
.catalog-note{color:var(--muted);font-size:12px}
.loadmore-wrap{text-align:center;margin-top:28px}
.loadmore{min-width:220px}
.detail-hero{min-height:620px;display:flex;align-items:flex-end;position:relative;overflow:hidden;border-bottom:1px solid rgba(255,255,255,.06)}
.detail-hero::before{content:"";position:absolute;inset:0;background:linear-gradient(120deg,var(--hero1,#2f2f35),var(--hero2,#101010) 70%,#060606)}
.detail-hero::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 78% 30%,rgba(255,255,255,.14),transparent 30%),linear-gradient(0deg,rgba(9,9,9,1) 0%,rgba(9,9,9,.2) 55%)}
.detail-inner{position:relative;z-index:1;padding:180px 5% 54px;max-width:760px}
.detail-inner h1{font-size:clamp(54px,8vw,116px);line-height:.95;letter-spacing:-.08em;margin:18px 0}
.detail-meta{display:flex;gap:14px;flex-wrap:wrap;color:#d8d0c6;font-size:13px}
.detail-body{display:grid;grid-template-columns:1.35fr .85fr;gap:54px;max-width:1220px;margin:56px auto 0;padding:0 5%}
.detail-main p,.prose p{font-size:14px;line-height:2;color:#bbb1a5}
.data-list{border-top:1px solid var(--line)}
.data-list div{display:flex;justify-content:space-between;gap:18px;padding:16px 0;border-bottom:1px solid var(--line);font-size:12px}
.data-list span{color:#8e877f}
.premiumhero{position:relative;overflow:hidden;min-height:620px;display:flex;align-items:center;justify-content:center;text-align:center;background:radial-gradient(circle at 50% 25%,rgba(200,169,126,.15),transparent 28%),linear-gradient(180deg,#121212,#090909 75%)}
.premiumhero::before{content:"W";position:absolute;font-size:min(60vw,760px);font-weight:800;line-height:1;color:rgba(255,255,255,.02)}
.premiumhero>div{position:relative;z-index:1;padding:150px 20px 68px}
.premiumhero h1{font-size:clamp(72px,10vw,150px);line-height:.92;letter-spacing:-.08em;margin:16px 0 20px}
.premiumhero p{max-width:670px;margin:0 auto 28px;color:#c8beb3;line-height:1.9}
.premiumfeatures{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:34px}
.premiumfeatures article{padding:32px;border:1px solid var(--line);background:linear-gradient(180deg,#141414,#101010)}
.premiumfeatures strong{font-size:34px;font-weight:700;letter-spacing:-.05em}
.premiumfeatures h3{font-size:17px;margin:18px 0 10px}.premiumfeatures p{color:var(--muted);font-size:13px;line-height:1.85}
.formbox{margin:74px auto 0;max-width:720px;padding:42px;border:1px solid var(--line);background:#141414}
.formbox h2{font-size:34px;line-height:1;letter-spacing:-.05em;margin:0 0 10px}
.field{margin-top:18px}.field label{display:block;margin-bottom:8px;color:#c7bfb3;font-size:11px;letter-spacing:1.4px;text-transform:uppercase}.field input{width:100%;padding:16px;background:#0b0b0b;color:#fff;border:1px solid var(--line-2);outline:none}.field input:focus{border-color:#8c8378}
.notice{margin-top:22px;padding:28px;border:1px solid var(--line-2);background:#0c0c0c;text-align:center}.notice h3{font-size:28px;line-height:1;margin:4px 0 8px}.notice p{color:#c2b8ac;line-height:1.9;font-size:13px}
.faqitem{border-bottom:1px solid var(--line)}
.faqitem summary{list-style:none;cursor:pointer;padding:24px 0;display:flex;justify-content:space-between;gap:18px;font-size:17px}
.faqitem summary::after{content:"+";font-size:24px;color:#928980}.faqitem[open] summary::after{content:"−"}.faqitem p{padding:0 0 20px;color:#bab0a4;line-height:1.95;max-width:860px}
.prose{max-width:860px}
.prose h2{font-size:24px;line-height:1.1;margin:36px 0 10px}
.footer{margin-top:100px;padding:80px 5% 28px;border-top:1px solid var(--line);background:#0c0c0c}
.foot-top{display:grid;grid-template-columns:2.2fr repeat(3,1fr);gap:28px}
.foot-brand{font-size:34px;font-weight:800;letter-spacing:-.05em}.foot-brand span{color:var(--gold)}
.foot-top p{font-size:13px;color:var(--muted);line-height:1.9;margin-top:18px}
.foot-col{display:flex;flex-direction:column;gap:15px}.foot-col b{font-size:12px;letter-spacing:1.4px;text-transform:uppercase;color:#eee}.foot-col a{font-size:12px;color:#9d968d}.foot-col a:hover{color:#fff}
.foot-bottom{display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;border-top:1px solid #222;padding-top:22px;margin-top:54px;color:#8a837b;font-size:11px}
.searchscreen{position:fixed;inset:0;z-index:90;background:#090909;padding:128px max(5%,calc((100vw - 1250px)/2)) 50px;overflow:auto}
.searchhead{display:flex;justify-content:space-between;gap:12px;color:#cbc1b4;letter-spacing:2px;font-size:11px}.searchhead button{background:none;border:0;color:#fff;font-size:24px;cursor:pointer}
.searchscreen input{width:100%;background:transparent;border:0;border-bottom:1px solid #46403a;padding:28px 0 30px;color:#fff;font-size:clamp(28px,4.8vw,62px);line-height:1;letter-spacing:-.05em;outline:none}
.searchresults{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:32px}.empty{color:#a79d90;padding:24px 0}
.modal{position:fixed;inset:0;z-index:100;display:grid;place-items:center}.modalbg{position:absolute;inset:0;background:rgba(0,0,0,.86);backdrop-filter:blur(10px)}
.fullscreen-box{position:relative;z-index:1;width:min(1200px,94vw)}
.playerhead{display:flex;justify-content:space-between;align-items:center;gap:12px;color:#c9bfb3;font-size:10px;letter-spacing:2px;margin-bottom:14px;text-transform:uppercase}.playerhead button{border:0;background:none;color:#fff;cursor:pointer;font-size:13px}
#player video{width:100%;max-height:80vh;aspect-ratio:16/9;background:#080808;border:1px solid rgba(255,255,255,.08)}
.watchbox{width:min(1320px,96vw)}
.watch-sim{min-height:78vh;background:#040404;border:1px solid rgba(255,255,255,.08);display:flex;flex-direction:column;justify-content:space-between;padding:28px;position:relative;overflow:hidden}
.watch-sim::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 50% 32%,rgba(255,255,255,.07),transparent 18%),linear-gradient(145deg,var(--c1,#353535),#080808 48%,var(--c2,#111) 100%);opacity:.5}
.watch-top,.watch-center,.watch-bottom{position:relative;z-index:1}
.watch-top{display:flex;justify-content:space-between;align-items:center;gap:12px;font-size:12px;color:#c9bfb3;letter-spacing:1.5px;text-transform:uppercase}
.watch-center{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:22px;min-height:52vh}
.watch-center h3{margin:0;font-size:clamp(42px,5vw,88px);line-height:.95;letter-spacing:-.08em;max-width:860px}
.watch-center p{max-width:580px;color:#d4cabe;font-size:15px;line-height:1.9;margin:0}
.loader-ring{width:108px;height:108px;border-radius:50%;border:2px solid rgba(255,255,255,.12);border-top-color:#fff;border-right-color:var(--gold);animation:spin 1.25s linear infinite}
.loader-dots span{display:inline-block;animation:dots 1.6s infinite}.loader-dots span:nth-child(2){animation-delay:.2s}.loader-dots span:nth-child(3){animation-delay:.4s}
.streamline{height:8px;border:1px solid rgba(255,255,255,.12);background:#121212;overflow:hidden}.streamline::after{content:"";display:block;height:100%;width:35%;background:linear-gradient(90deg,transparent,#fff,transparent);animation:slide 2.2s ease-in-out infinite}
.watch-bottom{display:grid;grid-template-columns:1fr auto;gap:16px;align-items:end}
.watch-bottom small{color:#9c958d;font-size:11px;line-height:1.8;max-width:620px}
.meta-line{display:flex;gap:14px;flex-wrap:wrap;color:#d9d0c5;font-size:12px;letter-spacing:1px;text-transform:uppercase}
.hidden{display:none!important}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes slide{0%{transform:translateX(-120%)}50%{transform:translateX(180%)}100%{transform:translateX(260%)}}
@keyframes dots{0%,80%,100%{opacity:.25;transform:translateY(0)}40%{opacity:1;transform:translateY(-4px)}}
@media (max-width:1100px){
  .cards,.searchresults{grid-template-columns:repeat(3,1fr)}
  .feature-grid,.premiumfeatures,.foot-top{grid-template-columns:1fr 1fr}
  .detail-body{grid-template-columns:1fr}
  .hero-visual{position:relative;right:auto;bottom:auto;width:100%;padding:0 6% 60px}.poster-stack{height:380px}
}
@media (max-width:900px){
  .navlinks{display:none;position:absolute;left:0;right:0;top:82px;padding:24px 5%;background:#101010;flex-direction:column;border-top:1px solid var(--line)}
  .navlinks.open{display:flex}
  .menubtn{display:grid}
  .cards,.searchresults{grid-template-columns:repeat(2,1fr)}
  .feature-grid,.statsband,.premiumfeatures{grid-template-columns:1fr}
  .hero{display:block;padding-top:84px}
  .hero-content{padding:34px 6% 52px}.hero h1{font-size:76px}
  .hero-index{left:6%;bottom:18px}
  .wide-banner{padding:56px 7%;min-height:400px}
}
@media (max-width:640px){
  .nav{height:72px}.navlinks{top:72px}.logo-word{font-size:20px}.navpremium{padding:11px 14px}.navright{gap:8px}
  .hero{min-height:auto}.hero-content{padding-top:26px}.hero h1{font-size:56px}.hero-desc{font-size:14px}
  .poster-stack{height:300px}.hero-poster{padding:16px}.poster-title{font-size:22px}.poster-title-small{font-size:22px}
  .section,.page{padding-top:72px}.page{padding-top:120px}.page h1,.section h2{font-size:44px}
  .cards{gap:12px}.cardactions{grid-template-columns:1fr}.featuretile h3{font-size:30px}.banner-content h2{font-size:58px}
  .foot-top{grid-template-columns:1fr}.searchscreen{padding:102px 6% 38px}
  .searchresults{grid-template-columns:1fr}.watch-sim{padding:18px;min-height:84vh}.watch-bottom{grid-template-columns:1fr}.watch-center h3{font-size:44px}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

/* WATCHOKO real poster artwork */
.poster .real-poster,.hero-poster .real-poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;filter:brightness(.75);transition:transform .6s ease}
.poster::before,.hero-poster::before{z-index:0}
.poster::after{z-index:1}
.poster .poster-top,.poster .poster-bottom,.poster .poster-kicker,.poster .poster-title-small{position:relative;z-index:2}
.movie-card:hover .real-poster{transform:scale(1.045)}
.hero-poster .real-poster{filter:brightness(.62)}
.hero-poster .poster-kicker,.hero-poster .poster-title,.hero-poster .poster-bottom{z-index:2}
.real-hero-art,.real-detail-art{position:absolute;inset:0;background-position:70% center;background-size:cover;filter:blur(2px) brightness(.23) saturate(1.2);opacity:.75}
.real-hero-art::after,.real-detail-art::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#090909 0%,transparent 70%),linear-gradient(0deg,#090909,transparent 60%)}
.real-hero-art{z-index:0}
.real-detail-art{z-index:0}
.vimeo-player{width:100%;height:min(75vh,675px);aspect-ratio:16/9;border:0;background:#000}
.trailer-unavailable{padding:56px 32px;background:#101010;text-align:center;border:1px solid #333}
.trailer-unavailable h3{font-size:clamp(28px,4vw,50px)}
.trailer-unavailable p{color:#aaa;margin:20px auto;max-width:550px}
[hidden]{display:none!important}

/* WATCHOKO V4 — intro and cookie consent */
.intro{position:fixed;inset:0;background:#070707;z-index:999;display:grid;place-items:center;transition:opacity .7s ease,visibility .7s ease}
.intro-brand{display:flex;align-items:center;justify-content:center;gap:0;min-width:260px;overflow:hidden;white-space:nowrap}
.intro-icon{width:84px;height:84px;border:2px solid rgba(255,255,255,.3);border-radius:21px;display:grid;place-items:center;font-size:50px;font-weight:800;letter-spacing:-.13em;background:linear-gradient(135deg,#1d1d1d,#080808);box-shadow:0 0 60px rgba(255,255,255,.09);animation:intro-emerge .7s cubic-bezier(.2,.8,.2,1) both,intro-slide .6s 1s ease-in-out both}
.intro-name{font-size:clamp(30px,5vw,56px);font-weight:800;letter-spacing:-.07em;max-width:0;opacity:0;overflow:hidden;animation:intro-name 0.7s 1.05s cubic-bezier(.2,.8,.2,1) forwards}
.intro-dot{color:#c8a97e}
.intro-exit{opacity:0;visibility:hidden;pointer-events:none}
.intro>button{position:absolute;right:24px;bottom:24px;background:none;border:1px solid #343434;color:#aaa;padding:10px 18px;cursor:pointer}
@keyframes intro-emerge{from{opacity:0;transform:scale(.76)}to{opacity:1;transform:scale(1)}}
@keyframes intro-slide{to{transform:translateX(-6px);border-color:#555}}
@keyframes intro-name{to{max-width:350px;opacity:1;padding-left:13px}}
.cookie-notice{position:fixed;left:24px;right:24px;bottom:24px;max-width:820px;margin:auto;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:22px 24px;background:rgba(20,20,20,.97);border:1px solid #41403e;border-radius:14px;box-shadow:0 22px 80px #0009;z-index:85;opacity:0;transform:translateY(26px);transition:opacity .35s ease,transform .35s ease;backdrop-filter:blur(18px)}
.cookie-notice[hidden]{display:none!important}.cookie-notice.cookie-show{opacity:1;transform:translateY(0)}
.cookie-notice strong{font-size:14px}.cookie-notice p{margin:6px 0 0;color:#b5afa7;font-size:12px;line-height:1.7}.cookie-notice a{text-decoration:underline;text-underline-offset:3px}
.cookie-actions{display:flex;gap:10px;flex-shrink:0}.cookie-actions button{padding:11px 16px;background:#1c1c1c;color:#f0ece7;border:1px solid #555;white-space:nowrap;cursor:pointer;font-size:12px}.cookie-actions button:last-child{background:#f1eee8;color:#111;border-color:#f1eee8}
@media(max-width:700px){.cookie-notice{left:12px;right:12px;bottom:12px;display:block;padding:20px}.cookie-actions{margin-top:16px}.cookie-actions button{flex:1}.intro-icon{width:64px;height:64px;font-size:38px}}
@media(prefers-reduced-motion:reduce){.intro-icon,.intro-name{animation:none;opacity:1;max-width:none}.intro{transition:none}}

/* WATCHOKO V5 — search, intro, movie cards */
.intro-brand {min-width:0; width:min(92vw,660px); overflow:visible; white-space:nowrap; gap:0;}
.intro-icon{flex:0 0 84px;letter-spacing:0;line-height:1;}
.intro-name{flex:0 1 auto;white-space:nowrap; min-width:0; font-size:clamp(24px,4.6vw,52px);letter-spacing:-.055em; animation:intro-name-safe .7s 1s cubic-bezier(.16,1,.3,1) both;}
@keyframes intro-name-safe{from{opacity:0;clip-path:inset(0 100% 0 0);transform:translateX(-18px)}to{opacity:1;clip-path:inset(0 0 0 0);transform:translateX(0)}}
@media(max-width:700px){.intro-icon{flex-basis:64px}.intro-brand{width:min(94vw,440px)}.intro-name{font-size:clamp(23px,5.9vw,38px)}}
.navright #openSearch{width:46px;height:46px;min-width:46px;border-radius:50%;background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.22);transition:background .28s,transform .28s,border-color .28s}
.navright #openSearch:hover{background:rgba(255,255,255,.14);transform:scale(1.06);border-color:#ddd}
.searchscreen:not([hidden]){animation:watchoko-search-open .38s cubic-bezier(.2,.8,.2,1) both}
@keyframes watchoko-search-open{from{opacity:0;transform:translateY(-14px)}to{opacity:1;transform:translateY(0)}}
.searchscreen input{transition:border-color .3s}.searchscreen input:focus{border-color:#e9e0d5}
.searchhead button{width:42px;height:42px;border:1px solid #333;border-radius:50%;transition:background .2s}.searchhead button:hover{background:#222}
.poster .real-poster {z-index:0}
.poster .poster-top,.poster .poster-bottom,.poster .poster-kicker,.poster .poster-title-small {text-shadow:0 2px 15px rgba(0,0,0,.5)}
/* Keep the illustrated poster visible on small devices without cropping the film title. */
@media(max-width:640px){.poster-title-small{font-size:clamp(18px,5vw,26px)}.intro-icon{animation:intro-emerge .6s both}}

/* WATCHOKO V6: unobstructed splash and cinematic hero */
.intro{pointer-events:none!important;animation:watchoko-intro-autohide .5s 2.6s both}
.intro-brand{width:max-content!important;max-width:calc(100vw - 36px);min-width:0!important;overflow:visible!important;display:flex;gap:12px;justify-content:center;align-items:center}
.intro-icon{flex:0 0 auto!important;animation:watchoko-mark-enter .65s ease-out both,watchoko-mark-shift .55s .95s ease-in-out both!important}
.intro-name{display:block!important;width:auto!important;max-width:none!important;min-width:0!important;overflow:visible!important;clip-path:none!important;padding-left:0!important;opacity:0;animation:watchoko-word-enter .75s 1.03s ease-out forwards!important}
.intro-exit{opacity:0!important;visibility:hidden!important}
@keyframes watchoko-mark-enter{from{opacity:0;transform:scale(.84)}to{opacity:1;transform:scale(1)}}
@keyframes watchoko-mark-shift{from{transform:translateX(90px)}to{transform:translateX(0)}}
@keyframes watchoko-word-enter{from{opacity:0;transform:translateX(-12px)}to{opacity:1;transform:translateX(0)}}
@keyframes watchoko-intro-autohide{to{visibility:hidden;opacity:0}}
.hero-film-motion{position:absolute;inset:0;overflow:hidden;z-index:0;pointer-events:none;opacity:.36;mask-image:linear-gradient(90deg,transparent 0,black 30%,black 100%)}
.hero-film-motion iframe{border:0;position:absolute;top:50%;left:50%;width:178vh;min-width:100%;height:100vh;min-height:56.25vw;transform:translate(-50%,-50%);pointer-events:none}
.hero-visual{pointer-events:none}
.hero-poster.second,.hero-poster.third{display:none!important}
.hero-poster.main{width:76%;right:0;transform:rotate(1deg)}
@media(max-width:900px){.hero-film-motion{opacity:.22}.hero-film-motion iframe{min-width:180%;}}
@media(prefers-reduced-motion:reduce){.intro{display:none!important}.hero-film-motion{display:none}}

/* WATCHOKO V7: background video is above fallback artwork, not behind it. */
.hero { isolation:isolate; }
.hero .real-hero-art {z-index:0;filter:brightness(.35) saturate(1.05);opacity:1;transition:opacity .8s ease;}
.hero .hero-film-motion {z-index:1;opacity:.88;mask-image:none; -webkit-mask-image:none;}
.hero .hero-film-motion::after {content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,rgba(3,3,3,.86) 0%,rgba(3,3,3,.42) 46%,rgba(3,3,3,.04) 100%),linear-gradient(0deg,rgba(3,3,3,.60),transparent 45%);}
.hero .hero-film-motion iframe {z-index:0;}
.hero .hero-content,.hero .hero-index {z-index:3;}
.hero .hero-visual {z-index:3;}
.hero:has(.hero-film-motion) .hero-poster.main {width:62%;opacity:.8;transform:rotate(0deg);}
.catalogue-status {color:#b4a99d;font-size:13px;line-height:1.8;padding-top:14px;min-height:40px;}
.catalogue-skeleton{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin:22px 0;}
.catalogue-skeleton i{height:210px;display:block;background:linear-gradient(100deg,#161616,#292521,#161616);background-size:200% 100%;animation:catalogue-shimmer 1.5s ease-in-out infinite;}
@keyframes catalogue-shimmer {to {background-position:-200% 0}}
@media(max-width:900px){.catalogue-skeleton{grid-template-columns:repeat(2,1fr)}.hero .hero-film-motion{opacity:.7}}