/* Elevate · opening film (js/intro.js).
   1. Loading screen: a small showcase site builds itself block by block while the percentage
      climbs (it follows the real loading of the film).
   2. A cursor clicks the small site open: its page grows into the film's blank page.
   3. The presentation film plays; at its end card it evaporates into the home page.
   Shown only when the head script of index.html sets html.intro-on (first arrival of the visit). */

.ev-intro { display: none; }
.intro-on, .intro-on body { overflow: hidden !important; }

.intro-on .ev-intro {
    display: block; position: fixed; inset: 0; z-index: 9990;   /* under the reticle cursor (9997+) */
    background: #05060b; color: #ffffff; overflow: hidden;
    font-family: 'Space Grotesk', 'Space Grotesk Fallback', sans-serif;
    --g: linear-gradient(110deg, #9cc0ff, #8a63ff 52%, #e05bd6);
}
.ev-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

/* The home page opening waits for the end of the film, then rises as the vapour clears. */
.intro-on:not(.intro-reveal) #slide-1.is-first .hero-kicker,
.intro-on:not(.intro-reveal) #slide-1.is-first .hero-actions,
.intro-on:not(.intro-reveal) #slide-1.is-first .hero-proof { animation-play-state: paused; }
.intro-played #slide-1.is-first .line-inner,
.intro-played #slide-1.is-first .slide-desc { animation: hero-rise 1.1s cubic-bezier(0.16, 1, 0.3, 1) both; }
.intro-played #slide-1.is-first .line + .line .line-inner { animation-delay: 0.12s; }
.intro-played #slide-1.is-first .slide-desc { animation-delay: 0.26s; }
.intro-played #slide-1.is-first .hero-actions { animation-delay: 0.4s; }
.intro-played #slide-1.is-first .hero-proof { animation-delay: 0.55s; }

/* ---- 1. Loading screen ---- */
.ev-load { position: absolute; inset: 0; display: grid; place-items: center; }
.ev-load-dots {
    position: absolute; inset: -56px;
    background-image: radial-gradient(rgba(156, 192, 255, 0.17) 1px, transparent 1.5px);
    background-size: 28px 28px;
    -webkit-mask: radial-gradient(ellipse 62% 58% at 50% 50%, #000 25%, transparent 78%);
    mask: radial-gradient(ellipse 62% 58% at 50% 50%, #000 25%, transparent 78%);
    animation: ev-drift 9s linear infinite;
    transition: opacity 0.5s ease;
}
@keyframes ev-drift { to { transform: translate3d(28px, -28px, 0); } }
.ev-load-glow {
    position: absolute; left: 50%; top: 46%; width: 78vmin; height: 78vmin; border-radius: 50%;
    background: radial-gradient(closest-side, rgba(138, 99, 255, 0.34), rgba(224, 91, 214, 0.12) 55%, transparent);
    transform: translate(-50%, -50%) scale(calc(0.72 + var(--p, 0) * 0.0035));
    opacity: calc(0.35 + var(--p, 0) * 0.0065);
    transition: opacity 0.5s ease;
}

.ev-load-stack {
    --mw: max(230px, min(460px, 84vw, calc((100vh - 240px) * 1.52)));
    position: relative; width: var(--mw);
    display: grid; justify-items: center; gap: 22px;
}
.ev-load-brand, .ev-load-meta, .ev-load-track { transition: opacity 0.35s ease, transform 0.35s ease; }
.ev-load-brand { display: flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 500; letter-spacing: 0.02em; color: rgba(255, 255, 255, 0.92); }
.ev-load-brand svg { width: 27px; height: 19px; display: block; }

/* the small showcase site */
.ev-mini {
    position: relative; width: 100%; aspect-ratio: 16 / 10.5;
    font-size: calc(var(--mw) / 46);                      /* every inner size in em: scales as one */
    display: flex; flex-direction: column; overflow: hidden;
    border-radius: 14px; background: #0b0d18; border: 1px solid rgba(255, 255, 255, 0.09);
    box-shadow: 0 34px 80px -24px rgba(0, 0, 0, 0.85), 0 20px 70px -34px rgba(138, 99, 255, 0.7);
    transform-origin: 50% 50%; will-change: transform;
    transition: background-color 0.55s ease 0.1s, border-color 0.4s ease, box-shadow 0.4s ease, border-radius 0.6s ease;
}
.ev-mini-bar {
    flex: 0 0 2.8em; display: flex; align-items: center; gap: 0.6em; padding: 0 1.1em;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06); background: rgba(255, 255, 255, 0.025);
}
.ev-mini-bar i { width: 0.7em; height: 0.7em; border-radius: 50%; background: rgba(255, 255, 255, 0.17); }
.ev-mini-url {
    margin: 0 auto; transform: translateX(-1.3em); display: flex; align-items: center; gap: 0.5em;
    height: 1.7em; padding: 0 1em; border-radius: 0.85em; background: rgba(255, 255, 255, 0.06);
    font-size: 0.95em; color: rgba(255, 255, 255, 0.58); letter-spacing: 0.02em; white-space: nowrap;
}
.ev-mini-url svg { width: 0.75em; height: 0.9em; }
.ev-mini-page {
    position: relative; flex: 1; overflow: hidden;
    display: flex; flex-direction: column; gap: 2.1em; padding: 2.2em 2.6em 0;
    transition: background-color 0.55s ease 0.1s;
}

/* each block: hidden, then drawn as a dashed sketch, then built (filled) */
.ev-b {
    position: relative; display: block; border-radius: 0.35em;
    opacity: 0; transform: translateY(0.5em) scale(0.96);
    transition: opacity 0.3s ease, transform 0.5s cubic-bezier(0.2, 0.9, 0.25, 1.15), box-shadow 0.45s ease;
}
.ev-b::before, .ev-b::after { content: ""; position: absolute; inset: 0; border-radius: inherit; transition: opacity 0.45s ease; }
.ev-b::before { background: var(--fill, rgba(255, 255, 255, 0.3)); opacity: 0; }
.ev-b::after { border: 1px dashed rgba(156, 192, 255, 0.75); opacity: 0; }
.ev-b > * { position: relative; z-index: 1; opacity: 0; transition: opacity 0.45s ease; }
.ev-b.is-sketch { opacity: 1; transform: none; }
.ev-b.is-sketch::after { opacity: 1; }
.ev-b.is-built::before, .ev-b.is-built > * { opacity: 1; }
.ev-b.is-built::after { opacity: 0; }

.ev-m-nav { display: flex; align-items: center; gap: 0.9em; height: 1.5em; flex: 0 0 auto; }
.ev-m-gap { flex: 1; }
.ev-m-logo { width: 1.9em; height: 1.32em; --fill: transparent; }
.ev-m-logo svg { display: block; width: 100%; height: 100%; }
.ev-m-name { width: 4.2em; height: 0.6em; --fill: rgba(255, 255, 255, 0.85); }
.ev-m-link { width: 2.4em; height: 0.45em; --fill: rgba(255, 255, 255, 0.34); }
.ev-m-cta { width: 5em; height: 1.5em; border-radius: 0.75em; margin-left: 0.4em; --fill: var(--g); }

.ev-m-hero { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 2.2em; align-items: center; flex: 0 0 auto; }
.ev-m-copy { display: flex; flex-direction: column; gap: 0.75em; }
.ev-m-kick { width: 6.5em; height: 0.5em; --fill: rgba(156, 192, 255, 0.85); }
.ev-m-t1 { width: 100%; height: 1.45em; --fill: rgba(255, 255, 255, 0.93); }
.ev-m-t2 { width: 80%; height: 1.45em; --fill: rgba(255, 255, 255, 0.42); }
.ev-m-p { width: 96%; height: 0.42em; --fill: rgba(255, 255, 255, 0.2); }
.ev-m-p2 { width: 72%; }
.ev-m-btns { display: flex; gap: 0.7em; margin-top: 0.5em; }
.ev-m-btn1 { width: 6.8em; height: 2em; border-radius: 1em; --fill: var(--g); }
.ev-m-btn1.is-built { box-shadow: 0 0.5em 1.6em -0.5em rgba(138, 99, 255, 0.9); }
.ev-m-btn2 { width: 6em; height: 2em; border-radius: 1em; --fill: transparent; }
.ev-m-btn2.is-built { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.34); }
.ev-m-visual {
    aspect-ratio: 1.35 / 1; border-radius: 1em; display: grid; place-items: center;
    --fill: radial-gradient(120% 90% at 18% 8%, rgba(255, 255, 255, 0.38), transparent 52%), linear-gradient(140deg, #9cc0ff, #8a63ff 55%, #e05bd6);
}
.ev-m-visual.is-built { box-shadow: 0 1.2em 3em -1.2em rgba(138, 99, 255, 0.85); }
.ev-m-visual svg { width: 50%; height: auto; display: block; fill: rgba(255, 255, 255, 0.94); filter: drop-shadow(0 0.4em 0.6em rgba(40, 20, 90, 0.35)); }
.ev-m-visual.is-built svg { animation: ev-float 2.6s ease-in-out infinite alternate; }
@keyframes ev-float { from { transform: translateY(-0.25em) rotate(-2deg); } to { transform: translateY(0.25em) rotate(2deg); } }

.ev-m-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2em; flex: 0 0 auto; }
.ev-m-card {
    height: 6em; border-radius: 0.8em; --thumb: linear-gradient(140deg, rgba(156, 192, 255, 0.6), rgba(138, 99, 255, 0.6));
    --fill: var(--thumb) top / 100% 56% no-repeat,
        linear-gradient(rgba(255, 255, 255, 0.75), rgba(255, 255, 255, 0.75)) 0.9em 4.05em / 55% 0.42em no-repeat,
        linear-gradient(rgba(255, 255, 255, 0.24), rgba(255, 255, 255, 0.24)) 0.9em 4.85em / 35% 0.36em no-repeat,
        rgba(255, 255, 255, 0.05);
}
.ev-m-card:nth-child(2) { --thumb: linear-gradient(140deg, rgba(138, 99, 255, 0.65), rgba(224, 91, 214, 0.6)); }
.ev-m-card:nth-child(3) { --thumb: linear-gradient(140deg, rgba(224, 91, 214, 0.6), rgba(156, 192, 255, 0.55)); }

/* the scan line: its height is the percentage */
.ev-mini-scan { position: absolute; inset: 0; pointer-events: none; transform: translateY(calc(var(--p, 0) * 1%)); transition: opacity 0.4s ease; }
.ev-mini-scan::before {
    content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 2px; background: var(--g);
    box-shadow: 0 0 14px 1px rgba(138, 99, 255, 0.75);
}
.ev-mini-scan::after { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 4em; background: linear-gradient(to top, rgba(138, 99, 255, 0.13), transparent); }
.is-done .ev-mini-scan { opacity: 0; }

/* the cursor that clicks the small site open */
.ev-mini-cursor { position: absolute; left: 0; top: 0; z-index: 3; width: 1.7em; height: 1.7em; opacity: 0; pointer-events: none; filter: drop-shadow(0 0.15em 0.3em rgba(0, 0, 0, 0.55)); }
.ev-mini-cursor svg { display: block; width: 100%; height: 100%; }
.ev-mini-ripple {
    position: absolute; left: 0; top: 0; z-index: 2; width: 9em; height: 9em; border-radius: 50%; opacity: 0; pointer-events: none;
    border: 1px solid rgba(255, 255, 255, 0.85); box-shadow: 0 0 1.4em rgba(156, 192, 255, 0.6), inset 0 0 1.4em rgba(224, 91, 214, 0.35);
}

.ev-load-meta { width: 100%; display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; }
.ev-load-label { margin: 0; padding-bottom: 0.55em; font-size: 13px; letter-spacing: 0.04em; color: rgba(255, 255, 255, 0.58); white-space: nowrap; }
.ev-load-label b { font-weight: 500; color: #ffffff; }
.ev-load-pct {
    margin: 0; font-size: clamp(46px, 7vw, 74px); font-weight: 300; line-height: 0.88; letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums; white-space: nowrap;
    background: linear-gradient(110deg, #ffffff 15%, #9cc0ff 48%, #8a63ff 76%, #e05bd6);
    -webkit-background-clip: text; background-clip: text; color: transparent;
}
.ev-load-pct small { font-size: 0.4em; margin-left: 0.14em; vertical-align: 0.95em; }
.ev-load-track { width: 100%; height: 2px; border-radius: 2px; overflow: hidden; background: rgba(255, 255, 255, 0.08); }
.ev-load-track span {
    display: block; height: 100%; transform-origin: 0 50%; transform: scaleX(calc(var(--p, 0) / 100));
    background: linear-gradient(90deg, #9cc0ff, #8a63ff 55%, #e05bd6); box-shadow: 0 0 10px rgba(138, 99, 255, 0.85);
}

/* ---- 2. The small site opens into the film's blank page ---- */
.is-zoom .ev-load-brand, .is-zoom .ev-load-meta, .is-zoom .ev-load-track { opacity: 0; transform: translateY(10px); }
.is-zoom .ev-load-dots, .is-zoom .ev-load-glow { opacity: 0; }
.is-zoom .ev-mini { background-color: #efede9; border-color: transparent; box-shadow: none; border-radius: 0; }
.is-zoom .ev-mini-page { background-color: #efede9; }
.is-zoom .ev-mini-page > * { opacity: 0 !important; transition: opacity 0.3s ease; }
/* full-screen copy of the film's first image, laid out like the video: the hand-over is invisible */
.ev-paper { position: absolute; inset: 0; opacity: 0; pointer-events: none; background: #efede9 url(../assets/film/elevate-film-poster.webp) center / contain no-repeat; }

/* ---- 3. The film ---- */
.ev-film { position: absolute; inset: 0; opacity: 0; background: #efede9; transition: opacity 0.25s ease; }
.ev-film.is-night { background: #05060b; }
/* always whole: the end card's text runs close to the frame's edges; the bands take the film's colour */
.ev-film video { display: block; width: 100%; height: 100%; object-fit: contain; }
.is-film .ev-film { opacity: 1; }
.is-film .ev-load, .is-film .ev-paper { visibility: hidden; transition: visibility 0s linear 0.3s; }
.ev-time { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; z-index: 4; background: rgba(255, 255, 255, 0.1); opacity: 0; transition: opacity 0.4s ease; }
.ev-time span { display: block; height: 100%; transform-origin: 0 50%; transform: scaleX(0); background: linear-gradient(90deg, #9cc0ff, #8a63ff 55%, #e05bd6); }
.is-film.ui-on .ev-time { opacity: 1; }

/* buttons: skip (loading and film), sound (film) */
.ev-ui {
    position: absolute; z-index: 5; display: flex; gap: 10px;
    right: max(22px, env(safe-area-inset-right)); bottom: max(22px, env(safe-area-inset-bottom));
    opacity: 0; transform: translateY(8px); pointer-events: none; transition: opacity 0.4s ease, transform 0.4s ease;
}
.ui-on .ev-ui { opacity: 1; transform: none; pointer-events: auto; }
.ev-ui-btn {
    display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 16px; border-radius: 19px;
    border: 1px solid rgba(255, 255, 255, 0.16); background: rgba(8, 10, 20, 0.56);
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
    color: #ffffff; font: 500 13px/1 'Space Grotesk', 'Space Grotesk Fallback', sans-serif; letter-spacing: 0.02em;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}
.ev-ui-btn[hidden] { display: none; }
.ev-ui-btn:hover { background-color: rgba(22, 24, 44, 0.78); border-color: rgba(156, 192, 255, 0.55); }
.ev-ui-btn:focus-visible { outline: 1px solid #ffffff; outline-offset: 3px; }
.ev-ui-btn svg { width: 16px; height: 16px; flex: 0 0 16px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.ev-ui-sound .is-on { display: none; }
.ev-ui-sound[aria-pressed="true"] .is-on { display: block; }
.ev-ui-sound[aria-pressed="true"] .is-off { display: none; }
/* muted by the browser: the button asks for the sound, in the brand gradient */
.ev-ui-sound[aria-pressed="false"] {
    border-color: transparent;
    background: linear-gradient(rgba(8, 10, 20, 0.62), rgba(8, 10, 20, 0.62)) padding-box, linear-gradient(110deg, #9cc0ff, #8a63ff 52%, #e05bd6) border-box;
    animation: ev-ask 1.6s ease-in-out 1.2s 3;
}
@keyframes ev-ask { 50% { box-shadow: 0 0 0 6px rgba(138, 99, 255, 0.22), 0 0 22px rgba(138, 99, 255, 0.45); } }

/* ---- 4. Evaporation (canvas drawn by js/intro.js) ---- */
.ev-vapor { position: absolute; inset: 0; width: 100%; height: 100%; display: none; pointer-events: none; }
.intro-on .ev-intro.is-vapor { background: transparent; pointer-events: none; }
.is-vapor .ev-vapor { display: block; }
.is-vapor .ev-film { opacity: 0; transition: none; }
.is-vapor .ev-load, .is-vapor .ev-paper { display: none; }
.is-vapor .ev-ui, .is-vapor .ev-time { opacity: 0 !important; pointer-events: none; }
/* no film to evaporate (skipped while loading, or the film could not play): a soft dissolve */
.intro-on .ev-intro.is-leaving { opacity: 0; transform: scale(1.03); filter: blur(10px); pointer-events: none; transition: opacity 0.7s ease, transform 0.8s ease, filter 0.7s ease; }

@media (max-width: 560px) {
    .ev-load-stack { gap: 18px; }
    .ev-load-label { font-size: 12px; }
    .ev-ui-btn { height: 34px; padding: 0 13px; font-size: 12px; }
}