/* =====================================================================
   CINEMATIC LOGO REVEAL  —  plays when the main event logo is clicked
   Timeline (seconds after click):
   0.00  screen cuts to black, letterbox bars slam shut
   0.25  a spark ignites at centre and stretches into an anamorphic streak
   0.95  IMPACT: flash + shockwave + sparks, logo is "wiped" in from the centre
   1.00  volumetric spotlights swing on, background glow breathes in
   2.70  a lens-flare glints across the wordmark
   2.6+  tagline, rule line, subtitle arrive; camera keeps slowly pushing in
   ===================================================================== */

.cine{
  --bar:12vh;
  --ease:cubic-bezier(.16,1,.3,1);
  --gold:#e0c68c;
  position:fixed;inset:0;z-index:20000;overflow:hidden;isolation:isolate;contain:strict;
  background:#000;color:#f3ecdc;
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .5s ease,visibility 0s linear .5s;
  font-family:'DM Sans',system-ui,sans-serif;
  -webkit-tap-highlight-color:transparent;
}
.cine.is-active{opacity:1;visibility:visible;pointer-events:auto;transition:opacity .3s ease,visibility 0s}
.cine.is-active.is-closing{opacity:0;pointer-events:none;transition:opacity .5s ease}

.cine-bg,.cine-leak,.cine-vignette,.cine-flash,.cine-fx{position:absolute;inset:0;pointer-events:none}
.cine-grain{position:absolute;inset:-12%;pointer-events:none}
.cine-fx{width:100%;height:100%}
.cine-fx-back{z-index:1}
.cine-fx-front{z-index:5}

/* ---------- while the reveal is open, nothing behind it paints ---------- */
html.cine-open body>*:not(.cine){visibility:hidden!important}
html.cine-open body::before,html.cine-open body::after{display:none!important}

/* ---------- backdrop ---------- */
.cine-bg{
  z-index:0;opacity:0;
  background:
    radial-gradient(ellipse 80% 60% at 50% 52%,rgba(22,58,96,.75) 0%,rgba(8,20,38,.9) 42%,transparent 78%),
    radial-gradient(ellipse 60% 40% at 50% 100%,rgba(120,26,44,.28),transparent 70%),
    #010204;
}
.cine.is-active .cine-bg{animation:cineFade 2.6s .9s ease forwards}

.cine-leak{z-index:2;opacity:0;
  background:
    radial-gradient(40% 30% at 12% 20%,rgba(232,170,80,.22),transparent 70%),
    radial-gradient(35% 28% at 90% 78%,rgba(70,140,230,.18),transparent 70%);
}
.cine.is-active .cine-leak{animation:cineFade 2s 1.4s ease forwards}

/* ---------- camera / stage ---------- */
.cine-stage{
  position:absolute;inset:0;z-index:3;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:clamp(10px,2.2vh,22px);
  padding:calc(var(--bar) + 10px) 16px;
  transform-origin:50% 48%;will-change:transform;
  text-align:center;
}
.cine-glow{
  position:absolute;left:50%;top:50%;width:min(150vw,1500px);aspect-ratio:2/1;
  translate:-50% -50%;pointer-events:none;opacity:0;
  background:radial-gradient(closest-side,rgba(226,184,104,.30),rgba(76,138,214,.14) 48%,transparent 74%);
  will-change:opacity;
}
.cine.is-active .cine-glow{animation:cineFade 2.2s 1s ease forwards}

.cine-kicker{
  position:relative;margin:0;font-size:clamp(.5rem,1.1vw,.72rem);font-weight:500;
  letter-spacing:.62em;color:#d7c8a7;opacity:0;text-indent:.62em;
}
.cine.is-active .cine-kicker{animation:cineKicker 1.8s .7s var(--ease) forwards}
@keyframes cineKicker{to{opacity:1;letter-spacing:.3em;text-indent:.3em}}

/* ---------- the logo ---------- */
.cine-logo-wrap{position:relative;width:min(88vw,860px);aspect-ratio:2048/682}
.cine-logo{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;user-select:none;-webkit-user-drag:none;pointer-events:none}

.cine-logo-main{opacity:0;clip-path:inset(0 50% 0 50%);transform:scale(1.14);will-change:clip-path,transform,opacity}
.cine.is-active .cine-logo-main{animation:cineLogoIn 2.2s .95s var(--ease) forwards}
@keyframes cineLogoIn{
  0%{opacity:0;clip-path:inset(0 50% 0 50%);transform:scale(1.14)}
  10%{opacity:1}
  100%{opacity:1;clip-path:inset(0 0 0 0);transform:scale(1)}
}

/* chromatic-aberration ghosts: pre-tinted copies that snap together (intro only) */
.cine-logo-ghost{opacity:0;clip-path:inset(0 50% 0 50%)}
.cine.is-active .cine-ghost-r{animation:cineGhostR 2.2s .95s var(--ease) forwards}
.cine.is-active .cine-ghost-b{animation:cineGhostB 2.2s .95s var(--ease) forwards}
@keyframes cineGhostR{0%{opacity:0;clip-path:inset(0 50% 0 50%);transform:translateX(-22px) scale(1.14)}12%{opacity:.6}100%{opacity:0;clip-path:inset(0 0 0 0);transform:translateX(0) scale(1)}}
@keyframes cineGhostB{0%{opacity:0;clip-path:inset(0 50% 0 50%);transform:translateX(22px) scale(1.14)}12%{opacity:.6}100%{opacity:0;clip-path:inset(0 0 0 0);transform:translateX(0) scale(1)}}

/* two light "blades" that ride the edges of the wipe */
.cine-edge{position:absolute;top:-8%;bottom:-8%;left:0;width:100%;opacity:0;pointer-events:none;will-change:transform,opacity}
.cine-edge::after{content:"";position:absolute;top:0;bottom:0;width:2px;
  background:linear-gradient(180deg,transparent,rgba(255,244,214,.95) 30%,#fff 50%,rgba(255,244,214,.95) 70%,transparent);
  box-shadow:0 0 12px 2px rgba(240,200,120,.7)}
.cine-edge-l::after{left:0}
.cine-edge-r::after{right:0}
.cine.is-active .cine-edge-l{animation:cineEdgeL 2.2s .95s var(--ease) forwards,cineEdgeFade 2.2s .95s linear forwards}
.cine.is-active .cine-edge-r{animation:cineEdgeR 2.2s .95s var(--ease) forwards,cineEdgeFade 2.2s .95s linear forwards}
@keyframes cineEdgeL{from{transform:translateX(50%)}to{transform:translateX(0)}}
@keyframes cineEdgeR{from{transform:translateX(-50%)}to{transform:translateX(0)}}
@keyframes cineEdgeFade{0%{opacity:0}6%{opacity:1}70%{opacity:1}100%{opacity:0}}

/* ---------- supporting text ---------- */
.cine-sinhala{
  margin:0;font-family:"Noto Serif Sinhala","Iskoola Pota",serif;font-weight:500;
  font-size:clamp(1.05rem,2.1vw,1.6rem);line-height:1.8;letter-spacing:.045em;color:#e6cd94;
  text-shadow:0 2px 18px rgba(0,0,0,.5),0 0 30px rgba(224,190,120,.28);
  opacity:0;transform:translateY(14px);
}
.cine.is-active .cine-sinhala{animation:cineUp 1.1s 2.6s var(--ease) forwards}

.cine-rule{display:block;width:0;height:1px;background:linear-gradient(90deg,transparent,#e0c68c,transparent);box-shadow:0 0 12px rgba(224,190,120,.7)}
.cine.is-active .cine-rule{animation:cineRule 1.3s 3.0s var(--ease) forwards}
@keyframes cineRule{to{width:min(260px,52vw)}}

.cine-coming{
  margin:0;color:#d9b66f;font-weight:600;font-size:clamp(.55rem,1.15vw,.78rem);
  letter-spacing:.7em;text-indent:.7em;opacity:0;
}
.cine.is-active .cine-coming{animation:cineComing 1.6s 3.2s var(--ease) forwards}
@keyframes cineComing{to{opacity:1;letter-spacing:.26em;text-indent:.26em}}

.cine-sub{
  margin:0;color:rgba(237,232,221,.74);font-size:clamp(.8rem,1.5vw,1rem);letter-spacing:.06em;
  font-family:'Playfair Display',Georgia,serif;font-style:italic;
  opacity:0;transform:translateY(10px)
}
.cine.is-active .cine-sub{animation:cineUp 1.1s 3.8s var(--ease) forwards}
@keyframes cineUp{to{opacity:1;transform:translateY(0)}}

/* ---------- screen-space FX ---------- */
.cine-flash{
  z-index:6;opacity:0;
  background:radial-gradient(ellipse 70% 50% at 50% 48%,rgba(255,246,222,.95),rgba(255,214,140,.4) 38%,transparent 72%);
}
.cine.is-active .cine-flash{animation:cineFlash 1.1s .93s ease-out forwards}
@keyframes cineFlash{0%{opacity:0}8%{opacity:.85}100%{opacity:0}}

.cine-vignette{z-index:7;background:radial-gradient(ellipse at 50% 50%,transparent 45%,rgba(0,0,0,.55) 82%,rgba(0,0,0,.9) 100%)}
.cine[data-q="1"] .cine-grain,.cine[data-q="0"] .cine-grain,.cine[data-q="1"] .cine-leak,.cine[data-q="0"] .cine-leak{display:none}
.cine-grain{
  z-index:7;opacity:.07;will-change:transform;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:200px 200px;
}
.cine.is-active .cine-grain{animation:cineGrain .7s steps(6) infinite}
@keyframes cineGrain{
  0%{transform:translate(0,0)}17%{transform:translate(-9%,6%)}33%{transform:translate(7%,-11%)}
  50%{transform:translate(-5%,-4%)}67%{transform:translate(11%,8%)}83%{transform:translate(-8%,10%)}100%{transform:translate(0,0)}
}

/* ---------- letterbox: black curtains retract into cinema bars ---------- */
.cine-bar{position:absolute;left:0;right:0;z-index:8;height:50.5vh;background:#000;pointer-events:none}
.cine-bar-top{top:0;transform:translateY(0)}
.cine-bar-bottom{bottom:0;transform:translateY(0)}
.cine.is-active .cine-bar-top{animation:cineBarTop 1.5s .25s var(--ease) forwards}
.cine.is-active .cine-bar-bottom{animation:cineBarBottom 1.5s .25s var(--ease) forwards}
@keyframes cineBarTop{to{transform:translateY(calc(var(--bar) - 50.5vh))}}
@keyframes cineBarBottom{to{transform:translateY(calc(50.5vh - var(--bar)))}}

/* ---------- controls ---------- */
.cine-btn{
  position:absolute;z-index:20;top:max(14px,calc(var(--bar) / 2 - 22px));width:44px;height:44px;border-radius:50%;
  border:1px solid rgba(235,220,185,.38);background:rgba(4,8,15,.82);color:#f3ecdc;cursor:pointer;
  display:grid;place-items:center;padding:0;opacity:0;
  transition:background .25s,border-color .25s,transform .25s;
}
.cine-btn:hover,.cine-btn:focus-visible{background:rgba(193,157,87,.22);border-color:#c8a765;outline:none;transform:scale(1.06)}
.cine-close{right:clamp(14px,3vw,40px);font-size:28px;line-height:1}
.cine-sound{right:calc(clamp(14px,3vw,40px) + 56px)}
.cine-sound svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.cine-sound .wave{opacity:1}
.cine-sound[aria-pressed="false"] .wave{opacity:0}
.cine-sound[aria-pressed="false"] .mute-x{opacity:1}
.cine-sound .mute-x{opacity:0}
.cine.is-active .cine-btn{animation:cineFade .6s 1.2s ease forwards}

.cine-hint{
  position:absolute;z-index:20;bottom:max(10px,calc(var(--bar) / 2 - 8px));left:0;right:0;text-align:center;
  font-size:.52rem;letter-spacing:.24em;color:rgba(228,224,214,.42);opacity:0;pointer-events:none;
}
.cine.is-active .cine-hint{animation:cineFade .8s 4.6s ease forwards}

@keyframes cineFade{to{opacity:1}}

/* ---------- small screens ---------- */
@media(max-width:640px){
  .cine{--bar:9vh}
  .cine-logo-wrap{width:94vw}
  .cine-kicker{letter-spacing:.4em}
  @keyframes cineKicker{to{opacity:1;letter-spacing:.2em;text-indent:.2em}}
  .cine-hint{font-size:.46rem;letter-spacing:.16em}
}
@media(max-height:480px){.cine-sub{display:none}.cine-stage{gap:8px}.cine-logo-wrap{width:min(60vw,460px)}}

/* ---------- reduced motion: just a calm fade to the final frame ---------- */
@media(prefers-reduced-motion:reduce){
  .cine *,.cine *::before{animation:none!important;transition:none!important}
  .cine .cine-bg,.cine .cine-glow,.cine .cine-kicker,.cine .cine-sinhala,.cine .cine-coming,.cine .cine-sub,.cine .cine-btn,.cine .cine-hint{opacity:1;transform:none;filter:none}
  .cine .cine-kicker{letter-spacing:.3em}.cine .cine-coming{letter-spacing:.26em}
  .cine .cine-rule{width:min(260px,52vw)}
  .cine .cine-logo-main{opacity:1;clip-path:none;transform:none;}
  .cine .cine-bar-top{transform:translateY(calc(var(--bar) - 50.5vh))}
  .cine .cine-bar-bottom{transform:translateY(calc(50.5vh - var(--bar)))}
  .cine .cine-grain,.cine .cine-flash,.cine .cine-leak{display:none}
}