/* Oka Nannys — cinematic intro styles (loaded on the homepage only) */
html.intro-on{overflow:hidden}
#introShield{display:none}
html.intro-on #introShield{display:block;position:fixed;inset:0;z-index:300;background:#0a110e;transition:opacity .5s ease}
.in-sr,.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.intro{position:fixed;inset:0;z-index:250;background:#0a110e;color:#f6f1e7;overflow:hidden;font-family:'Jost',system-ui,sans-serif;--u:1px}
.intro.in-out{opacity:0;pointer-events:none;transition:opacity .8s ease}
.in-root{position:relative;color:#f6f1e7;font-family:'Jost',system-ui,sans-serif}
.intro.in-root{position:fixed}
.in-stage{position:absolute;inset:0;overflow:hidden;background:#0a110e}
.in-photos{position:absolute;inset:0}
.in-layer{position:absolute;inset:0;overflow:hidden;opacity:0;visibility:hidden;will-change:opacity}
.in-layer img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform-origin:50% 50%;will-change:transform}
.in-shade{position:absolute;inset:0;pointer-events:none;background:linear-gradient(0deg,rgba(8,14,11,.82) 0%,rgba(8,14,11,.4) 34%,rgba(8,14,11,0) 64%),linear-gradient(180deg,rgba(8,14,11,.5) 0%,rgba(8,14,11,0) 24%)}
.in-vig{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at center,rgba(0,0,0,0) 52%,rgba(0,0,0,.5) 100%)}
.in-dark .in-shade{opacity:0}
.in-black{position:absolute;inset:0;background:radial-gradient(ellipse at 50% 42%,#15211b 0%,#0a110e 62%,#070b09 100%);opacity:0;pointer-events:none}
canvas.in-grain{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;mix-blend-mode:overlay;opacity:.07}

/* gold hairline frame with corner ticks — the "Oka" frame on every shot */
.in-frame{position:absolute;inset:calc(var(--u)*36);border:1px solid rgba(211,178,122,.42);pointer-events:none;opacity:0}
.in-frame i{position:absolute;width:calc(var(--u)*26);height:calc(var(--u)*26);border:2px solid #d3b27a}
.in-frame i:nth-child(1){left:-2px;top:-2px;border-right:0;border-bottom:0}
.in-frame i:nth-child(2){right:-2px;top:-2px;border-left:0;border-bottom:0}
.in-frame i:nth-child(3){left:-2px;bottom:-2px;border-right:0;border-top:0}
.in-frame i:nth-child(4){right:-2px;bottom:-2px;border-left:0;border-top:0}
.in-tall .in-frame{inset:calc(var(--u)*30)}

/* brand bug + url */
.in-bug{position:absolute;left:calc(var(--u)*84);top:calc(var(--u)*76);display:flex;align-items:center;gap:calc(var(--u)*16);opacity:0}
.in-bug img{width:calc(var(--u)*62);height:calc(var(--u)*60);padding:0;border-radius:0;background:none;object-fit:contain;box-shadow:none;filter:brightness(1.5) saturate(.95) drop-shadow(0 3px 10px rgba(0,0,0,.55))}
.in-bug b{font-family:'Cormorant Garamond',serif;font-weight:600;font-size:calc(var(--u)*40);letter-spacing:.02em;color:#fffdf9;text-shadow:0 2px 20px rgba(0,0,0,.4)}
.in-url{position:absolute;right:calc(var(--u)*84);bottom:calc(var(--u)*72);font-size:calc(var(--u)*20);letter-spacing:calc(var(--u)*5);text-transform:uppercase;color:rgba(246,241,231,.85);opacity:0}
.in-tall .in-bug{left:calc(var(--u)*70);top:calc(var(--u)*110)}
.in-tall .in-bug img{width:calc(var(--u)*84);height:calc(var(--u)*80)}
.in-tall .in-bug b{font-size:calc(var(--u)*54)}
.in-tall .in-url{right:auto;left:50%;transform:translateX(-50%);bottom:calc(var(--u)*100);font-size:calc(var(--u)*28)}

/* headlines */
.in-txt{position:absolute;left:calc(var(--u)*130);right:calc(var(--u)*130);bottom:calc(var(--u)*150);opacity:0;will-change:opacity}
.in-tall .in-txt{left:calc(var(--u)*80);right:calc(var(--u)*80);bottom:calc(var(--u)*330)}
.in-eyebrow{display:flex;align-items:center;gap:calc(var(--u)*18);font-size:calc(var(--u)*23);letter-spacing:calc(var(--u)*7);text-transform:uppercase;color:#d3b27a;font-weight:500;margin-bottom:calc(var(--u)*24)}
.in-eyebrow i{display:block;width:calc(var(--u)*66);height:calc(var(--u)*1.5);background:#d3b27a}
.in-tall .in-eyebrow{font-size:calc(var(--u)*30);letter-spacing:calc(var(--u)*5)}
.in-h,.in-h1{font-family:'Cormorant Garamond',serif;font-weight:500;line-height:1.02;letter-spacing:.02em;text-transform:uppercase}
.in-h{font-size:calc(var(--u)*96)}
.in-tall .in-h{font-size:calc(var(--u)*102)}
.in-h1.wm{font-size:calc(var(--u)*172);letter-spacing:.08em;font-weight:500}
.in-tall .in-h1.wm{font-size:calc(var(--u)*150)}
.in-line{margin-top:calc(var(--u)*22);font-size:calc(var(--u)*34);letter-spacing:calc(var(--u)*11);color:#d3b27a;font-weight:500}
.in-tall .in-line{font-size:calc(var(--u)*38);letter-spacing:calc(var(--u)*8)}
.in-places{display:flex;flex-wrap:wrap;gap:0 calc(var(--u)*34)}
.in-places span{display:inline-block;opacity:0}
.in-places span:last-child{color:#d3b27a;font-style:italic;text-transform:none}
.in-mask{display:block;overflow:hidden;padding-bottom:.1em}
.in-mask>span{display:block;will-change:transform}

/* brand tags (montage lower-thirds) */
.in-tag{position:absolute;left:calc(var(--u)*130);bottom:calc(var(--u)*140);display:flex;align-items:center;gap:calc(var(--u)*18);padding:calc(var(--u)*12) calc(var(--u)*30) calc(var(--u)*12) calc(var(--u)*14);border:1px solid rgba(211,178,122,.7);border-radius:999px;background:rgba(10,17,13,.55);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);font-size:calc(var(--u)*27);letter-spacing:.05em;opacity:0}
.in-tag img{width:calc(var(--u)*46);height:calc(var(--u)*44);padding:calc(var(--u)*5);border-radius:50%;background:rgba(255,254,251,.95);object-fit:contain}
.in-tall .in-tag{left:calc(var(--u)*70);bottom:calc(var(--u)*250);font-size:calc(var(--u)*34)}
.in-tall .in-tag img{width:calc(var(--u)*58);height:calc(var(--u)*56)}
/* when a tag is on screen the main headline sits higher so both read */
.t3a,.t3b{bottom:calc(var(--u)*270)}
.in-tall .t3a,.in-tall .t3b{bottom:calc(var(--u)*470)}

/* signature lockup */
.in-lock{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;pointer-events:none}
.in-lockplate{position:absolute;inset:0;opacity:0;background:radial-gradient(ellipse at 50% 46%,rgba(211,178,122,.14),transparent 55%)}
.in-lockrow{position:relative;display:flex;align-items:center;gap:calc(var(--u)*34)}
.in-lockicon{width:calc(var(--u)*212);height:auto;opacity:0;filter:drop-shadow(0 12px 40px rgba(0,0,0,.45))}
.in-tall .in-lockicon{width:calc(var(--u)*230)}
.in-lockword{font-family:'Cormorant Garamond',serif;font-weight:600;font-size:calc(var(--u)*118);color:#fffdf9;letter-spacing:.03em;opacity:0;white-space:nowrap}
.in-tall .in-lockrow{flex-direction:column;gap:calc(var(--u)*20)}
.in-tall .in-lockword{font-size:calc(var(--u)*120)}
.in-rule{position:relative;width:calc(var(--u)*300);height:1.5px;background:linear-gradient(90deg,transparent,#d3b27a,transparent);margin:calc(var(--u)*34) 0 calc(var(--u)*26);transform:scaleX(0);transform-origin:50% 50%}
.in-locktag{position:relative;font-size:calc(var(--u)*34);letter-spacing:calc(var(--u)*13);color:#d3b27a;font-weight:500;opacity:0}
.in-tall .in-locktag{font-size:calc(var(--u)*38);letter-spacing:calc(var(--u)*8)}
.in-lockpos{position:relative;margin-top:calc(var(--u)*24);max-width:calc(var(--u)*1300);font-size:calc(var(--u)*21);letter-spacing:calc(var(--u)*6);color:rgba(246,241,231,.85);opacity:0;line-height:1.7}
.in-tall .in-lockpos{font-size:calc(var(--u)*26);max-width:calc(var(--u)*900);letter-spacing:calc(var(--u)*4)}
.in-lockcta{position:relative;margin-top:calc(var(--u)*46);font-size:calc(var(--u)*38);font-weight:500;opacity:0}
.in-lockcta small{display:block;font-size:.6em;color:#d3b27a;letter-spacing:.2em;margin-top:calc(var(--u)*10);text-transform:uppercase}
.in-shine{position:absolute;top:0;bottom:0;left:0;width:42%;pointer-events:none;opacity:0;background:linear-gradient(90deg,transparent,rgba(240,214,160,.20),transparent);mix-blend-mode:screen}

/* controls */
.in-skip,.in-sound{position:absolute;z-index:5;border:1px solid rgba(246,241,231,.4);background:rgba(10,17,13,.5);color:#f6f1e7;font-family:'Jost',sans-serif;font-size:14px;letter-spacing:.14em;text-transform:uppercase;border-radius:999px;padding:11px 20px;cursor:pointer;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);opacity:0;transition:opacity .5s,background .25s,border-color .25s}
.in-skip{right:max(22px,env(safe-area-inset-right));top:max(22px,env(safe-area-inset-top))}
.in-sound{left:max(22px,env(safe-area-inset-left));bottom:max(22px,env(safe-area-inset-bottom));display:flex;align-items:center;gap:12px}
.in-skip.on,.in-sound.on-ready{opacity:1}
.in-skip:hover,.in-sound:hover{background:rgba(255,255,255,.16);border-color:#d3b27a}
.in-skip:focus-visible,.in-sound:focus-visible{outline:2px solid #d3b27a;outline-offset:3px}
.in-wave{display:inline-flex;gap:3px;align-items:flex-end;height:14px}
.in-wave i{width:3px;background:#d3b27a;height:5px;border-radius:2px}
.in-sound.on .in-wave i{animation:inwave 1s ease-in-out infinite}
.in-sound.on .in-wave i:nth-child(2){animation-delay:.2s}.in-sound.on .in-wave i:nth-child(3){animation-delay:.4s}
@keyframes inwave{0%,100%{height:4px}50%{height:14px}}

/* hand-over: homepage chrome fades in once the logo lands */
html.intro-hold #header{opacity:0}
html.intro-hold .cine-inner > *,html.intro-hold .cine-dock,html.intro-hold .scrollcue{opacity:0;transform:translate3d(0,26px,0)}
.cine-inner > *,.cine-dock,.scrollcue{transition:opacity 1s cubic-bezier(.22,.8,.24,1),transform 1s cubic-bezier(.22,.8,.24,1)}
.cine-inner > *:nth-child(2){transition-delay:.12s}.cine-inner > *:nth-child(3){transition-delay:.26s}.cine-inner > *:nth-child(4){transition-delay:.4s}.cine-inner > *:nth-child(5){transition-delay:.52s}
.cine-dock{transition-delay:.62s}.scrollcue{transition-delay:.8s}
@media (prefers-reduced-motion:reduce){html.intro-hold #header,html.intro-hold .cine-inner > *{opacity:1;transform:none}}

/* footage mode */
.in-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#0a110e}
.in-flash{position:absolute;inset:0;pointer-events:none;background:linear-gradient(115deg,rgba(255,236,196,.9),rgba(255,214,150,.6));opacity:0;mix-blend-mode:screen}

/* ---- coming-soon scenes (website intro + film) ---- */
.fx{position:absolute;inset:0;pointer-events:none;opacity:0}
.vdx-frame{position:absolute;overflow:visible}
.vdx-game{background:#000;box-shadow:0 0 0 1px rgba(0,0,0,.08);opacity:0}
/* ---- Oka Lifestyle ---- */
.ils-shade{background:radial-gradient(ellipse at 50% 52%,rgba(5,7,6,.52),rgba(5,7,6,.80) 85%)}
.ils-in{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;color:#f6f1e7}
.ils-lab{display:flex;align-items:center;gap:calc(var(--u)*22);font-size:calc(var(--u)*28);letter-spacing:calc(var(--u)*14);color:#d3b27a;font-weight:500}
.ils-lab::before,.ils-lab::after{content:"";width:calc(var(--u)*80);height:calc(var(--u)*2);background:#d3b27a}
.ils-title{font-family:'Cormorant Garamond',serif;font-weight:500;font-size:calc(var(--u)*190);line-height:.98;margin:calc(var(--u)*30) 0 calc(var(--u)*6);background:linear-gradient(100deg,#f6f1e7 0%,#f6f1e7 40%,#e6c88e 50%,#f6f1e7 60%,#f6f1e7 100%);background-size:260% 100%;-webkit-background-clip:text;background-clip:text;color:transparent}
.ils-sub{font-family:'Cormorant Garamond',serif;font-style:italic;font-size:calc(var(--u)*46);color:rgba(246,241,231,.88);margin-top:calc(var(--u)*34)}
.ils-rule{width:calc(var(--u)*420);height:calc(var(--u)*2);background:linear-gradient(90deg,transparent,#d3b27a,transparent);margin-top:calc(var(--u)*40)}
.in-tall .ils-title{font-size:calc(var(--u)*150)}.in-tall .ils-lab{font-size:calc(var(--u)*30);letter-spacing:calc(var(--u)*10)}.in-tall .ils-sub{font-size:calc(var(--u)*54);max-width:calc(var(--u)*820)}
/* ---- Villa Day ---- */
.vdx{font-family:'Fredoka','Jost',sans-serif;color:#2b2a27}
.vdx-skywrap{position:absolute;inset:0;overflow:hidden}
.vdx-sky{position:absolute;inset:0;background:linear-gradient(180deg,#86c1e8 0%,#c9e3f2 36%,#fbe2c9 74%,#ffe9b3 100%)}
.vdx-cl{position:absolute;height:calc(var(--u)*80);width:calc(var(--u)*260);border-radius:999px;background:rgba(255,255,255,.78)}
.vdx-cl::before,.vdx-cl::after{content:"";position:absolute;background:inherit;border-radius:50%}
.vdx-cl::before{width:calc(var(--u)*110);height:calc(var(--u)*110);left:calc(var(--u)*40);top:calc(var(--u)*-50)}.vdx-cl::after{width:calc(var(--u)*86);height:calc(var(--u)*86);left:calc(var(--u)*130);top:calc(var(--u)*-32)}
.vdx-ring{position:absolute;border:calc(var(--u)*22) solid #fff;border-radius:calc(var(--u)*40);box-shadow:0 calc(var(--u)*30) calc(var(--u)*60) rgba(40,70,100,.35)}
.vdx-cap{position:absolute;font-weight:600;font-size:calc(var(--u)*26);letter-spacing:.14em;text-transform:uppercase;color:#5a5648;text-align:center}
.vdx-lab{position:absolute;background:#ef7fa4;color:#fff;font-weight:600;font-size:calc(var(--u)*28);letter-spacing:.16em;padding:calc(var(--u)*12) calc(var(--u)*26);border-radius:999px;box-shadow:0 calc(var(--u)*6) 0 #c8557c;white-space:nowrap}
.vdx-badge{position:absolute;display:flex;align-items:center;gap:calc(var(--u)*12);background:#ffd34d;color:#3b2a08;font-weight:700;font-size:calc(var(--u)*28);letter-spacing:.16em;padding:calc(var(--u)*12) calc(var(--u)*26) calc(var(--u)*12) calc(var(--u)*18);border-radius:999px;box-shadow:0 calc(var(--u)*6) 0 #d9a91b;white-space:nowrap}
.vdx-badge svg{width:calc(var(--u)*34);height:calc(var(--u)*34)}
.vdx-title{position:absolute;font-weight:700;color:#c4892b;line-height:.92;text-shadow:0 calc(var(--u)*10) 0 #f4dca0,0 calc(var(--u)*20) 0 rgba(120,80,20,.18)}
.vdx-title b{display:block;font-weight:700;transform-origin:0 100%}
.vdx-sub{position:absolute;font-weight:700;letter-spacing:.14em;color:#2f4a3a}
.vdx-p{position:absolute;font-weight:500;color:#34322d;line-height:1.5}
.vdx-bar{position:absolute;height:calc(var(--u)*34);border-radius:999px;background:rgba(255,255,255,.9);box-shadow:inset 0 3px 0 rgba(0,0,0,.12);padding:calc(var(--u)*6)}
.vdx-bar i{display:block;height:100%;border-radius:999px;background:repeating-linear-gradient(135deg,#ef7fa4 0 18px,#f7a3bf 18px 36px)}
.vdx-load{position:absolute;font-weight:700;letter-spacing:.12em;color:#2f4a3a}
.vdx-dev{position:absolute;font-weight:500;color:#5a5648}

/* social cut: bigger, longer-held end card so it can be read */
body.social .in-lockpos{font-size:calc(var(--u)*29);letter-spacing:calc(var(--u)*4);max-width:calc(var(--u)*1200)}
body.social.in-x .in-lockpos{}
body.social .in-tall .in-lockpos{font-size:calc(var(--u)*36);max-width:calc(var(--u)*940)}
body.social .in-lockcta{font-size:calc(var(--u)*50);margin-top:calc(var(--u)*56)}
body.social .in-tall .in-lockcta{font-size:calc(var(--u)*56)}
body.social .in-locktag{font-size:calc(var(--u)*44)}
body.social .in-tall .in-locktag{font-size:calc(var(--u)*50)}