/* ===========================================================
   Edward Gebrael / Mentalist - shared design system
   Theme is locked dark on every page. The brand is a stage.
   Display face: Cinzel (inscribed roman capitals, theatre poster).
   Body face: Inter Tight.
   Radius system: buttons = pill, cards = 14px, inputs = 10px.
   Accent: spectral teal, used identically on every section.
   =========================================================== */

:root {
  color-scheme: dark;

  --ink:      #07090c;
  --ink-1:    #0c1015;
  --ink-2:    #131922;
  --line:     rgba(255, 255, 255, .085);
  --line-acc: rgba(79, 214, 200, .24);

  --fg:       #eef2f4;
  --fg-2:     #a9b4bf;
  --fg-3:     #72808d;

  --acc:      #4fd6c8;
  --acc-hi:   #8ceee2;
  --acc-deep: #0e3d39;

  --r-card:   14px;
  --r-input:  10px;

  --nav-h: 72px;

  --ease: cubic-bezier(.16, 1, .3, 1);
  --spring: cubic-bezier(.34, 1.35, .64, 1);

  --shadow-lift:  0 1px 0 rgba(255,255,255,.05) inset, 0 18px 44px -22px rgba(0,0,0,.9), 0 2px 10px -4px rgba(79,214,200,.10);
  --shadow-float: 0 1px 0 rgba(255,255,255,.07) inset, 0 34px 70px -28px rgba(0,0,0,.95), 0 4px 20px -8px rgba(79,214,200,.16);
}

* { -webkit-tap-highlight-color: transparent; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  background: var(--ink);
  color: var(--fg);
  font-family: 'Inter Tight', system-ui, -apple-system, sans-serif;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* ---------- type scale ----------
   Cinzel renders lowercase as small capitals, so every heading reads as an
   inscribed roman line. Sizes are tuned for caps, which read larger than
   the same nominal size in a lowercase face. */

h1, h2, h3, .display {
  font-family: 'Cinzel', 'Times New Roman', serif;
  font-weight: 600;
  letter-spacing: .005em;
  line-height: 1.18;
}

.h1-hero { font-size: clamp(1.62rem, 1.02rem + 2.5vw, 2.95rem); line-height: 1.16; }
.h1-page { font-size: clamp(1.52rem, 1rem + 2.1vw, 2.55rem); line-height: 1.17; }
.h2-sec  { font-size: clamp(1.34rem, .98rem + 1.7vw, 2.2rem);  line-height: 1.2; }
.h2-cta  { font-size: clamp(1.4rem, .98rem + 1.9vw, 2.4rem);   line-height: 1.19; }
.h2-sm   { font-size: clamp(1.2rem, .98rem + 1.1vw, 1.68rem);  line-height: 1.24; }
.h3-lg   { font-size: clamp(1.1rem, .98rem + .6vw, 1.38rem);   line-height: 1.28; }
.h3      { font-size: clamp(1rem, .94rem + .35vw, 1.16rem);    line-height: 1.3; }

/* Cinzel ships no italic, so emphasis inside headings is carried by colour and
   weight rather than a synthetic oblique. */
h1 em, h2 em, h3 em, .display em { font-style: normal; font-weight: 700; }

.font-body { font-family: 'Inter Tight', system-ui, sans-serif; }
.acc { color: var(--acc); }

/* Plain small-caps section label. No pill, no border, no chip. */
.label {
  font-family: 'Inter Tight', sans-serif;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--acc);
}

.lede { color: var(--fg-2); font-size: 1.02rem; line-height: 1.75; max-width: 62ch; }

.rule { height: 1px; background: linear-gradient(90deg, var(--line-acc), transparent); border: 0; }

/* ---------- scroll progress ---------- */

#scrollbar {
  position: fixed; top: 0; left: 0; height: 2px; z-index: 700;
  width: 100%; transform: scaleX(0); transform-origin: 0 50%;
  background: linear-gradient(90deg, var(--acc-deep), var(--acc), var(--acc-hi));
  pointer-events: none;
}

/* ---------- layered atmosphere: fog, comet, grain ---------- */

.fog { position: absolute; inset: -20% -10%; pointer-events: none; z-index: 0; overflow: hidden; }
.fog::before, .fog::after {
  content: ""; position: absolute; border-radius: 50%;
  filter: blur(70px); opacity: .5; will-change: transform;
}
.fog::before {
  width: 62vw; height: 62vw; left: -12vw; top: -8vw;
  background: radial-gradient(circle, rgba(79,214,200,.16), rgba(79,214,200,0) 68%);
  animation: drift-a 34s ease-in-out infinite alternate;
}
.fog::after {
  width: 54vw; height: 54vw; right: -14vw; bottom: -18vw;
  background: radial-gradient(circle, rgba(64,132,168,.16), rgba(64,132,168,0) 68%);
  animation: drift-b 44s ease-in-out infinite alternate;
}
@keyframes drift-a { from { transform: translate3d(0,0,0) scale(1); } to { transform: translate3d(7vw,5vh,0) scale(1.14); } }
@keyframes drift-b { from { transform: translate3d(0,0,0) scale(1.08); } to { transform: translate3d(-6vw,-6vh,0) scale(1); } }

/* A single turquoise ribbon of smoke that hangs behind the whole page. It drifts on its
   own and reacts to scrolling, so the page feels like one continuous space. Fixed layer,
   so it costs one canvas for the entire site rather than one per section. */
#smoke {
  position: fixed; inset: 0; width: 100%; height: 100%;
  z-index: 0; pointer-events: none;
  opacity: .6; filter: blur(4px);
  mix-blend-mode: screen;
}
/* Content sits above the ribbon; the page background stays below it. */
body > main, body > header, body > footer, #drawerBackdrop, #mobileDrawer { position: relative; z-index: 2; }
/* Cheaper blur on phones, where a full-screen filtered layer costs the most. */
@media (max-width: 640px) { #smoke { filter: blur(5px); opacity: .5; } }

.grain {
  position: fixed; inset: 0; z-index: 70; pointer-events: none;
  opacity: .05; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

.spotlight {
  position: absolute; inset: 0; pointer-events: none; z-index: 1;
  background: radial-gradient(620px circle at var(--mx, 62%) var(--my, 38%),
              rgba(79,214,200,.11), rgba(79,214,200,.03) 42%, transparent 68%);
  transition: background .5s ease;
}

/* ---------- brand wordmark ---------- */

.brand { display: inline-flex; align-items: center; }
.brand img {
  display: block; height: 30px; width: auto;
  transition: opacity .25s ease, transform .35s var(--ease), filter .35s ease;
}
.brand:hover img { transform: translateY(-1px); filter: drop-shadow(0 0 14px rgba(79,214,200,.5)); }
.brand:focus-visible { outline: 2px solid var(--acc); outline-offset: 6px; border-radius: 6px; }
.brand-lg img { height: 42px; }
@media (max-width: 400px) { .brand img { height: 24px; } }

/* ---------- navigation ---------- */

.nav-shell {
  position: fixed; top: 0; left: 0; right: 0; z-index: 500;
  height: var(--nav-h);
  background: rgba(7,9,12,.72);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid transparent;
  transition: background .3s ease, border-color .3s ease, transform .4s var(--ease);
}
.nav-shell.stuck { background: rgba(7,9,12,.94); border-bottom-color: var(--line); }
/* Hide the bar while scrolling down, bring it back the moment the user scrolls up. */
.nav-shell.hidden-up { transform: translateY(-100%); }
@media (prefers-reduced-transparency: reduce) {
  .nav-shell { background: #07090c; backdrop-filter: none; -webkit-backdrop-filter: none; }
}

.nav-link {
  position: relative; font-size: .875rem; font-weight: 600; color: var(--fg-2);
  padding: .5rem 0; letter-spacing: .01em;
  transition: color .22s var(--ease);
}
.nav-link::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: var(--acc); transform: scaleX(0); transform-origin: left;
  transition: transform .3s var(--ease);
}
.nav-link:hover, .nav-link:focus-visible { color: var(--fg); }
.nav-link:hover::after, .nav-link:focus-visible::after, .nav-link.current::after { transform: scaleX(1); }
.nav-link.current { color: var(--fg); }

.nav-item { position: relative; }
.nav-item::after {
  content: ""; position: absolute; left: -12px; right: -12px; top: 100%; height: 24px;
  opacity: 0; visibility: hidden; pointer-events: none;
}
.nav-item:hover::after, .nav-item:focus-within::after { opacity: 1; visibility: visible; pointer-events: auto; }

.nav-panel {
  position: absolute; top: calc(100% + 20px); left: -14px;
  width: 310px; padding: .5rem;
  background: #0e131a;
  border: 1px solid var(--line); border-radius: var(--r-card);
  box-shadow: var(--shadow-float);
  opacity: 0; visibility: hidden; transform: translateY(-8px);
  transition: opacity .24s var(--ease), transform .24s var(--ease), visibility 0s linear .42s;
  transition-delay: .18s;
}
.nav-item:hover .nav-panel, .nav-item:focus-within .nav-panel {
  opacity: 1; visibility: visible; transform: translateY(0); transition-delay: 0s;
}
.nav-panel a {
  display: block; padding: .7rem .8rem; border-radius: 9px;
  font-size: .86rem; font-weight: 600; color: var(--fg-2);
  transition: background .2s ease, color .2s ease, transform .2s var(--ease);
}
.nav-panel a span { display: block; font-size: .74rem; font-weight: 500; color: var(--fg-3); margin-top: .1rem; letter-spacing: 0; }
.nav-panel a:hover, .nav-panel a:focus-visible { background: rgba(79,214,200,.09); color: var(--fg); transform: translateX(3px); }
.nav-panel a:hover span, .nav-panel a:focus-visible span { color: var(--acc); }

/* ---------- animated hamburger ---------- */

#hamburger { transition: background .2s ease, border-color .2s ease; }
#hamburger:hover { background: rgba(79,214,200,.12) !important; border-color: rgba(79,214,200,.45) !important; }
#hamburger:focus-visible { outline: 2px solid var(--acc); outline-offset: 3px; }
.ham-lines { display: flex; flex-direction: column; gap: 5px; width: 18px; pointer-events: none; }
.ham-line {
  display: block; height: 1.5px; background: currentColor; border-radius: 2px;
  transition: transform .32s var(--spring), opacity .2s ease, width .32s var(--spring);
}
.ham-line:nth-child(2) { width: 12px; }
#hamburger.is-open .ham-line:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
#hamburger.is-open .ham-line:nth-child(2) { opacity: 0; width: 0; }
#hamburger.is-open .ham-line:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* ---------- mobile drawer ---------- */

#drawerBackdrop {
  position: fixed; inset: 0; z-index: 590; background: rgba(0,0,0,.55);
  opacity: 0; pointer-events: none; transition: opacity .35s ease;
}
#drawerBackdrop.open { opacity: 1; pointer-events: auto; }

#mobileDrawer {
  display: flex; position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 600;
  flex-direction: column; overflow-y: auto;
  min-height: 100vh; height: 100dvh;
  transform: translateX(100%); visibility: hidden;
  transition: transform .42s cubic-bezier(.32,.72,0,1), visibility 0s linear .42s;
}
#mobileDrawer.open {
  transform: translateX(0); visibility: visible;
  transition: transform .42s cubic-bezier(.32,.72,0,1), visibility 0s linear 0s;
}
/* Drawer links cascade in behind the panel. */
#mobileDrawer .drawer-link, #mobileDrawer .drawer-sub {
  opacity: 0; transform: translateX(18px);
  transition: opacity .4s var(--ease), transform .4s var(--ease);
}
#mobileDrawer.open .drawer-link, #mobileDrawer.open .drawer-sub { opacity: 1; transform: none; }
.drawer-link {
  display: block; padding: .85rem 0; font-family: 'Cinzel', serif; font-weight: 600;
  font-size: 1.22rem; color: var(--fg); border-bottom: 1px solid rgba(255,255,255,.06);
}
.drawer-link:hover, .drawer-link:focus-visible { color: var(--acc); }
.drawer-sub { display: block; padding: .5rem 0 .5rem 1rem; font-size: .92rem; font-weight: 600; color: var(--fg-2); }
.drawer-sub:hover, .drawer-sub:focus-visible { color: var(--acc); }

/* ---------- language pill toggle ---------- */

.lang-toggle {
  position: relative; display: inline-flex; align-items: center;
  background: rgba(79,214,200,.10); border: 1px solid rgba(79,214,200,.28);
  border-radius: 100px; padding: 3px; cursor: pointer; width: fit-content;
  transition: border-color .2s ease, background .2s ease;
}
.lang-toggle:hover { border-color: rgba(79,214,200,.5); background: rgba(79,214,200,.16); }
.lang-toggle:focus-visible { outline: 2px solid var(--acc); outline-offset: 3px; border-radius: 100px; }
.lang-pill {
  position: absolute; top: 3px; bottom: 3px; left: 3px; width: calc(50% - 3px);
  background: var(--acc); border-radius: 100px;
  transition: transform .35s var(--spring); pointer-events: none;
}
.lang-toggle.is-en .lang-pill { transform: translateX(100%); }
.lang-opt {
  position: relative; z-index: 1; font-size: .62rem; font-weight: 700; letter-spacing: .1em;
  padding: 4px 10px; color: rgba(238,242,244,.42); transition: color .25s ease;
  pointer-events: none; user-select: none;
}
.lang-toggle:not(.is-en) .lang-opt:nth-child(2),
.lang-toggle.is-en .lang-opt:nth-child(3) { color: #07090c; }

/* ---------- buttons ---------- */

.btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  white-space: nowrap; border-radius: 100px; overflow: hidden;
  font-weight: 700; font-size: .875rem; letter-spacing: .01em;
  padding: .85rem 1.7rem; cursor: pointer;
  transition: background .24s var(--ease), color .24s ease, border-color .24s ease,
              box-shadow .24s ease, transform .1s linear;
}
.btn > * { position: relative; z-index: 1; }
/* Light sweeps across the button on hover. */
.btn::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background: linear-gradient(105deg, transparent 30%, rgba(255,255,255,.35) 50%, transparent 70%);
  transform: translateX(-120%);
  transition: transform .7s var(--ease);
}
.btn:hover::before { transform: translateX(120%); }

.btn-primary {
  background: var(--acc); color: #06231f; border: 1px solid var(--acc);
  box-shadow: 0 12px 30px -14px rgba(79,214,200,.6);
}
.btn-primary:hover { background: var(--acc-hi); border-color: var(--acc-hi); box-shadow: 0 18px 40px -14px rgba(79,214,200,.75); }
.btn-primary:active { transform: scale(.975) !important; }
.btn-primary:focus-visible { outline: 2px solid var(--acc-hi); outline-offset: 3px; }

.btn-ghost { background: rgba(255,255,255,.03); color: var(--fg); border: 1px solid rgba(255,255,255,.16); }
.btn-ghost:hover { border-color: var(--acc); color: var(--acc); background: rgba(79,214,200,.07); }
.btn-ghost:active { transform: scale(.975) !important; }
.btn-ghost:focus-visible { outline: 2px solid var(--acc); outline-offset: 3px; }
.btn-ghost::before { background: linear-gradient(105deg, transparent 30%, rgba(79,214,200,.18) 50%, transparent 70%); }

/* ---------- surfaces ---------- */

.card {
  position: relative; background: var(--ink-1);
  border: 1px solid var(--line); border-radius: var(--r-card);
  box-shadow: var(--shadow-lift);
  transition: transform .3s var(--ease), border-color .3s ease, box-shadow .3s ease;
}
.card-link:hover, .card-link:focus-within {
  transform: translateY(-5px); border-color: var(--line-acc); box-shadow: var(--shadow-float);
}
.card-link:focus-visible { outline: 2px solid var(--acc); outline-offset: 3px; }

/* Cursor-tracked sheen on tilt cards. */
[data-tilt] { transform-style: preserve-3d; will-change: transform; }
[data-tilt] .sheen {
  position: absolute; inset: 0; z-index: 3; pointer-events: none; border-radius: inherit;
  background: radial-gradient(420px circle at var(--tx, 50%) var(--ty, 50%), rgba(79,214,200,.16), transparent 62%);
  opacity: 0; transition: opacity .35s ease;
}
[data-tilt]:hover .sheen { opacity: 1; }

.media { position: relative; overflow: hidden; border-radius: var(--r-card); }
.media img, .media .media-vid {
  display: block; width: 100%; height: 100%; object-fit: cover;
  transition: transform .7s var(--ease);
}
/* Footage is warm and bright; nudge it toward the site's cool palette so it sits
   in the same world as the stills. */
.media .media-vid { filter: saturate(.86) contrast(1.04) brightness(.88); }
.card-link:hover .media img, .card-link:hover .media .media-vid { transform: scale(1.045); }
.media::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to top, rgba(7,9,12,.82) 0%, rgba(7,9,12,.15) 55%, transparent 100%);
}
.media::before {
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: linear-gradient(150deg, rgba(79,214,200,.16), rgba(30,60,90,.22));
  mix-blend-mode: multiply;
}

/* ---------- scroll reveal ---------- */

.reveal    { opacity: 0; transform: translateY(14px); transition: opacity .35s ease, transform .35s ease; }
.reveal-l  { opacity: 0; transform: translateX(-26px); transition: opacity .5s var(--ease), transform .5s var(--ease); }
.reveal-r  { opacity: 0; transform: translateX(26px);  transition: opacity .5s var(--ease), transform .5s var(--ease); }
.reveal-sc { opacity: 0; transform: scale(.94);        transition: opacity .5s var(--ease), transform .6s var(--ease); }
.reveal.visible, .reveal-l.visible, .reveal-r.visible, .reveal-sc.visible { opacity: 1; transform: none; }

/* Headline words rise and sharpen, one after another. */
.split-line { display: block; }
.split-w {
  display: inline-block; opacity: 0;
  transform: translateY(.5em) rotate(1.5deg);
  filter: blur(5px);
  transition: opacity .55s var(--ease), transform .65s var(--ease), filter .55s ease;
}
.split.visible .split-w { opacity: 1; transform: none; filter: none; }

/* Photos wipe open from a curtain. */
.curtain { position: relative; overflow: hidden; }
.curtain::after {
  content: ""; position: absolute; inset: 0; z-index: 5;
  background: var(--ink); transform-origin: bottom;
  transition: transform .85s cubic-bezier(.76,0,.24,1);
}
.curtain.visible::after { transform: scaleY(0); }

/* ---------- decoding headline word ---------- */

.scramble {
  color: var(--acc); font-weight: 700; font-style: normal; position: relative; display: inline-block;
  line-height: 1.18; padding-bottom: .06em;
}
.scramble .sc-ghost { visibility: hidden; }
.scramble .sc-live { position: absolute; left: 0; top: 0; white-space: pre; }

/* ---------- count-up stats ---------- */

.stat-num { font-family: 'Cinzel', serif; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--acc); line-height: 1; }

/* ---------- logo marquee ---------- */

.marquee {
  position: relative; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee-track { display: flex; width: max-content; animation: slide var(--dur, 62s) linear infinite; will-change: transform; }
.marquee:hover .marquee-track, .marquee:focus-within .marquee-track { animation-play-state: paused; }
.marquee.rev .marquee-track { animation-direction: reverse; }
@keyframes slide { from { transform: translate3d(0,0,0); } to { transform: translate3d(-50%,0,0); } }
.marquee-item {
  display: flex; align-items: center; justify-content: center;
  height: 74px; padding: 0 2.3rem; flex: none;
}
.marquee-item img {
  max-height: 32px; max-width: 148px; width: auto; height: auto;
  object-fit: contain; opacity: .48;
  transition: opacity .35s ease, transform .35s var(--ease), filter .35s ease;
}
.marquee-item:hover img {
  opacity: 1; transform: scale(1.08);
  filter: drop-shadow(0 0 12px rgba(79,214,200,.45));
}

/* ---------- broadcast video card ----------
   The still already carries the show and network marks in frame, so it reads as
   "as seen on" without a floating logo lockup. */

.tv-card {
  position: relative; display: block; overflow: hidden;
  border-radius: var(--r-card);
  border: 1px solid var(--line-acc);
  box-shadow: var(--shadow-float);
  transition: transform .4s var(--ease), border-color .3s ease, box-shadow .3s ease;
}
.tv-card img { display: block; width: 100%; height: auto; transition: transform .8s var(--ease); }
.tv-card::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to top, rgba(7,9,12,.62), rgba(7,9,12,.06) 55%, transparent);
  transition: opacity .4s ease;
}
.tv-card:hover { transform: translateY(-4px); border-color: var(--acc); box-shadow: var(--shadow-float), 0 0 44px -12px rgba(79,214,200,.5); }
.tv-card:hover img { transform: scale(1.05); }
.tv-card:hover::after { opacity: .55; }
.tv-card:focus-visible { outline: 2px solid var(--acc); outline-offset: 4px; }

.tv-play {
  position: absolute; z-index: 2; left: 50%; top: 50%; transform: translate(-50%, -50%);
  display: grid; place-items: center; width: 74px; height: 74px; border-radius: 100px;
  background: rgba(79,214,200,.94); color: #06231f; font-size: 1.35rem;
  box-shadow: 0 14px 40px -10px rgba(0,0,0,.8);
  transition: transform .35s var(--spring), background .25s ease;
}
.tv-play::before {
  content: ""; position: absolute; inset: -10px; border-radius: 100px;
  border: 1px solid rgba(79,214,200,.55);
  animation: pulse-ring 2.8s ease-out infinite;
}
.tv-play i { margin-left: 4px; }
.tv-card:hover .tv-play { transform: translate(-50%, -50%) scale(1.1); background: var(--acc-hi); }
@keyframes pulse-ring {
  0%   { transform: scale(.85); opacity: .9; }
  70%  { transform: scale(1.32); opacity: 0; }
  100% { transform: scale(1.32); opacity: 0; }
}
@media (max-width: 640px) { .tv-play { width: 58px; height: 58px; font-size: 1.05rem; } }
@media (prefers-reduced-motion: reduce) { .tv-play::before { animation: none; } }

/* ---------- the card routine ---------- */

.deck { display: flex; flex-wrap: wrap; justify-content: center; gap: .75rem; perspective: 1400px; }

.pcard {
  position: relative; width: 92px; height: 132px; flex: none;
  transform-style: preserve-3d;
  transition: transform .62s var(--ease), opacity .4s ease;
}
@media (min-width: 640px) { .pcard { width: 108px; height: 155px; } }
.pcard-face, .pcard-back {
  position: absolute; inset: 0; border-radius: 10px;
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
  display: flex; flex-direction: column; justify-content: space-between;
  padding: .55rem .6rem; overflow: hidden;
}
.pcard-face {
  background: linear-gradient(160deg, #f7fafb, #dfe7ea);
  border: 1px solid rgba(0,0,0,.18);
  box-shadow: 0 10px 26px -12px rgba(0,0,0,.9);
  color: #10151b;
}
.pcard-face.red { color: #b8323c; }
.pcard-back {
  transform: rotateY(180deg);
  background:
    repeating-linear-gradient(45deg, rgba(79,214,200,.13) 0 6px, transparent 6px 12px),
    linear-gradient(160deg, #123037, #0a1418);
  border: 1px solid var(--line-acc);
  box-shadow: 0 10px 26px -12px rgba(0,0,0,.9);
  align-items: center; justify-content: center;
}
.pcard-back i { color: var(--acc); font-size: 1.5rem; opacity: .8; }
.pcard.flipped { transform: rotateY(180deg); }

.pcard-rank { font-family: 'Cinzel', serif; font-weight: 700; font-size: 1.15rem; line-height: 1; }
.pcard-suit-sm { font-size: .72rem; line-height: 1; margin-top: .12rem; }
.pcard-mid { position: absolute; inset: 0; display: grid; place-items: center; }
.pcard-mid svg { opacity: .92; }
.pcard-tr { align-self: flex-end; transform: rotate(180deg); }

.deck.shuffling .pcard { animation: shuffle .55s var(--ease); }
@keyframes shuffle {
  0%   { transform: rotateY(180deg) translateX(0) rotate(0); }
  40%  { transform: rotateY(180deg) translateX(var(--sx, 20px)) rotate(var(--sr, 8deg)); }
  100% { transform: rotateY(180deg) translateX(0) rotate(0); }
}
.pcard.gone { opacity: 0; transform: translateY(-26px) scale(.85); }

/* ---------- timeline (sequential steps) ---------- */

.timeline { position: relative; max-width: 780px; }
.tl-item { position: relative; display: flex; gap: 1.5rem; padding-bottom: 3rem; }
.tl-item:last-child { padding-bottom: 0; }
.tl-item:not(:last-child)::before {
  content: ""; position: absolute; left: 25px; top: 54px; bottom: 6px; width: 1px;
  background: linear-gradient(to bottom, var(--line-acc), rgba(255,255,255,.05));
  transform: scaleY(0); transform-origin: top;
  transition: transform .7s var(--ease) .15s;
}
.tl-item.visible:not(:last-child)::before { transform: scaleY(1); }
.tl-dot {
  position: relative; z-index: 1; flex: none;
  display: grid; place-items: center; width: 51px; height: 51px; border-radius: 100px;
  background: var(--ink-1); border: 1px solid var(--line-acc); color: var(--acc);
  box-shadow: 0 0 0 6px rgba(7,9,12,1);
  transition: transform .5s var(--spring), box-shadow .4s ease;
}
.tl-item.visible .tl-dot { animation: dot-pop .6s var(--spring); }
@keyframes dot-pop { 0% { transform: scale(.4); } 60% { transform: scale(1.12); } 100% { transform: scale(1); } }
.tl-body { padding-top: .35rem; }

@media (max-width: 640px) {
  .tl-item { gap: 1.1rem; }
  .tl-item:not(:last-child)::before { left: 21px; top: 46px; }
  .tl-dot { width: 43px; height: 43px; font-size: .88rem; }
}

/* ---------- accordion (FAQ) ---------- */

.acc-item { border-bottom: 1px solid var(--line); }
.acc-btn {
  width: 100%; display: flex; align-items: flex-start; justify-content: space-between; gap: 1.5rem;
  padding: 1.35rem 0; text-align: left; cursor: pointer;
  font-family: 'Cinzel', serif; font-weight: 600; font-size: 1rem; color: var(--fg);
  transition: color .22s ease;
}
.acc-btn:hover { color: var(--acc); }
.acc-btn:focus-visible { outline: 2px solid var(--acc); outline-offset: 4px; border-radius: 6px; }
.acc-btn i { flex: none; font-size: .8rem; color: var(--acc); margin-top: .3rem; transition: transform .32s var(--spring); }
.acc-item.open .acc-btn i { transform: rotate(135deg); }
.acc-body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .34s var(--ease); }
.acc-item.open .acc-body { grid-template-rows: 1fr; }
.acc-body > div { overflow: hidden; }
.acc-body p { color: var(--fg-2); padding-bottom: 1.4rem; max-width: 68ch; font-size: .95rem; }

/* ---------- forms ---------- */

.field { display: flex; flex-direction: column; gap: .45rem; }
.field label { font-size: .78rem; font-weight: 700; letter-spacing: .04em; color: var(--fg-2); text-transform: uppercase; }
.field input, .field select, .field textarea {
  width: 100%; background: #0b0f14; color: var(--fg);
  border: 1px solid rgba(255,255,255,.14); border-radius: var(--r-input);
  padding: .8rem 1rem; font-size: .93rem; font-family: inherit;
  transition: border-color .22s ease, box-shadow .22s ease, background .22s ease;
}
.field input::placeholder, .field textarea::placeholder { color: #7d8996; }
.field input:hover, .field select:hover, .field textarea:hover { border-color: rgba(255,255,255,.26); }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--acc); background: #0d1319;
  box-shadow: 0 0 0 3px rgba(79,214,200,.16);
}
.field .hint { font-size: .76rem; color: var(--fg-3); }
.field select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23a9b4bf' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 1rem center; padding-right: 2.4rem; }

#status { border-radius: var(--r-input); padding: .9rem 1.1rem; font-size: .9rem; font-weight: 600; }
#status.success { background: rgba(79,214,200,.12); border: 1px solid var(--line-acc); color: var(--acc-hi); }
#status.error   { background: rgba(232,110,110,.12); border: 1px solid rgba(232,110,110,.34); color: #f2a3a3; }

/* ---------- countdown ---------- */

.cd-unit {
  display: flex; flex-direction: column; align-items: center; gap: .35rem;
  min-width: 70px; padding: .9rem .4rem;
  background: var(--ink-1); border: 1px solid var(--line); border-radius: var(--r-card);
}
.cd-num { font-family: 'Cinzel', serif; font-weight: 700; font-size: 1.6rem; line-height: 1; color: var(--acc); font-variant-numeric: tabular-nums; }
.cd-lab { font-size: .62rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--fg-3); }


/* ---------- fixed social rail ----------
   Frosted glass so it sits on top of photography, video and the comet without
   competing with them. Solid fallback where transparency is reduced. */

.soc-rail {
  position: fixed; right: 20px; top: 50%;
  transform: translateY(-50%);
  z-index: 480;
  display: flex; flex-direction: column; gap: 10px;
}

.soc-orb {
  position: relative; display: grid; place-items: center;
  width: 42px; height: 42px; border-radius: 100px;
  font-size: .95rem; color: rgba(238, 242, 244, .72);
  background: linear-gradient(150deg, rgba(255,255,255,.10), rgba(255,255,255,.03));
  border: 1px solid rgba(255, 255, 255, .13);
  backdrop-filter: blur(11px) saturate(150%);
  -webkit-backdrop-filter: blur(11px) saturate(150%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.16),
    inset 0 -1px 0 rgba(255,255,255,.05),
    0 8px 22px -12px rgba(0,0,0,.85);
  transition: color .25s var(--ease), transform .3s var(--spring),
              border-color .25s ease, background .25s ease, box-shadow .3s ease;
}
.soc-orb:hover, .soc-orb:focus-visible {
  color: var(--acc);
  transform: translateX(-3px) scale(1.06);
  border-color: var(--line-acc);
  background: linear-gradient(150deg, rgba(79,214,200,.20), rgba(79,214,200,.06));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.24),
    0 10px 26px -12px rgba(0,0,0,.9),
    0 0 22px -6px rgba(79,214,200,.5);
}
.soc-orb:focus-visible { outline: 2px solid var(--acc); outline-offset: 3px; }
.soc-orb:active { transform: translateX(-3px) scale(.97); }

/* The shell caps at 1280px, so a free gutter only exists past roughly 1400px.
   Below that, hug the edge and shrink slightly so the rail grazes the page
   padding rather than sitting over content. */
@media (max-width: 1399px) {
  .soc-rail { right: 7px; gap: 8px; }
  .soc-orb { width: 37px; height: 37px; font-size: .86rem; }
}

@media (prefers-reduced-transparency: reduce) {
  .soc-orb { background: #10161d; backdrop-filter: none; -webkit-backdrop-filter: none; }
}

/* Below the tablet breakpoint the rail would sit over body copy, and the same three
   links are already in the drawer and the footer. */
@media (max-width: 767px) { .soc-rail { display: none; } }

/* Keep it clear of the mobile drawer when that is open. */
#mobileDrawer.open ~ .soc-rail { opacity: 0; pointer-events: none; }

/* ---------- footer ---------- */

.f-link { color: var(--fg-2); font-size: .88rem; transition: color .2s ease, transform .2s var(--ease); display: inline-block; }
.f-link:hover, .f-link:focus-visible { color: var(--acc); transform: translateX(3px); }
.soc {
  display: grid; place-items: center; width: 42px; height: 42px; border-radius: 100px;
  border: 1px solid var(--line); color: var(--fg-2); font-size: 1rem;
  transition: color .22s ease, border-color .22s ease, transform .22s var(--spring), background .22s ease;
}
.soc:hover, .soc:focus-visible { color: var(--acc); border-color: var(--line-acc); background: rgba(79,214,200,.08); transform: translateY(-3px) scale(1.06); }
.soc:focus-visible { outline: 2px solid var(--acc); outline-offset: 3px; }

/* ---------- reduced motion: everything collapses to static ---------- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .reveal, .reveal-l, .reveal-r, .reveal-sc { opacity: 1; transform: none; }
  .split-w { opacity: 1; transform: none; filter: none; }
  .curtain::after { transform: scaleY(0); }
  .tl-item:not(:last-child)::before { transform: scaleY(1); }
  .spotlight { background: radial-gradient(620px circle at 62% 38%, rgba(79,214,200,.11), transparent 68%); }
  .marquee-track { animation: none; }
  #smoke { display: none; }
  .nav-shell.hidden-up { transform: none; }
}

/* ---------- no-JS / JS-failure safety net ----------
   Content must never be permanently invisible because a script did not run. */

.no-js .reveal, .no-js .reveal-l, .no-js .reveal-r, .no-js .reveal-sc { opacity: 1; transform: none; }
.no-js .split-w { opacity: 1; transform: none; filter: none; }
.no-js .curtain::after { transform: scaleY(0); }
.no-js .tl-item:not(:last-child)::before { transform: scaleY(1); }
.no-js #scrollbar, .no-js #smoke { display: none; }
.no-js .deck { display: none; }