/* THRUBILO — stratul de text, cursorul și formularul. Imaginea o face WebGL-ul din thrubilo.js. */
:root {
	--noapte: #050505;
	--sampanie: #d9c08a;
	--aur: #b8924a;
	--neon: #3cf2c4;
	--fum: #8a8780;
	--ease: cubic-bezier(.2, .7, .1, 1);
}
html { background: var(--noapte); }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }
body.is-gated { overflow: hidden; }
::selection { background: var(--neon); color: #001a12; }

@media (pointer: fine) {
	body, a, button, input, label, textarea { cursor: none; }
}

/* ——— tipografie ——— */
.kicker { font-size: 10px; letter-spacing: .38em; text-transform: uppercase; color: var(--fum); }
.kicker-neon { color: var(--neon); text-shadow: 0 0 18px rgba(60, 242, 196, .55); }
.display { font-family: "Bodoni Moda", serif; font-size: clamp(2.4rem, 6.4vw, 6.4rem); line-height: 1.02; letter-spacing: -.01em; }
.display-sm { font-family: "Bodoni Moda", serif; font-size: clamp(2rem, 4.6vw, 4.4rem); line-height: 1.06; }
.whisper { font-family: "Bodoni Moda", serif; font-style: italic; font-size: clamp(1.15rem, 2vw, 1.6rem); color: rgba(217, 192, 138, .92); }
.neon-text { color: #d9fff3; text-shadow: 0 0 6px rgba(60, 242, 196, .9), 0 0 28px rgba(60, 242, 196, .55), 0 0 80px rgba(15, 143, 110, .6); }

/* ——— momentele filmului ——— */
.beat {
	position: absolute; inset: 0; z-index: 20;
	display: flex; flex-direction: column; align-items: center; justify-content: center;
	padding: 0 6vw; text-align: center; pointer-events: none;
	text-shadow: 0 2px 30px rgba(0, 0, 0, .65);
}
.beat-left { align-items: flex-start; text-align: left; }
.beat > * { position: relative; }
.beat > .scrim {
	position: absolute; inset: 0; z-index: -1; opacity: 0;
	background: radial-gradient(60% 45% at 50% 50%, rgba(0, 0, 0, .55), rgba(0, 0, 0, 0) 75%);
}
.beat-left > .scrim { background: radial-gradient(55% 50% at 22% 50%, rgba(0, 0, 0, .6), rgba(0, 0, 0, 0) 75%); }
.beat-right > .scrim { background: radial-gradient(50% 50% at 80% 50%, rgba(0, 0, 0, .6), rgba(0, 0, 0, 0) 75%); }
.beat-low > .scrim { background: radial-gradient(60% 35% at 50% 80%, rgba(0, 0, 0, .6), rgba(0, 0, 0, 0) 75%); }
.beat-final > .scrim { background: radial-gradient(60% 30% at 50% 22%, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0) 75%); }
.beat-right { align-items: flex-end; text-align: right; }
.beat-low { justify-content: flex-end; padding-bottom: 18svh; }
.beat-final { justify-content: flex-start; padding-top: 11svh; }
.beat-final .display { font-size: clamp(2rem, 5vw, 5rem); }
.beat-hero { justify-content: space-between; padding-top: 12svh; padding-bottom: 15svh; }
.hero-title { font-size: clamp(3rem, 14.5vw, 15rem); line-height: .9; letter-spacing: .04em; white-space: nowrap; color: #e6d3a6; text-shadow: 0 0 60px rgba(0,0,0,.8); }
.beat .w { display: inline-block; opacity: 0; will-change: transform, opacity, filter; }
.beat .w + .w { margin-left: .26em; }
.beat .c { display: inline-block; opacity: 0; }
@media (max-width: 767px) {
	.beat-left, .beat-right { align-items: center; text-align: center; }
	.beat-final { padding-top: 12svh; }
}

/* ——— ritualurile ——— */
.ritual { --rc: #d0242f; position: absolute; inset: 0; z-index: 30; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.ritual[hidden] { display: none; }
.ritual::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(70% 38% at 50% 86%, rgba(0, 0, 0, .78), rgba(0, 0, 0, 0) 72%); }
.ritual[data-mode="drag"]::before { background: radial-gradient(70% 38% at 50% 86%, rgba(0, 0, 0, .6), rgba(0, 0, 0, 0) 72%); }
.ritual[data-id="aprinde"] { --rc: var(--neon); }
.ritual-ui { position: absolute; left: 0; right: 0; bottom: 10svh; display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 0 24px; text-align: center; }
.ritual-hold { position: relative; width: 96px; height: 96px; border-radius: 50%; }
.ritual-hold svg { position: absolute; inset: 0; transform: rotate(-90deg); }
.ritual-trk { fill: none; stroke: rgba(239, 226, 196, .45); stroke-width: 1.2; }
.ritual-bar { fill: none; stroke: var(--rc); stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 339.3; stroke-dashoffset: 339.3; filter: drop-shadow(0 0 6px var(--rc)); }
.ritual-hold i { position: absolute; inset: 39px; border-radius: 50%; background: var(--rc); box-shadow: 0 0 18px var(--rc), 0 0 50px var(--rc); animation: ritualPulse 1.6s ease-in-out infinite; }
.ritual.is-holding .ritual-hold i { animation-duration: .45s; }
.ritual[data-mode="drag"] .ritual-hold { display: none; }
.ritual-handle { display: none; position: absolute; top: 8%; bottom: 8%; left: 97%; width: 2px; margin-left: -1px; background: linear-gradient(transparent, rgba(255, 214, 160, .95), transparent); box-shadow: 0 0 24px rgba(255, 190, 120, .7); }
.ritual[data-mode="drag"] .ritual-handle { display: block; }
.ritual[data-mode="drag"] { cursor: grab; }
.ritual-handle span { position: absolute; top: 50%; right: 16px; transform: translateY(-50%); color: var(--sampanie); font-size: 24px; animation: ritualNudge 1.4s ease-in-out infinite; }
.ritual-txt { font-family: "Bodoni Moda", serif; font-style: italic; font-size: clamp(1.05rem, 1.8vw, 1.45rem); color: #efe2c4; text-shadow: 0 2px 24px #000, 0 0 40px #000; max-width: 32ch; }
.ritual-skip { font-size: 10px; letter-spacing: .3em; text-transform: uppercase; color: rgba(138, 135, 128, .85); padding: 6px 10px; }
.ritual-skip:hover, .ritual-skip:focus-visible { color: var(--sampanie); }
.ritual-hold:focus-visible { outline: 1px solid var(--rc); outline-offset: 6px; }
@keyframes ritualPulse { 50% { transform: scale(.65); opacity: .55; } }
@keyframes ritualNudge { 50% { transform: translate(-12px, -50%); } }
.beat > .beat-cta { margin-top: clamp(1.6rem, 4svh, 2.6rem); display: flex; justify-content: center; pointer-events: auto; visibility: hidden; }

.chapter-rail { width: 1px; height: 64px; background: rgba(255, 255, 255, .12); position: relative; overflow: hidden; }
#rail-fill { position: absolute; inset: 0; background: var(--sampanie); transform-origin: top; transform: scaleY(0); }
.hint-line { display: block; width: 1px; height: 36px; margin: 12px auto 0; background: linear-gradient(var(--sampanie), transparent); animation: hint 2.4s var(--ease) infinite; transform-origin: top; }
@keyframes hint { 0% { transform: scaleY(0); opacity: 1; } 60% { transform: scaleY(1); opacity: 1; } 100% { transform: scaleY(1); opacity: 0; } }

/* ——— poarta ——— */
#gate { transition: opacity 1.4s var(--ease), visibility 1.4s; }
#gate.is-out { opacity: 0; visibility: hidden; }
.gate-title { text-shadow: 0 0 40px rgba(184, 146, 74, .25); }

/* ——— butoane ——— */
.btn-gold, .btn-ghost, .btn-mini {
	display: inline-flex; align-items: center; justify-content: center; gap: .6em;
	font-size: 11px; letter-spacing: .3em; text-transform: uppercase; border-radius: 999px;
	transition: background .4s var(--ease), color .4s var(--ease), border-color .4s var(--ease), box-shadow .4s var(--ease), opacity .4s;
}
.btn-gold { padding: 1.1em 2.2em; background: var(--sampanie); color: #0a0805; }
.btn-gold:hover { background: #f1dcaa; box-shadow: 0 0 40px rgba(217, 192, 138, .35); }
.btn-ghost { padding: 1.1em 2.2em; border: 1px solid rgba(217, 192, 138, .35); color: var(--sampanie); }
.btn-ghost:hover { border-color: var(--sampanie); }
.btn-gold:disabled, .btn-ghost:disabled { opacity: .3; pointer-events: none; }
.btn-mini { padding: .8em 1.5em; border: 1px solid rgba(217, 192, 138, .3); color: var(--sampanie); font-size: 10px; }
.btn-mini:hover { border-color: var(--sampanie); background: rgba(217, 192, 138, .08); }

/* sunet: patru bare care respiră */
.sound-btn { display: inline-flex; align-items: flex-end; gap: 2px; height: 14px; color: var(--sampanie); }
.sound-btn i { width: 2px; height: 3px; background: currentColor; border-radius: 1px; transition: height .3s; }
.sound-btn em { font-style: normal; font-size: 10px; letter-spacing: .3em; text-transform: uppercase; margin-left: 8px; line-height: 1; opacity: .8; }
.sound-btn[aria-pressed="true"] i { animation: bar 1.1s ease-in-out infinite; }
.sound-btn[aria-pressed="true"] i:nth-child(2) { animation-delay: -.3s; }
.sound-btn[aria-pressed="true"] i:nth-child(3) { animation-delay: -.6s; }
.sound-btn[aria-pressed="true"] i:nth-child(4) { animation-delay: -.85s; }
@keyframes bar { 0%, 100% { height: 3px; } 50% { height: 13px; } }
@media (max-width: 480px) { .sound-btn em { display: none; } }

/* butonul magnetic */
.magnet {
	position: relative; padding: 1.6em 3em; border-radius: 999px;
	border: 1px solid rgba(60, 242, 196, .55); color: #e6fff7;
	font-size: 11px; letter-spacing: .32em; text-transform: uppercase;
	background: radial-gradient(120% 140% at 50% 120%, rgba(60, 242, 196, .22), rgba(5, 5, 5, .6) 60%);
	box-shadow: 0 0 0 1px rgba(60, 242, 196, .08), 0 0 50px rgba(60, 242, 196, .18), inset 0 0 30px rgba(60, 242, 196, .08);
	transition: box-shadow .6s var(--ease), border-color .6s var(--ease);
	will-change: transform;
}
.magnet:hover { border-color: var(--neon); box-shadow: 0 0 0 1px rgba(60, 242, 196, .3), 0 0 90px rgba(60, 242, 196, .45), inset 0 0 40px rgba(60, 242, 196, .2); }
.magnet-txt { display: inline-block; will-change: transform; }
@media (max-width: 480px) { .magnet { padding: 1.4em 1.6em; letter-spacing: .2em; font-size: 10px; } }

/* ——— cursorul ——— */
#cursor { position: fixed; left: 0; top: 0; z-index: 85; pointer-events: none; display: none; }
#cursor span {
	position: absolute; width: 28px; height: 28px; margin: -14px 0 0 -14px; border-radius: 50%;
	border: 1px solid rgba(217, 192, 138, .85);
	box-shadow: 0 0 12px rgba(217, 192, 138, .45), inset 0 0 8px rgba(217, 192, 138, .25);
	transition: transform .45s var(--ease), border-color .45s, box-shadow .45s;
}
#cursor.is-hover span { transform: scale(1.9); border-color: rgba(60, 242, 196, .9); box-shadow: 0 0 22px rgba(60, 242, 196, .5); }
#cursor.is-down span { transform: scale(.7); }
@media (pointer: fine) { #cursor { display: block; } }

/* ——— lentila de întuneric ——— */
.lens-dark { clip-path: circle(0px at 50% 50%); transition: clip-path .9s var(--ease); }
.lens.is-dark .lens-dark { clip-path: circle(150% at 50% 50%); }

.reveal { opacity: 0; transform: translateY(30px); }

@media (prefers-reduced-motion: reduce) {
	.hint-line, .sound-btn i { animation: none !important; }
}