*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
::selection { background: rgba(255,255,255,0.2); color: #fff; }
html, body {width: 100%; height: 100%;overflow: hidden;background:#0d2d62;font-family: "Inter", sans-serif;}

/* ── VIDEO LAYER ── */
#yt-wrap {position: fixed;inset: 0;z-index: 0;pointer-events: none;overflow: hidden;}
#yt-wrap iframe {position: absolute;top: 50%; left: 50%;/* 16:9 scaled to fill viewport */width: calc(100vh * 16 / 9);height: calc(100vw * 9 / 16);min-width: 100vw;min-height: 100vh;transform: translate(-50%, -50%);border: none;opacity: 0;transition: opacity 2s ease;}
#yt-wrap.ready iframe { opacity: 1; }

/* ── OVERLAYS ── */
.overlay-vignette {position: fixed; inset: 0; z-index: 1; pointer-events: none;background: radial-gradient(ellipse at center, transparent 30%, rgba(0,0,0,0.75) 100%);}
.overlay-gradient {position: fixed; inset: 0; z-index: 2; pointer-events: none;background: linear-gradient(to bottom, rgba(0,0,0,0.55) 0%, transparent 30%, transparent 55%, rgba(0,0,0,0.85) 100%), linear-gradient(to right, rgba(0,0,0,0.3) 0%, transparent 60%);}
.overlay-grain {position: fixed; inset: 0; z-index: 3; pointer-events: none; opacity: 0.04;background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");background-size: 300px 300px;}

/* ── UI CHROME ── */
#ui {position: fixed; inset: 0; z-index: 10;display: flex; flex-direction: column;justify-content: space-between;padding: 2.5rem 3.5rem;pointer-events: none;}

/* ── TOPBAR ── */
.topbar {display: flex;justify-content: space-between;align-items: flex-start;opacity: 0;animation: fadeIn 1.2s ease 0.6s forwards;}
.brand {display: flex; flex-direction: column; gap: 2px;}
.brand-name {font-family: "Cormorant Garamond", serif;font-weight: 300;font-size: 1.35rem;letter-spacing: 0.35em;text-transform: uppercase;color: #fff;}
.brand-sub {font-size: 9px;font-weight: 400;letter-spacing: 0.25em;text-transform: uppercase;color: rgba(255,255,255,0.45);}
.top-nav {display: flex; gap: 2.5rem;align-items: center;}
.top-nav a {font-size: 10px;font-weight: 400;letter-spacing: 0.18em;text-transform: uppercase;color: rgba(255,255,255,0.55);text-decoration: none;transition: color 0.3s ease;pointer-events: all;}
.top-nav a:hover { color: #fff; }
.top-cta {font-size: 10px;font-weight: 500;letter-spacing: 0.18em;text-transform: uppercase;color: rgba(255,255,255,0.9);border: 0.5px solid rgba(255,255,255,0.35);padding: 0.55rem 1.2rem;border-radius: 2px;pointer-events: all;cursor: pointer;transition: background 0.3s ease, border-color 0.3s ease, color 0.3s ease;text-decoration: none;}
.top-cta:hover {background: rgba(255,255,255,0.12);border-color: rgba(255,255,255,0.7);color: #fff;}

/* ── CENTER CONTENT ── */
.center {flex: 1;display: flex;flex-direction: column;justify-content: center;align-items: flex-start;max-width: 780px;gap: 0;}
.eyebrow {font-size: 10px;font-weight: 400;letter-spacing: 0.28em;text-transform: uppercase;color: rgba(255,255,255,0.45);margin-bottom: 1.4rem;display: flex; align-items: center; gap: 1rem;opacity: 0;animation: slideUp 1s cubic-bezier(0.16,1,0.3,1) 0.9s forwards;}
.eyebrow::before {content: '';display: block;width: 2rem; height: 0.5px;background: rgba(255,255,255,0.3);}
.headline {font-family: "Cormorant Garamond", serif;font-weight: 300;font-size: clamp(3.2rem, 4.5vw, 7.5rem);line-height: 0.9;letter-spacing: -0.01em;color: #fff;margin-bottom: 0.15em;opacity: 0;animation: slideUp 1.2s cubic-bezier(0.16,1,0.3,1) 1.05s forwards;}
.headline em {font-style: italic;color: rgba(255,255,255,0.65);}
.subhead {font-family: "Cormorant Garamond", serif;font-weight: 300;font-style: italic;font-size: clamp(1.1rem, 2.5vw, 1.9rem);color: rgba(255,255,255,0.5);letter-spacing: 0.04em;margin-bottom: 3rem;opacity: 0;animation: slideUp 1.2s cubic-bezier(0.16,1,0.3,1) 1.2s forwards;}
.hero-actions {display: flex; align-items: center; gap: 2rem;opacity: 0;animation: slideUp 1s cubic-bezier(0.16,1,0.3,1) 1.35s forwards;margin-top:auto;}
.btn-primary {display: inline-flex; align-items: center; gap: 0.75rem;font-size: 11px;font-weight: 500;letter-spacing: 0.2em;text-transform: uppercase;color: #000;background: #fff;border: none;padding: 0.9rem 2rem;border-radius: 2px;cursor: pointer;pointer-events: all;transition: background 0.25s ease, color 0.25s ease, transform 0.2s ease;text-decoration: none;}
.btn-primary:hover { background: rgba(255,255,255,0.88); transform: translateY(-1px); }
.btn-primary svg { width: 14px; height: 14px; transition: transform 0.3s ease; }
.btn-primary:hover svg { transform: translateX(3px); }
.btn-ghost {display: inline-flex; align-items: center; gap: 0.6rem;font-size: 10px;font-weight: 400;letter-spacing: 0.2em;text-transform: uppercase;color: rgba(255,255,255,0.6);background: none;border: none;cursor: pointer;pointer-events: all;transition: color 0.25s ease;text-decoration: none;}
.btn-ghost:hover { color: #fff; }
.btn-ghost .play-circle {width: 2.4rem; height: 2.4rem;border-radius: 50%;border: 0.5px solid rgba(255,255,255,0.35);display: flex; align-items: center; justify-content: center;transition: border-color 0.25s ease, background 0.25s ease;}
.btn-ghost:hover .play-circle {border-color: rgba(255,255,255,0.7);background: rgba(255,255,255,0.08);}
.btn-ghost svg { width: 10px; height: 10px; margin-left: 1px; }

/* ── BOTTOM BAR ── */
.bottombar {display: flex;justify-content: space-between;align-items: flex-end;opacity: 0;animation: fadeIn 1.2s ease 1.5s forwards;}
.scroll-hint {display: flex; flex-direction: column; align-items: center; gap: 0.5rem;font-size: 9px; letter-spacing: 0.22em; text-transform: uppercase;color: rgba(255,255,255,0.3);}
.scroll-line {width: 0.5px; height: 3rem;background: linear-gradient(to bottom, transparent, rgba(255,255,255,0.35));animation: scrollPulse 2.5s ease-in-out 2s infinite;}
@keyframes scrollPulse {
  0%, 100% { opacity: 0.4; transform: scaleY(1); transform-origin: top; }
  50% { opacity: 1; transform: scaleY(1.15); transform-origin: top; }
}
.meta-right {display: flex; flex-direction: column; align-items: flex-end; gap: 0.6rem;}
.meta-stat {display: flex; align-items: baseline; gap: 0.5rem;}
.meta-num {font-family: "Cormorant Garamond", serif;font-size: 1.5rem;font-weight: 300;color: #fff;letter-spacing: -0.02em;line-height: 1;}
.meta-label {font-size: 9px; letter-spacing: 0.2em;text-transform: uppercase;color: rgba(255,255,255,0.35);}
.meta-divider {width: 3rem; height: 0.5px;background: rgba(255,255,255,0.15);align-self: flex-end;}

/* ── MUTE TOGGLE ── */
.mute-btn {position: fixed;bottom: 2.5rem; right: 3.5rem;z-index: 20;background: rgba(255,255,255,0.07);border: 0.5px solid rgba(255,255,255,0.2);border-radius: 2px;color: rgba(255,255,255,0.55);font-size: 9px;font-family: "Inter", sans-serif;letter-spacing: 0.18em;text-transform: uppercase;padding: 0.5rem 0.9rem;cursor: pointer;display: flex; align-items: center; gap: 0.5rem;transition: background 0.25s, border-color 0.25s, color 0.25s;opacity: 0;animation: fadeIn 1s ease 2s forwards;}
.mute-btn:hover { background: rgba(255,255,255,0.12); border-color: rgba(255,255,255,0.45); color: #fff; }
.mute-btn svg { width: 13px; height: 13px; flex-shrink: 0; }

/* ── LOADING SCREEN ── */
#loader {position: fixed; inset: 0; z-index: 100;background: #0d2d62;display: flex; flex-direction: column;align-items: center; justify-content: center; gap: 1.5rem;transition: opacity 1.2s ease 0.3s, visibility 1.2s ease 0.3s;}
#loader.hidden { opacity: 0; visibility: hidden; }
.loader-brand {font-family: "Cormorant Garamond", serif;font-size: 2.5rem;font-weight: 300;letter-spacing: 0.4em;text-transform: uppercase;color: #F8F400;}
.loader-bar-wrap {width: 120px; height: 0.5px;background: rgba(255,255,255,0.1);overflow: hidden;}
.loader-bar {height: 100%;background: rgba(255,255,255,0.5);width: 0%;animation: loadBar 2.2s cubic-bezier(0.4, 0, 0.2, 1) forwards;}
@keyframes loadBar {
  to { width: 100%; }
}
.loader-label {font-size: 14px; letter-spacing: 0.25em; font-weight: 700; text-transform: uppercase;color: #ea3d3d;}

/* ── KEYFRAMES ── */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes slideUp {
  from { opacity: 0; transform: translateY(28px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ── CINEMATIC BARS (letterbox) ── */
.letterbox-top, .letterbox-bottom {position: fixed; left: 0; right: 0; z-index: 5;height: clamp(2rem, 4vh, 3.5rem);background: transparent;pointer-events: none;}/*background: #000*/
.letterbox-top { top: 0; }
.letterbox-bottom { bottom: 0; }

@media (max-width: 640px) {
    #ui { padding: 1.5rem; }
    .top-nav { display: none; }
    .meta-right { display: none; }
    .mute-btn { bottom: 1.5rem; right: 1.5rem; }
}

/*Youtube Background*/
.yt-overlay {display: none; position: fixed; inset: 0;background: rgba(0,0,0,0.75); z-index: 9999;align-items: center; justify-content: center;}
.yt-overlay.open { display: flex; }
.yt-modal {position: relative; width: min(860px, 92vw);background: #000; border-radius: 12px; overflow: hidden;}
.yt-modal iframe { display: block; width: 100%; aspect-ratio: 16/9; border: 0; }
.yt-close {position: absolute; top: 10px; right: 12px;background: rgba(0,0,0,.6); border: none; color: #fff;font-size: 22px; width: 36px; height: 36px;border-radius: 50%; cursor: pointer; z-index: 10;}