/* ============================================================
   ארז ביטון — the entrance, v3
   loader → the sign powers on (logo clip) → the live WebGL sign →
   the camera flies through it onto the Caesarea stage → headline.
   Loaded after chapters.css: these rules win where they overlap.
   ============================================================ */

/* the loader: black, one line of progress, one button */
.loader__enter { display: grid; justify-items: center; gap: 1rem; }
.loader__btn { min-width: 15rem; padding-inline: 2.4rem; letter-spacing: .04em; font-size: 1.05rem; }

/* the world canvas (created by main.js when WebGL is available) */
html.has-webgl .world { display: none; }
html.has-webgl .intro { background: transparent; }

/* the entrance section */
.intro { position: relative; z-index: 3; height: 100vh; height: 100svh; background: #050304; }
.intro__pin { position: absolute; inset: 0; overflow: hidden; }

/* the stage clip (DOM fallback stage; in WebGL mode it only feeds the screen texture) */
.intro__media { position: absolute; inset: 0; z-index: 3; transform-origin: 50% 50%; will-change: transform, filter, opacity; opacity: 0; }
.intro__poster, .intro__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; }
.intro__video { opacity: 0; transition: opacity 1.2s var(--ease-soft); }
.intro.is-video-ready .intro__video { opacity: 1; }
.intro__shade { position: absolute; inset: 0; background: rgba(5,3,4,.15); pointer-events: none; } /* a 15% veil: tames the AI clip a little without touching its colours (client's call) */

/* the logo entrance layer: the power-on clip over its own final frame (identical image → seamless) */
.intro__logo { position: absolute; inset: 0; z-index: 4; background: #000; display: grid; place-items: center; will-change: opacity; }
.intro__logo-still, .intro__logo-clean, .intro__logo-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: 50% 50%; background: #000; }
.intro__logo-clean { opacity: 0; }  /* the same wall without the sign: slides in under the real letters so they lift off a clean wall */
/* the still (= the clip's final frame) always sits underneath; the clip plays on top and steps aside when it ends */
.intro__logo-still { opacity: 1; }
.intro__logo-video { opacity: 0; }
.intro__logo.is-playing .intro__logo-video { opacity: 1; }
.intro__logo.is-still .intro__logo-video { opacity: 0; }
.intro__logo.is-done { pointer-events: none; }
@media (min-aspect-ratio: 16/9) { .intro__logo-still, .intro__logo-clean, .intro__logo-video { object-fit: cover; } }

/* the DOM-fallback sign: the real letters cutout + the real handwritten tagline, floating over the wall */
/* the real letters + tagline, positioned by intro.js exactly over the clip's final frame (same pixels → invisible handoff) */
.intro__sign { position: absolute; inset: 0; z-index: 5; display: block; pointer-events: none; opacity: 0; will-change: transform, opacity; }
.intro__sign-letters, .intro__sign-tagline { position: absolute; height: auto; will-change: transform; }
.intro__logo { will-change: transform, opacity, filter; }
.intro.is-dom .intro__wall { position: absolute; inset: -4%; z-index: 1; background: url('../assets/images/logo-wall.jpg') center / cover no-repeat; filter: brightness(.55) saturate(.9); opacity: 0; transition: opacity 1.2s var(--ease-soft); }
.intro.is-dom.is-wall .intro__wall { opacity: 1; }
html.has-webgl .intro__wall { display: none; }

/* the headline block arrives after the flight; scroll moves it out (scenes.js) */
.intro__hero { position: absolute; inset: 0; z-index: 5; opacity: 0; display: grid; gap: clamp(1rem, 2vh, 1.6rem); justify-items: start; align-content: end; padding-bottom: clamp(7rem, 16vh, 11rem); pointer-events: none; }
.intro__hero .hero__title, .intro__hero .hero__lead, .intro__hero .hero__cta, .intro__hero .hero__kicker { pointer-events: auto; }
.intro__hero .hero__kicker, .intro__hero .hero__lead, .intro__hero .hero__cta { opacity: 0; }
.hero__title { max-width: 9ch; color: var(--ivory); text-shadow: var(--tshadow); }
.hero__lead { max-width: 44ch; text-shadow: var(--tshadow); }
.hero__cta { display: flex; flex-wrap: wrap; gap: .8rem; }

/* scroll cue */
.intro__cue { position: absolute; left: 50%; bottom: clamp(1.4rem, 4.5vh, 2.6rem); z-index: 6; transform: translateX(-50%); display: grid; justify-items: center; gap: .6rem; opacity: 0; font-size: var(--fs-label); letter-spacing: .28em; color: var(--text-2); pointer-events: none; }
.intro__cue-line { width: 1px; height: 44px; background: rgba(251,243,247,.18); overflow: hidden; position: relative; }
.intro__cue-line i { position: absolute; inset-inline: 0; top: -100%; height: 100%; background: linear-gradient(180deg, transparent, var(--pink)); animation: cueline 2.2s var(--ease-in-out) infinite; }
@keyframes cueline { 0% { top: -100%; } 60%, 100% { top: 100%; } }

/* the real handwritten tagline wherever the brand repeats (menu, contact, footer) */
.tagline-img { display: block; height: clamp(1.6rem, 2.6vw, 2.3rem); width: auto; opacity: .9; filter: drop-shadow(0 2px 10px rgba(0,0,0,.5)); }
.menu__tag .tagline-img { height: clamp(1.8rem, 3vw, 2.6rem); }
.footer__tag .tagline-img { height: 1.7rem; }

/* brand marks: the letters cutout, never the old rectangle */
.nav__brand img, .footer__brand img, .contact__brand img { filter: drop-shadow(0 0 14px rgba(255,143,187,.25)); }

/* mobile */
@media (max-width: 720px) {
  .intro__hero { align-content: end; padding-bottom: clamp(6rem, 14vh, 8rem); }
}

/* reduced motion: everything visible, nothing moves */
@media (prefers-reduced-motion: reduce) {
  .intro__hero .hero__kicker, .intro__hero .hero__lead, .intro__hero .hero__cta, .intro__cue, .intro__sign { opacity: 1; }
  .intro__cue-line i { animation: none; top: 0; }
}

/* the moments carry real event footage (16:9): give the tiles a landscape frame on desktop */
@media (min-width: 801px) { .moments__media { aspect-ratio: 16 / 10; } }
/* the letters are an alpha cutout now: no blend tricks needed (screen would wash them out over bright video) */
.nav__brand img, .footer__brand img, .contact__brand img { mix-blend-mode: normal; }

/* ---- the loader (ported from the v1 opening sheet; black, one line of progress, one centered button) ---- */
.loader { position: fixed; inset: 0; z-index: var(--z-loader); display: grid; place-items: center; background: #030203; opacity: 1; transition: opacity .7s var(--ease-in-out); }
.loader.is-leaving { opacity: 0; pointer-events: none; }
.loader__inner { display: grid; justify-items: center; gap: 1.4rem; width: min(80vw, 360px); }
.loader__mark { display: flex; gap: .55rem; }
.loader__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--magenta); opacity: .25; box-shadow: 0 0 12px rgba(214,74,124,.6); animation: bulb 2.4s var(--ease-in-out) infinite; }
.loader__dot:nth-child(2) { animation-delay: .35s; } .loader__dot:nth-child(3) { animation-delay: .7s; }
@keyframes bulb { 0%, 100% { opacity: .2; transform: scale(.9); } 40% { opacity: 1; transform: scale(1.15); } }
.loader__bar { width: 100%; height: 1px; background: rgba(251,243,247,.12); overflow: hidden; }
.loader__bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--magenta-hi), var(--pink)); transform-origin: right center; transform: scaleX(var(--p, 0)); transition: transform .25s linear; }
.loader__pct { font-family: var(--font-kinetic); font-size: 1.1rem; letter-spacing: .15em; color: var(--text-3); }
.loader__enter { display: grid; justify-items: center; gap: 1rem; opacity: 0; transform: translateY(10px); transition: opacity .9s var(--ease-out), transform .9s var(--ease-out); }
.loader.is-ready .loader__enter { opacity: 1; transform: none; }
.loader.is-ready .loader__pct, .loader.is-ready .loader__bar { opacity: 0; transition: opacity .5s; }
.loader.is-ready .loader__inner { gap: .6rem; }
@media (prefers-reduced-motion: reduce) { .loader__dot { animation: none; } }

/* portrait phones: the 16:9 power-on clip is scaled up so the sign fills the width (its edges are black anyway) */
@media (max-aspect-ratio: 4/5) {
  .intro__logo-still, .intro__logo-clean, .intro__logo-video { inset: auto; left: 50%; top: 50%; width: 175vw; height: auto; aspect-ratio: 16 / 9; transform: translate(-50%, -50%); object-fit: cover; }
}

/* ---- white type with a black frame (the client's call: pure white, no beige, readable over any footage) ---- */
.hero__title, .chapter__line, .quote__text, .contact__title, .music__title, .gallery__title { color: #fff; -webkit-text-stroke: 0.6px rgba(0,0,0,.55); paint-order: stroke fill; text-shadow: var(--outline); }
.hero__kicker, .chapter__kicker, .kicker { color: #fff; font-weight: 600; text-shadow: var(--outline); }
.hero__kicker .hero__sep { color: var(--pink); }
.hero__lead, .chapter__sub, .lead { color: #fff; font-weight: 400; text-shadow: var(--outline); }
.intro__hero .hero__lead { font-size: clamp(1.15rem, 1.5vw, 1.4rem); max-width: 40ch; }
.chapter__sub { font-size: clamp(1.1rem, 1.5vw, 1.35rem); }

/* the shift words stay pink: a lit gradient with the same black frame */
.shift__word--a { color: #fff; text-shadow: var(--outline); -webkit-text-stroke: 0.6px rgba(0,0,0,.55); }  /* "מהבמה" in white */
.shift__word--b { color: var(--pink); background: linear-gradient(180deg, #ffd1e4 0%, var(--pink) 45%, var(--magenta) 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; filter: drop-shadow(0 2px 2px rgba(0,0,0,.9)) drop-shadow(0 8px 26px rgba(0,0,0,.6)) drop-shadow(0 0 28px rgba(255,143,187,.35)); text-shadow: none; -webkit-text-stroke: 0; }  /* "לרחבה" in pink */

/* ---- quick call: a small pill at the bottom-start, after the stage opens ---- */
.quick-call { position: fixed; inset-inline-start: clamp(.8rem, 2vw, 1.4rem); bottom: clamp(.8rem, 2vh, 1.2rem); z-index: var(--z-nav); display: flex; align-items: center; gap: .4rem; opacity: 0; transform: translateY(14px); pointer-events: none; transition: opacity .7s var(--ease-out), transform .7s var(--ease-out); }
body.is-live .quick-call { opacity: 1; transform: none; pointer-events: auto; }
.quick-call__btn { display: inline-flex; align-items: center; gap: .55rem; height: 2.7rem; padding: 0 1rem; border-radius: 999px; border: 1px solid rgba(255,143,187,.5); background: rgba(10,4,7,.72); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); color: #fff; font-weight: 600; font-size: .95rem; letter-spacing: .02em; box-shadow: 0 10px 30px rgba(0,0,0,.45), 0 0 18px rgba(255,143,187,.12); transition: border-color .3s, box-shadow .3s, transform .3s var(--ease-out); }
.quick-call__btn svg { width: 1.1rem; height: 1.1rem; fill: none; stroke: var(--pink); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.quick-call__btn:hover, .quick-call__btn:focus-visible { border-color: var(--pink); box-shadow: 0 10px 30px rgba(0,0,0,.5), 0 0 26px rgba(255,143,187,.35); transform: translateY(-1px); }
.quick-call__btn--wa { width: 2.7rem; padding: 0; justify-content: center; }
.btn--tel .btn__ico { stroke: var(--pink); }
@media (max-width: 720px) { .quick-call__num { font-size: .9rem; } }
html.is-lightbox .quick-call { opacity: 0; pointer-events: none; }
/* the second copy of the stage clip used by the crossfade loop sits exactly over the first */
.intro__video--b { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; pointer-events: none; }