/* SANOVA cinema layer — styles for the immersive public landing page.
 * Semua aturan hanya aktif saat WebGL berhasil dibuat (class .cinema-on / body.cinema-body).
 * Bila WebGL gagal, landing page tampil persis seperti sebelumnya. */

.cinema-canvas{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;display:block}
body.cinema-body{background:#05070d}
html[data-theme="light"] body.cinema-body{background:#f3f4fb}
html[data-theme] body.cinema-body main.public-main{position:relative;z-index:1;background:transparent!important;background-image:none!important}
html{scroll-behavior:smooth}

/* ---- make the landing sections transparent so the 3D scene shows through ---- */
.sanova-home.cinema-on,
html[data-theme="dark"] .sanova-home.cinema-on,
html[data-theme="light"] .sanova-home.cinema-on{background:transparent!important}
.cinema-on .sanova-landing-hero{background:none;border-bottom:0;min-height:100svh;padding-top:calc(clamp(60px,8vw,112px) + 44px)}
.cinema-on .landing-intro,
.cinema-on .landing-showcase-section{background:transparent}
.cinema-on .landing-manifesto,
html[data-theme="light"] .cinema-on .landing-manifesto{background:linear-gradient(180deg,transparent,#05061466 100%);border-top:0}
html[data-theme="light"] .cinema-on .landing-manifesto{background:linear-gradient(180deg,transparent,#ffffff55 100%)}
.cinema-on .landing-underline{background:#ffffff26}

/* legibility scrim behind hero copy (replaces the flat left→right fade) */
.cinema-on .landing-hero-atmosphere:before{background:linear-gradient(90deg,#05071080 0%,#05071040 38%,transparent 70%)}
html[data-theme="light"] .cinema-on .landing-hero-atmosphere:before{background:linear-gradient(90deg,#ffffff59 0%,#ffffff26 38%,transparent 70%)}

/* the 3D scene already provides depth, so retire the old CSS ornaments */
.cinema-on .landing-orbit,
.cinema-on .landing-grain,
.cinema-on .manifesto-orbit,
.cinema-on .manifesto-glow{display:none}

/* ---- glass pill navigation ---- */
body.cinema-body .app-header{position:fixed;top:14px;left:0;right:0;border:0;background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none;pointer-events:none;z-index:60}
body.cinema-body .app-header .header-inner{pointer-events:auto;width:min(1120px,calc(100% - 32px));min-height:56px;padding:0 10px 0 16px;border-radius:999px;border:1px solid #ffffff2b;background:#ffffff14;backdrop-filter:blur(22px) saturate(165%);-webkit-backdrop-filter:blur(22px) saturate(165%);box-shadow:0 18px 50px #02030f40,inset 0 1px 0 #ffffff26;animation:cin-nav-in .9s cubic-bezier(.2,.7,.2,1) both .2s}
html[data-theme="light"] body.cinema-body .app-header .header-inner{border-color:#ffffffb3;background:#ffffff73;box-shadow:0 18px 50px #4a3f8a24,inset 0 1px 0 #fff}
body.cinema-body .app-header .nav-cta{border-radius:999px}
body.cinema-body .app-header .nav-link{border-radius:999px}
@media(max-width:640px){body.cinema-body .app-header{top:8px}body.cinema-body .app-header .header-inner{width:calc(100% - 16px);padding:0 8px 0 12px;min-height:52px}}

/* ---- hero entrance: staggered rise with a soft blur-in ---- */
.cinema-on .landing-hero-copy>*{animation:cin-rise 1.1s cubic-bezier(.2,.7,.2,1) both}
.cinema-on .landing-hero-copy>.landing-kicker{animation-delay:.35s}
.cinema-on .landing-hero-copy>h1{animation-delay:.5s}
.cinema-on .landing-hero-copy>.landing-hero-lead{animation-delay:.75s}
.cinema-on .landing-hero-copy>.landing-hero-actions{animation-delay:.92s}
.cinema-on .landing-nebula-stage{animation-name:land-nebula-flight,cin-nebula-in;animation-duration:11s,1.6s;animation-iteration-count:infinite,1;animation-timing-function:ease-in-out,cubic-bezier(.2,.7,.2,1);animation-delay:0s,.6s;animation-fill-mode:none,backwards}
.cinema-on .landing-hero-foot,.cinema-on .landing-scroll-cue{animation:cin-fade 1.4s ease both 1.3s}
@keyframes cin-rise{from{opacity:0;transform:translate3d(0,34px,0);filter:blur(10px)}to{opacity:1;transform:none;filter:blur(0)}}
@keyframes cin-nebula-in{from{opacity:0;scale:.86;filter:blur(14px)}to{opacity:1;scale:1;filter:blur(0)}}
@keyframes cin-nav-in{from{opacity:0;transform:translate3d(0,-22px,0) scale(.97)}to{opacity:1;transform:none}}
@keyframes cin-fade{from{opacity:0}to{opacity:1}}

/* section reveals get the same blur-in feel */
.cinema-on .will-reveal{opacity:0;transform:translate3d(0,40px,0);filter:blur(8px);transition:opacity 1s ease,transform 1.1s cubic-bezier(.2,.7,.2,1),filter 1s ease}
.cinema-on .will-reveal.is-revealed{opacity:1;transform:none;filter:blur(0)}

/* headline polish: soft glow so type stays crisp over the moving scene */
.cinema-on .landing-hero-copy h1,.cinema-on .landing-intro-grid h2,.cinema-on .landing-showcase-heading h2,.cinema-on .landing-manifesto h2{text-shadow:0 4px 40px #05061455;will-change:transform}
html[data-theme="light"] .cinema-on .landing-hero-copy h1,html[data-theme="light"] .cinema-on .landing-intro-grid h2,html[data-theme="light"] .cinema-on .landing-showcase-heading h2,html[data-theme="light"] .cinema-on .landing-manifesto h2{text-shadow:none}
.cinema-on .landing-hero-copy h1 span,.cinema-on .landing-manifesto h2 span{text-shadow:none}

/* showcase cards → frosted glass */
.cinema-on .showcase-card{background:#ffffff0d!important;border-color:#ffffff29!important;backdrop-filter:blur(6px);box-shadow:0 18px 40px #02030f33!important}
html[data-theme="light"] .cinema-on .showcase-card{background:#ffffff59!important;border-color:#ffffffb3!important}
.cinema-on .landing-primary-action{border-radius:999px;box-shadow:0 0 0 1px #ffffff40 inset,0 10px 34px #6a77ff33}
.cinema-on .landing-secondary-action{color:var(--land-ink)!important;opacity:.78}
.cinema-on .landing-nebula-caption{background:#ffffff14;border-color:#ffffff30}

/* ---- chapter dots (right edge, desktop) ---- */
.cinema-chapters{position:fixed;right:clamp(14px,2vw,28px);top:50%;transform:translateY(-50%);z-index:55;display:flex;flex-direction:column;gap:14px;align-items:flex-end}
.cinema-chapters a{display:flex;align-items:center;gap:10px;text-decoration:none;color:#fff;font-size:9px;font-weight:750;letter-spacing:.18em;text-transform:uppercase}
.cinema-chapters i{width:7px;height:7px;border-radius:50%;background:#ffffff59;box-shadow:0 0 0 0 #ffffff00;transition:transform .4s cubic-bezier(.2,.7,.2,1),background .3s,box-shadow .3s}
.cinema-chapter-label{opacity:0;transform:translateX(6px);transition:opacity .3s,transform .3s;text-shadow:0 1px 12px #05061499}
.cinema-chapters a:hover .cinema-chapter-label,.cinema-chapters a.is-active .cinema-chapter-label{opacity:.9;transform:none}
.cinema-chapters a.is-active i{background:#fff;transform:scale(1.55);box-shadow:0 0 0 5px #ffffff22,0 0 18px #ffffffaa}
html[data-theme="light"] .cinema-chapters a{color:#1a1f3d}
html[data-theme="light"] .cinema-chapters i{background:#1a1f3d55}
html[data-theme="light"] .cinema-chapters a.is-active i{background:#1a1f3d;box-shadow:0 0 0 5px #1a1f3d1f}
@media(max-width:900px){.cinema-chapters{display:none}}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .cinema-on .landing-hero-copy>*,.cinema-on .landing-hero-foot,.cinema-on .landing-scroll-cue,body.cinema-body .app-header .header-inner{animation:none}
  .cinema-on .will-reveal{filter:none;transition-duration:.01ms}
}