/* =====================================================================
   HELIOS2 — ULTIMUL CAPITOL
   Paletă derivată din logo-ul Helios2 (bronz / cupru / jar) și din
   culorile site-ului actual (#120C07, #F2CEA7, #B3946D).
   ===================================================================== */

/* Fonturile (Trajan Pro + Onest) sunt încorporate în css/fonts.css */

/* ---------- CULORI ȘI TOKENI (schimbă aici paleta) ---------- */
:root {
    --ink-950: #060403;
    --ink-900: #0c0806;
    --ink-850: #120c07;          /* fundalul site-ului actual */
    --ink-800: #1c130d;

    --parchment: #f6eadb;        /* text principal */
    --parchment-dim: rgba(246, 234, 219, 0.72);
    --parchment-faint: rgba(246, 234, 219, 0.46);

    --bronze-200: #f8e6cc;
    --bronze-300: #f2cea7;       /* helios-600 din site */
    --bronze-400: #dcb282;
    --bronze-500: #b3946d;       /* latte din site */
    --bronze-600: #8a6c4c;
    --ember-400: #f0a060;
    --ember-500: #e07a3a;        /* lumina din logo */

    --line: rgba(220, 178, 130, 0.18);
    --line-strong: rgba(220, 178, 130, 0.38);

    --font-display: "Trajan Pro", "Cinzel", "Times New Roman", serif;
    --font-body: "Onest", "Segoe UI", system-ui, -apple-system, sans-serif;

    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-cine: cubic-bezier(0.65, 0, 0.25, 1);
    --gutter: clamp(1.25rem, 5vw, 4rem);
}

/* ---------- Bază ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { background: var(--ink-950); -webkit-text-size-adjust: 100%; scrollbar-color: var(--bronze-600) var(--ink-950); scrollbar-width: thin; }
body {
    margin: 0; background: var(--ink-950); color: var(--parchment);
    font-family: var(--font-body); font-weight: 300; font-size: 1rem; line-height: 1.6;
    -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility;
    overflow-x: hidden;
}
html.intro-active, html.intro-active body { overflow: hidden; }
img, video, svg, canvas { display: block; max-width: 100%; }
p, h1, h2, h3, ol { margin: 0; }
a { color: inherit; }
button { font: inherit; color: inherit; }
::selection { background: rgba(224, 122, 58, 0.35); color: #fff; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--ink-950); }
::-webkit-scrollbar-thumb { background: linear-gradient(180deg, var(--bronze-600), #4a3626); border: 3px solid var(--ink-950); border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: var(--bronze-500); }
:focus-visible { outline: 1px solid var(--bronze-300); outline-offset: 4px; }
.skip-link { position: fixed; top: 1rem; left: 1rem; z-index: 200; padding: 0.6rem 1rem; background: var(--ink-900); border: 1px solid var(--line-strong); font-size: 0.85rem; transform: translateY(-200%); transition: transform 0.3s var(--ease-out); }
.skip-link:focus { transform: none; }
.noscript { position: fixed; inset: auto 0 2rem; text-align: center; color: var(--parchment-dim); z-index: 10; }

/* =====================================================================
   STRATURI GLOBALE
   ===================================================================== */
.scroll-progress { position: fixed; inset: 0 0 auto; height: 2px; z-index: 60; pointer-events: none; opacity: 0; transition: opacity 1s ease; }
.is-revealed .scroll-progress { opacity: 1; }
.scroll-progress__bar { display: block; height: 100%; background: linear-gradient(90deg, rgba(179, 148, 109, 0.2), var(--bronze-300) 70%, var(--ember-400)); box-shadow: 0 0 12px rgba(240, 160, 96, 0.5); transform-origin: 0 50%; transform: scaleX(0); }
.embers { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; opacity: 0; transition: opacity 2.5s ease; }
.is-revealed .embers { opacity: 1; }
.grain { position: fixed; inset: -100%; z-index: 70; pointer-events: none; opacity: 0.05; mix-blend-mode: overlay; background-size: 180px 180px; animation: grain 0.9s steps(6) infinite; }
@keyframes grain {
    0% { transform: translate3d(0, 0, 0); } 20% { transform: translate3d(-3%, 2%, 0); } 40% { transform: translate3d(2%, -4%, 0); }
    60% { transform: translate3d(-4%, -1%, 0); } 80% { transform: translate3d(3%, 4%, 0); } 100% { transform: translate3d(0, 0, 0); }
}
.vignette { position: fixed; inset: 0; z-index: 3; pointer-events: none; background: radial-gradient(ellipse 120% 95% at 50% 50%, transparent 58%, rgba(0, 0, 0, 0.5) 100%); }

/* =====================================================================
   INTRO
   ===================================================================== */
.intro { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; cursor: pointer; }
.intro__bg { position: absolute; inset: 0; background: #000; transition: opacity 1.6s var(--ease-cine); }
.intro__glow {
    position: absolute; top: 50%; left: 50%; width: min(90vmin, 900px); aspect-ratio: 1;
    margin: calc(min(90vmin, 900px) / -2) 0 0 calc(min(90vmin, 900px) / -2); border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 214, 160, 0.55) 0%, rgba(224, 122, 58, 0.22) 14%, rgba(150, 60, 20, 0.08) 34%, transparent 62%);
    opacity: 0; transform: scale(0.06); transition: transform 2.6s var(--ease-out), opacity 1.2s ease;
}
.intro.is-glow .intro__glow { opacity: 1; transform: scale(1); }
.intro.is-out .intro__glow { opacity: 0; transition-duration: 1.2s; }
.intro__stage { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; padding: 0 var(--gutter); }
.intro__logo {
    width: clamp(240px, min(40vw, 58vh), 680px); height: auto; opacity: 0;
    filter: blur(16px) brightness(2.4); transform: scale(0.93);
    transition: opacity 1.9s var(--ease-out), filter 2s var(--ease-out), transform 2.4s var(--ease-out); will-change: transform, opacity;
}
.intro.is-logo .intro__logo { opacity: 1; filter: blur(0) brightness(1); transform: scale(1); }
.intro.is-flicker .intro__logo { animation: introFlicker 0.18s steps(2) 1; }
@keyframes introFlicker {
    0% { opacity: 0.55; transform: translateX(2px); filter: drop-shadow(-3px 0 rgba(255, 90, 40, 0.55)) drop-shadow(3px 0 rgba(90, 200, 255, 0.35)); }
    50% { opacity: 1; transform: translateX(-1px); }
    100% { opacity: 1; transform: none; filter: none; }
}
.intro__tagline, .intro__line { opacity: 0; transform: translateY(10px); filter: blur(6px); transition: opacity 1.2s ease, transform 1.4s var(--ease-out), filter 1.2s ease; }
.intro__tagline { margin-top: clamp(1.2rem, 3vh, 2rem); font-family: var(--font-display); font-size: clamp(0.72rem, 1.05vw, 0.95rem); letter-spacing: 0.55em; text-transform: uppercase; color: var(--bronze-300); padding-left: 0.55em; }
.intro__line { margin-top: 1.1rem; max-width: 34ch; font-size: clamp(0.92rem, 1.15vw, 1.08rem); line-height: 1.75; color: var(--parchment-dim); white-space: pre-line; }
.intro.is-tag .intro__tagline, .intro.is-line .intro__line { opacity: 1; transform: none; filter: none; }
.intro.is-out .intro__tagline, .intro.is-out .intro__line { opacity: 0; transition-duration: 0.6s; }
.intro.is-out .intro__bg { opacity: 0; }
.intro.is-out { pointer-events: none; }
.intro__skip {
    position: absolute; right: clamp(1rem, 3vw, 2.5rem); bottom: clamp(1rem, 3vw, 2.25rem); padding: 0.6rem 0.2rem;
    background: none; border: 0; border-bottom: 1px solid rgba(220, 178, 130, 0.22);
    font-family: var(--font-display); font-size: 0.68rem; letter-spacing: 0.32em; text-transform: uppercase; color: var(--parchment-faint);
    cursor: pointer; opacity: 0; animation: fadeIn 0.8s ease 0.6s forwards; transition: color 0.3s ease, border-color 0.3s ease;
}
.intro__skip:hover, .intro__skip:focus-visible { color: var(--bronze-300); border-color: var(--bronze-400); }
.intro.is-out .intro__skip { opacity: 0 !important; animation: none; transition: opacity 0.4s ease; }
@keyframes fadeIn { to { opacity: 1; } }

/* =====================================================================
   REVEAL (Intersection Observer)
   ===================================================================== */
.js [data-reveal] { transition: opacity 1.3s var(--ease-out), transform 1.5s var(--ease-out), filter 1.3s var(--ease-out); transition-delay: var(--delay, 0ms); }
.js [data-reveal="fade"] { opacity: 0; }
.js [data-reveal="up"] { opacity: 0; transform: translateY(26px); }
.js [data-reveal="blur"] { opacity: 0; filter: blur(12px); transform: translateY(8px) scale(0.985); }
.js [data-reveal].is-visible { opacity: 1; transform: none; filter: none; }

/* split: litere care trec din blur în clar */
.split-word { display: inline-block; white-space: nowrap; }
.split-char {
    display: inline-block;
    /* spațiu pentru diacritice (Î, Ș, Ț) — background-clip:text taie tot ce iese din cutie */
    padding: 0.16em 0.03em 0.12em; margin: -0.16em -0.03em -0.12em;
    opacity: 0; filter: blur(10px); transform: translateY(0.28em);
    transition: opacity 1.1s var(--ease-out), filter 1.2s var(--ease-out), transform 1.4s var(--ease-out);
    transition-delay: calc(var(--delay, 0ms) + var(--i) * 38ms);
}
.is-visible .split-char { opacity: 1; filter: blur(0); transform: none; }


/* =====================================================================
   HERO
   ===================================================================== */
.hero { position: relative; min-height: 100vh; min-height: 100svh; display: grid; place-items: center; overflow: hidden; padding: 6rem var(--gutter) 9rem; }
.hero__scene, .hero__scene > * { position: absolute; inset: 0; pointer-events: none; }
.hero__bg { inset: -4%; will-change: transform; }
.hero__img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 42%; opacity: 0; transform: scale(1.14); transition: opacity 2.8s ease 0.1s; animation: kenBurns 26s var(--ease-out) forwards paused; }
.is-revealed .hero__img { opacity: 1; animation-play-state: running; }
@keyframes kenBurns { from { transform: scale(1.14); } to { transform: scale(1.02); } }

/* raze de lumină care pornesc din lună */
.hero__rays { opacity: 0; mix-blend-mode: screen; transition: opacity 3s ease 1s; }
.is-revealed .hero__rays { opacity: 1; }
.hero__rays::before {
    content: ""; position: absolute; inset: -20% -10% 0;
    background: conic-gradient(from 128deg at 36% 4%, transparent 0deg, rgba(255, 226, 186, 0.10) 5deg, transparent 11deg, transparent 18deg,
        rgba(255, 214, 170, 0.07) 23deg, transparent 31deg, transparent 40deg, rgba(255, 230, 196, 0.08) 44deg, transparent 50deg,
        transparent 62deg, rgba(255, 210, 160, 0.05) 68deg, transparent 78deg, transparent 360deg);
    -webkit-mask-image: radial-gradient(ellipse 80% 90% at 36% 4%, #000 10%, transparent 75%);
            mask-image: radial-gradient(ellipse 80% 90% at 36% 4%, #000 10%, transparent 75%);
    transform-origin: 36% 4%; animation: rays 18s ease-in-out infinite alternate;
}
@keyframes rays { 0% { transform: rotate(-2deg); opacity: 0.7; } 50% { opacity: 1; } 100% { transform: rotate(2.5deg); opacity: 0.75; } }

/* ceață */
.fog { position: absolute; left: 0; width: 200%; background: url("../assets/images/fog.webp") repeat-x 0 0 / 50% 100%; pointer-events: none; will-change: transform; }
.fog--back { top: auto; bottom: 8%; height: 55%; opacity: 0.16; animation: fogDrift 140s linear infinite; }
.fog--front { top: auto; bottom: -12%; height: 50%; opacity: 0.2; animation: fogDrift 90s linear infinite reverse; }
.fog--low { top: auto; bottom: 0; height: 70%; opacity: 0.06; animation: fogDrift 160s linear infinite; }
@keyframes fogDrift { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } }

/* lumina care urmărește mouse-ul */
.hero__spot { inset: auto; top: 0; left: 0; width: 70vmax; height: 70vmax; border-radius: 50%; background: radial-gradient(circle, rgba(255, 196, 140, 0.10) 0%, rgba(255, 170, 110, 0.04) 30%, transparent 60%); mix-blend-mode: screen; opacity: 0; transition: opacity 1.5s ease; will-change: transform; }
.has-pointer.is-revealed .hero__spot { opacity: 1; }

/* tranziție epic → melancolic la scroll (opacitate setată din JS) */
.hero__cool { background: linear-gradient(180deg, rgba(22, 30, 42, 0.55), rgba(10, 12, 18, 0.7)); opacity: 0; }
.hero__shade { background: var(--ink-950); opacity: 0; }
.hero__frame {
    background:
        linear-gradient(180deg, rgba(6, 4, 3, 0.78) 0%, rgba(6, 4, 3, 0.15) 22%, transparent 40%),
        linear-gradient(0deg, var(--ink-950) 0%, rgba(6, 4, 3, 0.85) 16%, rgba(6, 4, 3, 0.2) 45%, transparent 60%),
        radial-gradient(ellipse 65% 55% at 50% 47%, rgba(6, 4, 3, 0.55) 0%, rgba(6, 4, 3, 0.25) 55%, transparent 80%),
        radial-gradient(ellipse 120% 100% at 50% 45%, transparent 50%, rgba(0, 0, 0, 0.7) 100%);
}
.hero__content { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; text-align: center; will-change: transform, opacity; }

.hero__logo { position: relative; width: clamp(240px, min(40vw, 58vh), 760px); margin-bottom: clamp(0.25rem, 1.6vh, 1.2rem); opacity: 0; }
.hero__logo.is-visible { opacity: 1; }
.hero__logo.is-fading { transition: opacity 1.6s ease; }
.hero__logo img { position: relative; z-index: 1; width: 100%; height: auto; filter: drop-shadow(0 12px 40px rgba(0, 0, 0, 0.6)); transition: filter 0.6s ease; }
.hero__logo:hover img { filter: drop-shadow(0 12px 40px rgba(0, 0, 0, 0.6)) drop-shadow(0 0 18px rgba(240, 160, 96, 0.35)); }
.hero__logo::before { content: ""; position: absolute; inset: -30% -15%; z-index: 0; background: radial-gradient(ellipse 50% 45% at 50% 52%, rgba(224, 122, 58, 0.28), rgba(224, 122, 58, 0.08) 45%, transparent 70%); animation: logoPulse 7s ease-in-out infinite; }
@keyframes logoPulse { 0%, 100% { opacity: 0.55; transform: scale(0.97); } 50% { opacity: 1; transform: scale(1.03); } }
/* sweep de lumină rar (o dată la ~11s), mascat pe forma logo-ului */
.hero__logo::after {
    content: ""; position: absolute; inset: 0; z-index: 2;
    background: linear-gradient(105deg, transparent 38%, rgba(255, 244, 222, 0.55) 49%, rgba(255, 230, 190, 0.2) 53%, transparent 62%) no-repeat;
    background-size: 300% 100%; background-position: 120% 0;
    -webkit-mask: var(--logo-mask) center / 100% 100% no-repeat; mask: var(--logo-mask) center / 100% 100% no-repeat;
    mix-blend-mode: screen; animation: logoShine 11s ease-in-out 3s infinite; pointer-events: none;
}
@keyframes logoShine { 0%, 86% { background-position: 120% 0; } 100% { background-position: -20% 0; } }

.eyebrow { display: flex; align-items: center; gap: clamp(0.8rem, 1.6vw, 1.4rem); font-family: var(--font-display); font-size: clamp(0.7rem, 0.95vw, 0.9rem); letter-spacing: 0.48em; text-transform: uppercase; color: var(--bronze-300); text-shadow: 0 2px 12px rgba(0, 0, 0, 0.9); }
.eyebrow > span:not(.eyebrow__line) { padding-left: 0.48em; }
.eyebrow__line { width: clamp(28px, 4vw, 64px); height: 1px; background: linear-gradient(90deg, transparent, var(--bronze-400)); }
.eyebrow__line:last-child { background: linear-gradient(90deg, var(--bronze-400), transparent); }

.hero__title { margin-top: clamp(0.8rem, 2.4vh, 1.6rem); max-width: 20ch; text-wrap: balance; font-family: var(--font-display); font-weight: 400; font-size: clamp(2.1rem, min(5.6vw, 9.6vh), 6.4rem); line-height: 1.08; letter-spacing: 0.05em; text-transform: uppercase; filter: drop-shadow(0 4px 30px rgba(0, 0, 0, 0.85)); }
.hero__title .split-char, .thanks__title > span:first-child { background: linear-gradient(180deg, #fff6ea 15%, var(--bronze-300) 62%, #b88a5a 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero__date { margin-top: 1rem; font-family: var(--font-display); font-size: clamp(0.78rem, 1vw, 0.95rem); letter-spacing: 0.4em; color: var(--bronze-400); }
.hero__date:empty { display: none; }
.hero__subtitle { margin-top: clamp(1rem, 2.6vh, 1.8rem); max-width: 38ch; font-size: clamp(1rem, 1.3vw, 1.25rem); line-height: 1.65; color: var(--parchment-dim); text-shadow: 0 2px 16px rgba(0, 0, 0, 0.95); }

.scroll-cue { position: absolute; left: 50%; bottom: clamp(1.4rem, 4.5vh, 3rem); z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 0.9rem; translate: -50% 0; text-decoration: none; font-family: var(--font-display); font-size: 0.64rem; letter-spacing: 0.42em; text-transform: uppercase; color: var(--parchment-faint); transition: color 0.4s ease; }
.scroll-cue:hover { color: var(--bronze-300); }
.scroll-cue__label { padding-left: 0.42em; }
.scroll-cue__line { position: relative; width: 1px; height: clamp(36px, 6vh, 60px); background: rgba(220, 178, 130, 0.18); overflow: hidden; }
.scroll-cue__line::after { content: ""; position: absolute; left: 0; top: 0; width: 1px; height: 40%; background: linear-gradient(180deg, transparent, var(--bronze-300)); animation: scrollCue 2.6s var(--ease-cine) infinite; }
@keyframes scrollCue { from { transform: translateY(-100%); } to { transform: translateY(260%); } }

/* =====================================================================
   MESAJUL
   ===================================================================== */
.message { position: relative; padding: clamp(4rem, 10vh, 7rem) var(--gutter) clamp(3.5rem, 9vh, 6rem); background: radial-gradient(ellipse 50% 45% at 50% 55%, rgba(120, 64, 30, 0.12), transparent 70%), var(--ink-950); text-align: center; overflow: hidden; outline: none; }
.message__atmos { position: absolute; inset: 0; pointer-events: none; }
.message__eyebrow { display: flex; align-items: center; justify-content: center; gap: 1rem; margin-bottom: 1.1rem; font-family: var(--font-display); font-size: clamp(0.66rem, 0.8vw, 0.76rem); letter-spacing: 0.42em; padding-left: 0.42em; text-transform: uppercase; color: var(--bronze-500); }
.message__eyebrow::before, .message__eyebrow::after { content: ""; width: 5px; height: 5px; border: 1px solid var(--bronze-500); transform: rotate(45deg); opacity: 0.8; }
.message__heading { text-wrap: balance; margin-top: 0; font-family: var(--font-display); font-weight: 400; font-size: clamp(1.6rem, 3.4vw, 2.9rem); line-height: 1.2; letter-spacing: 0.08em; text-transform: uppercase; color: var(--parchment); }

.letter {
    position: relative; max-width: 780px; margin: clamp(2.5rem, 7vh, 4.5rem) auto 0;
    padding: clamp(2.6rem, 6vw, 5rem) clamp(1.5rem, 6vw, 5rem) clamp(2.4rem, 5vw, 4rem); text-align: center;
    background: linear-gradient(180deg, rgba(255, 236, 214, 0.035), rgba(255, 236, 214, 0) 30%), linear-gradient(180deg, rgba(30, 20, 14, 0.74), rgba(12, 8, 6, 0.86));
    border: 1px solid var(--line);
    box-shadow: 0 50px 120px -50px rgba(0, 0, 0, 0.95), 0 0 90px -30px rgba(224, 122, 58, 0.14), inset 0 1px 0 rgba(255, 235, 210, 0.07);
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.js .letter[data-reveal="letter"] { opacity: 0; clip-path: inset(6% 0 94% 0); transform: translateY(30px); transition: opacity 1s ease, clip-path 1.8s var(--ease-cine), transform 1.6s var(--ease-out); }
.js .letter[data-reveal="letter"].is-visible { opacity: 1; clip-path: inset(-10% -10% -10% -10%); transform: none; }
.letter > *:not(.letter__corner):not(.letter__emblem) { opacity: 0; transform: translateY(12px); transition: opacity 1.2s ease, transform 1.4s var(--ease-out); }
.letter.is-visible > *:not(.letter__corner):not(.letter__emblem) { opacity: 1; transform: none; }
.letter.is-visible .letter__greeting { transition-delay: 0.7s; }
.letter.is-visible .letter__body { transition-delay: 0.95s; }
.letter.is-visible .letter__signoff { transition-delay: 1.2s; }
.letter.is-visible .letter__signature { transition-delay: 1.35s; }
.letter__corner { position: absolute; width: 22px; height: 22px; border-color: var(--bronze-400); border-style: solid; border-width: 0; opacity: 0.75; }
.letter__corner--tl { top: -1px; left: -1px; border-top-width: 1px; border-left-width: 1px; }
.letter__corner--tr { top: -1px; right: -1px; border-top-width: 1px; border-right-width: 1px; }
.letter__corner--bl { bottom: -1px; left: -1px; border-bottom-width: 1px; border-left-width: 1px; }
.letter__corner--br { bottom: -1px; right: -1px; border-bottom-width: 1px; border-right-width: 1px; }
.letter__emblem { position: absolute; top: 0; left: 50%; width: 160px; height: 1px; translate: -50% -0.5px; background: linear-gradient(90deg, transparent, var(--bronze-300), transparent); }
.letter__emblem::after { content: ""; position: absolute; left: 50%; top: 50%; width: 9px; height: 9px; translate: -50% -50%; rotate: 45deg; background: var(--ink-900); border: 1px solid var(--bronze-300); box-shadow: 0 0 12px rgba(240, 160, 96, 0.6); }
.letter__greeting { font-family: var(--font-display); font-size: clamp(1rem, 1.4vw, 1.2rem); letter-spacing: 0.08em; color: var(--bronze-300); margin-bottom: 1.6rem; }
.letter__body p { max-width: 62ch; margin-inline: auto; font-size: clamp(1.02rem, 1.2vw, 1.14rem); line-height: 1.9; color: rgba(246, 234, 219, 0.86); white-space: pre-line; }
/* fraza de deschidere a mesajului */
.letter__lead { max-width: 40ch; margin: 0 auto 2.4rem; font-family: var(--font-display); font-size: clamp(1.05rem, 1.6vw, 1.3rem); line-height: 1.6; letter-spacing: 0.04em; color: var(--parchment-dim); text-wrap: balance; }
.letter__lead::after { content: ""; display: block; width: 7px; height: 7px; margin: 2rem auto 0; rotate: 45deg; border: 1px solid var(--bronze-400); }
.letter.is-visible .letter__lead { transition-delay: 0.55s; }
/* titlurile secțiunilor din mesaj */
.letter__subheading { margin: 3rem auto 1.2rem; font-family: var(--font-display); font-weight: 400; font-size: clamp(0.95rem, 1.3vw, 1.15rem); line-height: 1.5; letter-spacing: 0.16em; text-transform: uppercase; color: var(--bronze-300); text-wrap: balance; }
.letter__subheading::before { content: ""; display: block; width: 48px; height: 1px; margin: 0 auto 1.2rem; background: linear-gradient(90deg, transparent, var(--bronze-400), transparent); }
.letter__body p + p { margin-top: 1.3em; }
/* placeholder evident — dispare automat când textul nu mai începe cu "[" */
.letter__body p.is-placeholder { padding: 1.4rem 1.2rem; border: 1px dashed rgba(220, 178, 130, 0.35); background: rgba(220, 178, 130, 0.04); text-align: center; font-family: var(--font-display); font-size: clamp(0.8rem, 1vw, 0.92rem); letter-spacing: 0.12em; color: var(--bronze-300); }
/* paragrafe evidențiate (data închiderii, „See you at sunrise.”) */
.letter__body p.is-highlight { margin: 1.6em auto; max-width: 30ch; font-family: var(--font-display); font-size: clamp(1.1rem, 1.6vw, 1.4rem); line-height: 1.55; letter-spacing: 0.05em; color: var(--bronze-300); text-shadow: 0 0 24px rgba(224, 122, 58, 0.3); text-wrap: balance; }
.letter__body p.is-highlight:last-child { margin-bottom: 0; }
.letter__signoff { margin-top: 2.6rem; color: var(--parchment-dim); font-size: 0.98rem; }
.letter__signature { display: flex; align-items: center; justify-content: center; gap: 1rem; margin-top: 0.6rem; font-family: var(--font-display); font-size: 0.95rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--bronze-300); }
.letter__dash { width: 42px; height: 1px; background: var(--bronze-500); }
.letter__signature::after { content: ""; width: 42px; height: 1px; background: var(--bronze-500); }


/* =====================================================================
   MULȚUMIM
   ===================================================================== */
.thanks { position: relative; min-height: 100vh; min-height: 100svh; display: grid; place-items: center; padding: 6rem var(--gutter) 5rem; overflow: hidden; text-align: center; background: var(--ink-950); }
.thanks__media { position: absolute; inset: 0; background: url("../assets/video/embers-poster.webp") center / cover no-repeat; opacity: 0.75; }
.thanks__video { width: 100%; height: 100%; object-fit: cover; animation: slowZoom 24s ease-in-out infinite alternate; }
.thanks__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, var(--ink-950) 0%, rgba(6, 4, 3, 0.35) 28%, rgba(6, 4, 3, 0.35) 72%, var(--ink-950) 100%), radial-gradient(ellipse 60% 50% at 50% 50%, rgba(6, 4, 3, 0.55), transparent 80%); }
@keyframes slowZoom { from { transform: scale(1.08); } to { transform: scale(1); } }
.thanks__content { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; }
.thanks__title { font-family: var(--font-display); font-weight: 400; font-size: clamp(2rem, 9vw, 9.5rem); line-height: 1; letter-spacing: 0.06em; white-space: nowrap; text-transform: uppercase; filter: drop-shadow(0 10px 50px rgba(0, 0, 0, 0.8)); margin: 0; }
.thanks__title > span:first-child {
    display: inline-block; padding: 0.14em 0.04em 0.18em; margin: -0.14em -0.04em -0.18em;
    background: linear-gradient(105deg, transparent 40%, rgba(255, 248, 235, 0.9) 50%, transparent 60%) no-repeat, linear-gradient(180deg, #fff3e2 15%, var(--bronze-300) 60%, #9c7046 100%);
    background-size: 250% 100%, 100% 100%; background-position: 160% 0, 0 0;
    -webkit-background-clip: text; background-clip: text;
}
.js .thanks__title[data-reveal="sweep"] {
    -webkit-mask-image: linear-gradient(90deg, #000 40%, transparent 60%); mask-image: linear-gradient(90deg, #000 40%, transparent 60%);
    -webkit-mask-size: 260% 100%; mask-size: 260% 100%; -webkit-mask-position: 100% 0; mask-position: 100% 0;
    -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
    transition: -webkit-mask-position 2.6s var(--ease-cine), mask-position 2.6s var(--ease-cine);
}
.js .thanks__title[data-reveal="sweep"].is-visible { -webkit-mask-position: 0 0; mask-position: 0 0; }
.thanks__title.is-visible > span:first-child { animation: titleShine 12s ease-in-out 2.4s infinite; }
@keyframes titleShine { 0%, 82% { background-position: 160% 0, 0 0; } 100% { background-position: -60% 0, 0 0; } }
.thanks__lines { margin-top: clamp(2rem, 5vh, 3.2rem); display: flex; flex-direction: column; gap: 0.5rem; }
.thanks__lines p { font-size: clamp(1.05rem, 1.6vw, 1.4rem); font-weight: 300; color: var(--parchment-dim); letter-spacing: 0.02em; }

/* =====================================================================
   FINAL
   ===================================================================== */
/* rândul final: discret, auriu, între două linii fine */
.ending__title { margin-top: clamp(2.6rem, 7vh, 4rem); display: flex; align-items: center; justify-content: center; gap: 1.1rem; font-family: var(--font-display); font-weight: 400; font-size: clamp(0.82rem, 1.1vw, 1rem); letter-spacing: 0.24em; text-transform: uppercase; color: var(--bronze-300); text-shadow: 0 0 24px rgba(224, 122, 58, 0.35); }
.ending__title::before, .ending__title::after { content: ""; width: clamp(24px, 4vw, 56px); height: 1px; background: linear-gradient(90deg, transparent, var(--bronze-400)); }
.ending__title::after { background: linear-gradient(90deg, var(--bronze-400), transparent); }
@media (max-width: 640px) { .ending__title { letter-spacing: 0.14em; text-align: center; max-width: 30ch; text-wrap: balance; } .ending__title::before, .ending__title::after { display: none; } }
.ending__copy { position: absolute; left: 0; right: 0; bottom: 1.8rem; z-index: 1; font-size: 0.72rem; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(246, 234, 219, 0.24); }

/* =====================================================================
   RESPONSIVE
   ===================================================================== */
/* portret: încadrăm războinicul din stânga în loc de acoperișul estompat */
@media (max-aspect-ratio: 4/5) {
    .hero__img { object-position: 24% 45%; }
}
@media (max-width: 640px) {
    .message__eyebrow { white-space: nowrap; gap: 0.6rem; font-size: 0.6rem; letter-spacing: 0.22em; padding-left: 0.22em; }
    .hero { padding-top: 5rem; padding-bottom: 8rem; }
    .eyebrow { letter-spacing: 0.32em; font-size: 0.66rem; }
    .eyebrow__line { width: 22px; }
    .letter { -webkit-backdrop-filter: none; backdrop-filter: none; background: linear-gradient(180deg, rgba(30, 20, 14, 0.92), rgba(12, 8, 6, 0.96)); }
    .letter__dash, .letter__signature::after { display: none; }
    .fog--back { display: none; }
    .grain { animation: none; }
}
@media (max-height: 520px) and (orientation: landscape) {
    .hero { padding-top: 3.5rem; padding-bottom: 5rem; }
    .hero__logo { width: clamp(160px, 26vw, 300px); margin-bottom: 0.4rem; }
    .hero__title { font-size: clamp(1.6rem, 4.6vw, 2.6rem); margin-top: 0.5rem; }
    .hero__subtitle { margin-top: 0.7rem; font-size: 0.95rem; }
    .scroll-cue { display: none; }
}
@media (min-width: 2200px) {
    :root { font-size: 18px; }
    .letter { max-width: 900px; }
}

/* =====================================================================
   REDUCED MOTION
   ===================================================================== */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
    .js [data-reveal], .split-char, .letter > * { transition-duration: 0.6s !important; transition-delay: 0s !important; transform: none !important; filter: none !important; }
    .hero__img { transform: scale(1.04); animation: none; }
    .grain, .fog, .hero__spot { display: none; }
}