/* ==========================================================================
   Meridian Ember - design tokens + animation mechanics
   --------------------------------------------------------------------------
   SCOPE: this file deliberately holds ONLY what Elementor cannot express:
     - the dark/light token blocks (they must switch on [data-theme])
     - pseudo-elements, keyframes, and JS animation hooks
     - cursor / curtain / marquee overlays
   Section layout, spacing, typography, colour and hover states live in
   Elementor as native controls. Do not re-add them here - two sources of
   truth is what makes builder sites unmaintainable.

   Elementor v4 emits its global variables as :root { --accent: ... }.
   The [data-theme] blocks below outrank :root on specificity, which is what
   lets the theme toggle repaint every Elementor-styled element.
   ========================================================================== */

/* ============ THEME TOKENS ============ */
html[data-theme="dark"]{
  --bg:#130b07;
  --bg-2:#1c110a;
  --bg-3:#241610;
  --text:#ffcea3;
  --text-strong:#ffe9d2;
  --muted:#8a7461;
  --accent:#ed3e35;
  --line:rgba(255,206,163,.16);
  --line-soft:rgba(255,206,163,.09);
  --card:#1c110a;
  --img-filter:saturate(.85) contrast(1.05);
  --nav-bg:rgba(19,11,7,.82);
}
html[data-theme="light"]{
  --bg:#f6ecdc;
  --bg-2:#efe1cb;
  --bg-3:#e7d6bc;
  --text:#1f1109;
  --text-strong:#120a05;
  --muted:#7a6653;
  --accent:#d3342b;
  --line:rgba(31,17,9,.18);
  --line-soft:rgba(31,17,9,.09);
  --card:#efe1cb;
  --img-filter:saturate(.9) contrast(1.02);
  --nav-bg:rgba(246,236,220,.85);
}
html{
  --ease-out:cubic-bezier(.22,1,.36,1);
  --font-display:'Oswald',sans-serif;
  --font-accent:'Fraunces',serif;
  --font-body:'Inter',sans-serif;
  --radius:18px;
}

/* ============ BASE ============ */
body{
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-body);
  overflow-x:hidden;
  transition:background .6s var(--ease-out), color .6s var(--ease-out);
}
::selection{background:var(--accent);color:#fff;}
html.lenis, html.lenis body{height:auto;}
.lenis.lenis-smooth{scroll-behavior:auto!important;}

/* ============ TYPE TREATMENTS ============ */
/* Cross-cutting treatments applied via Elementor's `classes` control. */
.display{
  font-family:var(--font-display);
  text-transform:uppercase;
  font-weight:600;
  letter-spacing:-.015em;
  line-height:.92;
  color:var(--text-strong);
}
.accent-it{
  font-family:var(--font-accent);
  font-style:italic;
  font-weight:400;
  text-transform:none;
  letter-spacing:0;
  color:var(--accent);
  /* descender reserve - Fraunces italic clips at .92 leading */
  line-height:1.1;
  padding-bottom:.06em;
}
.eyebrow::before{
  content:"";
  width:36px;
  height:1px;
  background:var(--accent);
  flex-shrink:0;
}

/* ============ CURSOR ============ */
.cursor-dot,.cursor-ring{position:fixed;top:0;left:0;pointer-events:none;z-index:150;border-radius:50%;}
.cursor-dot{width:6px;height:6px;background:var(--accent);}
.cursor-ring{width:34px;height:34px;border:1px solid var(--accent);opacity:.5;transition:width .3s,height .3s,opacity .3s;}
.cursor-ring.hovering{width:56px;height:56px;opacity:.9;}
@media (hover:none){.cursor-dot,.cursor-ring{display:none;}}

/* ============ CURTAIN ============ */
/* Markup lives in Breakdance footer. Keep mechanics here, no body.breakdance hide. */
#curtain{
  position:fixed;inset:0;z-index:200;background:#130b07;
  display:flex;align-items:center;justify-content:center;flex-direction:column;gap:24px;
}
#curtainWord{display:flex;overflow:hidden;}
#curtainWord span{
  font-family:var(--font-display),'Oswald',sans-serif;font-weight:600;font-size:clamp(40px,8vw,96px);
  text-transform:uppercase;color:#ffcea3;line-height:1;letter-spacing:.02em;
  display:inline-block;
}
#curtainBarTrack{width:min(280px,50vw);height:1px;background:rgba(255,206,163,.15);position:relative;overflow:hidden;}
#curtainBar{position:absolute;inset:0;background:#ed3e35;transform-origin:left;transform:scaleX(0);}

/* ============ HEADER STATE ============ */
/* .solid is toggled by ScrollTrigger; the base bar is styled in Elementor. */
.site-header{transition:background .5s,backdrop-filter .5s,border-color .5s;}
.site-header.solid{background:var(--nav-bg);backdrop-filter:blur(14px);border-bottom-color:var(--line-soft);}
html[data-theme="light"] .site-header{background:var(--nav-bg);backdrop-filter:blur(14px);}

/* theme toggle knob */
.theme-toggle .knob{transition:transform .5s var(--ease-out);}
html[data-theme="light"] .theme-toggle .knob{transform:translateX(24px);}
.theme-toggle svg{width:11px;height:11px;stroke:#fff;fill:none;stroke-width:2;}

/* ============ HERO MECHANICS ============ */
.hero-media img{width:100%;height:100%;object-fit:cover;filter:var(--img-filter) brightness(.62);}
html[data-theme="light"] .hero-media img{filter:var(--img-filter) brightness(.55);}
.hero-media::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to top, var(--bg) 2%, transparent 55%),
             linear-gradient(to bottom, rgba(8,4,2,.55) 0%, transparent 26%);
}
/* hero text sits on a dark scrim in both themes, so it keeps dark-mode ink */
html[data-theme="light"] .hero-scope .display{color:#ffe9d2;}
html[data-theme="light"] .hero-scope .hero-desc,
html[data-theme="light"] .hero-scope .hstat-num{color:#ffe9d2;}
html[data-theme="light"] .hero-scope .hstat-lbl,
html[data-theme="light"] .hero-scope .eyebrow{color:rgba(255,220,180,.78);}
html[data-theme="light"] .scroll-hint{color:rgba(255,220,180,.75);}

/* line masking for the staggered title reveal */
.line{display:block;overflow:hidden;padding-bottom:.04em;}
.line > *{display:block;transform:translateY(112%);}

.scroll-hint{writing-mode:vertical-rl;}
.scroll-hint .stem{width:1px;height:64px;background:var(--line);position:relative;overflow:hidden;}
.scroll-hint .stem i{position:absolute;top:-40%;left:0;width:100%;height:40%;background:var(--accent);animation:stemDrop 2s var(--ease-out) infinite;}
@keyframes stemDrop{0%{top:-40%}60%,100%{top:110%}}

/* ============ MARQUEE ============ */
.marquee-track{display:flex;width:max-content;will-change:transform;}
.marquee-track .seq{display:flex;align-items:center;white-space:nowrap;}
.marquee-track .seq span{
  font-family:var(--font-display);font-size:clamp(18px,2.2vw,28px);font-weight:500;
  text-transform:uppercase;letter-spacing:.08em;color:var(--muted);padding:0 28px;
}
.marquee-track .seq b{color:var(--accent);font-size:.7em;}

/* ============ SPLIT LINES ============ */
.split-lines .sl-line{display:block;overflow:hidden;line-height:inherit;padding-bottom:.08em;margin-bottom:-.08em;}
.split-lines .sl-inner{display:block;transform:translateY(110%);}

/* ============ COUNTDOWN ============ */
.cd-value{font-variant-numeric:tabular-nums;}
/* Holds each event's ISO target date as editable text in Elementor.
   Hidden visually; read by meridian.js. Needed because Elementor's atomic
   surface drops custom data-* attributes. */
.cd-target{display:none!important;}

/* ============ LEGACY CARD MEDIA ============ */
.lc-media::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to top,rgba(10,5,2,.55),transparent 55%);
}
.lc-media img{width:100%;height:112%;object-fit:cover;filter:var(--img-filter) brightness(.85);transition:transform .8s var(--ease-out);will-change:transform;}
.legacy-card:hover .lc-media img{transform:scale(1.02);}

/* ============ HAIRLINE ROW MOTION ============ */
/* Transform-based hover is a motion mechanic, kept here alongside the other
   GSAP-adjacent behaviour. Row borders, spacing and type live in Elementor. */
.service-row,.event-row,.tl-row{transition:transform .5s var(--ease-out);}
.service-row:hover,.event-row:hover,.tl-row:hover{transform:translateX(18px);}
.row-arrow{transition:transform .45s var(--ease-out),color .3s;}
.service-row:hover .row-arrow{transform:translateX(6px);color:var(--accent);}

/* ============ SUBSCRIBE FORM ============ */
/* The form lives in an `html` widget (no atomic form element exists), so its
   styling has to live here rather than in Elementor controls. */
.subscribe{border-top:1px solid var(--line);padding-top:34px;}
.subscribe h4{font-family:var(--font-display);text-transform:uppercase;font-size:18px;font-weight:600;letter-spacing:.06em;color:var(--text-strong);margin-bottom:20px;}
.sub-fields{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:16px;}
.sub-fields input,.sub-email{
  background:transparent;border:none;border-bottom:1px solid var(--line);
  padding:14px 2px;font-family:var(--font-body);font-size:15px;color:var(--text-strong);
  outline:none;transition:border-color .3s;width:100%;
}
.sub-fields input:focus,.sub-email:focus{border-color:var(--accent);}
.sub-fields input::placeholder,.sub-email::placeholder{color:var(--muted);}
.sub-email{margin-bottom:26px;display:block;}
.sub-btn{
  display:inline-flex;align-items:center;gap:14px;cursor:pointer;
  background:var(--accent);color:#fff;border:none;border-radius:99px;padding:16px 34px;
  font-family:var(--font-body);font-size:12px;letter-spacing:.2em;text-transform:uppercase;font-weight:600;
  transition:transform .4s var(--ease-out),box-shadow .4s;
}
.sub-btn:hover{transform:translateY(-3px);box-shadow:0 14px 34px -12px var(--accent);}
.sub-msg{font-size:13px;color:var(--accent);margin-top:16px;min-height:20px;}
@media(max-width:800px){.sub-fields{grid-template-columns:1fr;}}

/* ============ REVEAL UTIL ============ */
.reveal{opacity:0;transform:translateY(40px);}

/* ============ REDUCED MOTION ============ */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.001s!important;transition-duration:.001s!important;}
  .reveal{opacity:1;transform:none;}
  .line > *{transform:none;}
  .split-lines .sl-inner{transform:none;}
}

/* ============ EDITOR SAFETY ============ */
/* Never let opacity:0 hooks hide content inside the Elementor editor canvas. */
.elementor-editor-active .reveal,
.elementor-editor-active .line > *,
.elementor-editor-active .split-lines .sl-inner{opacity:1!important;transform:none!important;}
.elementor-editor-active #curtain,
.elementor-editor-active .cursor-dot,
.elementor-editor-active .cursor-ring{display:none!important;}