/* ============================================================
   Swara FX — frontend styles
   ============================================================ */

:root {
  --sfx-orange: #FA9402;
  --sfx-night: #14100D;
  --sfx-bone: rgba(255, 245, 241, 0.92);
  --sfx-ink: #1C1410;
  --sfx-ease: cubic-bezier(0.22, 1, 0.36, 1);
}


/* ============ Lenis (required) ============
   Without the scroll-behavior override, a theme-level
   `html { scroll-behavior: smooth }` fights Lenis every frame —
   scrolling crawls, then lurches. Lenis stamps these classes on <html>. */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }
.lenis.lenis-smooth iframe { pointer-events: none; }


/* ============ Animated container backgrounds ============ */
.sfx-bg { position: relative; overflow: clip; }
.sfx-bg > *:not(.sfx-bg-layer) { position: relative; z-index: 1; }
.sfx-bg-layer {
  position: absolute;
  inset: 0;
  overflow: clip;
  pointer-events: none;
  z-index: 0;
}
.sfx-bg-grid {
  position: absolute;
  inset: -80px;
  background-image:
    linear-gradient(var(--sfx-grid-color, rgba(255, 245, 241, 0.045)) 1px, transparent 1px),
    linear-gradient(90deg, var(--sfx-grid-color, rgba(255, 245, 241, 0.045)) 1px, transparent 1px);
  background-size: 72px 72px;
  animation: sfx-grid-pan 34s linear infinite;
}
@keyframes sfx-grid-pan {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(72px, 72px, 0); }
}
.sfx-bg-blob {
  position: absolute;
  width: 58vmax;
  height: 58vmax;
  border-radius: 50%;
  filter: blur(72px);
  background: radial-gradient(circle, var(--sfx-blob-color), transparent 66%);
  will-change: transform;
}
.sfx-bg-blob--a { top: -22%; left: -14%; animation: sfx-glow-a 9s ease-in-out infinite alternate; }
.sfx-bg-blob--b { bottom: -26%; right: -12%; animation: sfx-glow-b 12s ease-in-out infinite alternate; }
@keyframes sfx-glow-a {
  0%   { transform: translate3d(0, 0, 0) scale(1); opacity: 0.85; }
  33%  { transform: translate3d(11vw, 8vh, 0) scale(1.22); opacity: 1; }
  66%  { transform: translate3d(-6vw, 12vh, 0) scale(0.92); opacity: 0.8; }
  100% { transform: translate3d(16vw, -4vh, 0) scale(1.15); opacity: 1; }
}
@keyframes sfx-glow-b {
  0%   { transform: translate3d(0, 0, 0) scale(1.1); opacity: 0.8; }
  33%  { transform: translate3d(-10vw, -9vh, 0) scale(0.88); opacity: 1; }
  66%  { transform: translate3d(6vw, -14vh, 0) scale(1.1); opacity: 0.85; }
  100% { transform: translate3d(-14vw, 4vh, 0) scale(0.95); opacity: 1; }
}
.sfx-bg-veil {
  position: absolute;
  inset: 0;
  background: rgba(20, 16, 13, 1);
}

/* ============ Smart-sticky glass header ============ */
.sfx-header {
  transition: transform 0.45s var(--sfx-ease), background-color 0.45s var(--sfx-ease),
    backdrop-filter 0.45s var(--sfx-ease), box-shadow 0.45s var(--sfx-ease);
}
.sfx-header--fixed {
  position: fixed !important;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
}
.sfx-header--hidden { transform: translateY(-100%); }
.sfx-header--glass {
  background: rgba(255, 245, 241, 0.85);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 1px 0 rgba(28, 20, 16, 0.08);
}

/* Single light glass — dark text on it, whatever section sits below. */
.sfx-header :is(a, span, p, li, .elementor-heading-title, .elementor-item, .elementor-button) {
  transition: color 0.45s var(--sfx-ease);
}
.sfx-header--glass :is(a, span, p, li, .elementor-heading-title, .elementor-item, .elementor-button) {
  color: var(--sfx-ink) !important;
}

/* Dropdown chevrons follow the dark-on-glass text */
.sfx-header .sub-arrow svg path { transition: fill 0.45s var(--sfx-ease); }
.sfx-header--glass .sub-arrow svg path { fill: var(--sfx-ink) !important; }

/* Shrink on scroll: tighter container padding + smaller logo. max-height (not
   transform) so the layout height really drops and the header gets shorter.
   Logo file swap (white ↔ pink) is handled in JS from the img src. */
.sfx-header .e-con-inner { transition: padding 0.35s var(--sfx-ease); }
.sfx-header--glass .elementor-element-d7d2940 > .e-con-inner {
  padding-top: 10px !important;
  padding-bottom: 10px !important;
}
.sfx-header .elementor-widget-theme-site-logo img,
.sfx-header .elementor-widget-image img { max-height: 110px; transition: max-height 0.35s var(--sfx-ease); }
.sfx-header--glass .elementor-widget-theme-site-logo img,
.sfx-header--glass .elementor-widget-image img { max-height: 42px; width: auto !important; }

/* Logged-in admin bar offset (32px desktop, 46px on small screens) */
body.admin-bar .sfx-header--fixed { top: 32px; }
@media (max-width: 782px) {
  body.admin-bar .sfx-header--fixed { top: 46px; }
}

/* ============ Scroll-fill gradient headings ============
   The gradient is applied to the element AND its inline parts (span/em/…),
   each reading --sfx-fill-color, so multi-color headings (e.g. the
   Unlimited Elements "Dual Color Heading") keep a distinct color per part —
   the JS "auto" mode stamps each part's own computed color onto it. The
   fill progress var (--sfx-fill) is animated once on the root and inherits. */
.sfx-fill-title { --sfx-fill: 0%; }
.sfx-fill-title,
.sfx-fill-title :is(span, em, strong, b, i) {
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent !important;
  background-image: linear-gradient(
    to right,
    var(--sfx-fill-color) 0%,
    var(--sfx-fill-color) calc(var(--sfx-fill) - 3%),
    var(--sfx-fill-base) calc(var(--sfx-fill) + 3%),
    var(--sfx-fill-base) 100%
  );
}

/* ============ Split-line reveals ============
   Each word is its own mask (outer clips, inner slides up); staggered per
   visual line this reads as the homepage's masked line reveal while leaving
   the original inline markup and colors untouched. The padding/margin pair
   gives ascenders/descenders room inside the clip. */
.sfx-w { display: inline-block; overflow: clip; padding-block: 0.14em; margin-block: -0.14em; }
.sfx-w__inner { display: inline-block; will-change: transform; }

/* ============ Vertical marquee ============ */
.sfx-marquee { overflow: clip; }
.sfx-marquee__track { display: flex; flex-direction: column; will-change: transform; }

/* ============ Grain overlay ============ */
.sfx-grain {
  position: fixed;
  inset: -50%;
  width: 200%;
  height: 200%;
  pointer-events: none;
  z-index: 200;
  opacity: 0.035;
  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.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: sfx-grain-shift 0.9s steps(4) infinite;
}
@keyframes sfx-grain-shift {
  0% { transform: translate(0, 0); }
  25% { transform: translate(-1.5%, 1%); }
  50% { transform: translate(1%, -1.5%); }
  75% { transform: translate(-1%, -1%); }
  100% { transform: translate(0, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .sfx-grain, .sfx-bg-grid, .sfx-bg-blob { animation: none; }
}

/* ============ Scroll progress bar ============ */
.sfx-thread {
  position: fixed;
  top: 0; left: 0; right: 0;
  width: 100%; height: 3px;
  background: rgba(28, 20, 16, 0.12);
  z-index: 150;
}
.sfx-thread__fill {
  display: block;
  width: 100%; height: 100%;
  background: var(--sfx-orange);
  transform-origin: left;
  transform: scaleX(0);
}

/* ============ Custom cursor ============ */
.sfx-cursor {
  position: fixed;
  top: 0; left: 0;
  width: 40px; height: 40px;
  margin: -20px 0 0 -20px;
  border: 1px solid var(--sfx-orange);
  border-radius: 50%;
  pointer-events: none;
  z-index: 300;
  display: grid;
  place-items: center;
  opacity: 0;
  transition: width 0.35s var(--sfx-ease), height 0.35s var(--sfx-ease),
    margin 0.35s var(--sfx-ease), opacity 0.3s;
}
.sfx-cursor__label {
  font-family: "Space Grotesk", ui-monospace, monospace;
  font-size: 9px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--sfx-orange);
  opacity: 0;
  transition: opacity 0.25s;
}
.sfx-cursor.is-active { width: 72px; height: 72px; margin: -36px 0 0 -36px; }
.sfx-cursor.is-active .sfx-cursor__label { opacity: 1; }
@media (hover: none), (pointer: coarse) { .sfx-cursor { display: none; } }

/* ============ YouTube modal ============ */
.sfx-modal {
  position: fixed;
  inset: 0;
  z-index: 400;
  display: grid;
  place-items: center;
  padding: 48px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s var(--sfx-ease), visibility 0s linear 0.4s;
}
.sfx-modal.is-open {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.4s var(--sfx-ease), visibility 0s linear 0s;
}
.sfx-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(20, 16, 13, 0.86);
  backdrop-filter: blur(6px);
}
.sfx-modal__box {
  position: relative;
  width: min(1000px, 100%);
  transform: scale(0.96);
  transition: transform 0.4s var(--sfx-ease);
}
.sfx-modal.is-open .sfx-modal__box { transform: scale(1); }
.sfx-modal__frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 12px;
  overflow: clip;
  background: var(--sfx-night);
  box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.6);
}
.sfx-modal__frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.sfx-modal__close {
  position: absolute;
  top: -48px; right: 0;
  display: grid;
  place-items: center;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: rgba(20, 16, 13, 0.4);
  border: 1px solid rgba(255, 245, 241, 0.5);
  color: var(--sfx-bone);
  cursor: pointer;
  padding: 0;
  transition: border-color 0.3s var(--sfx-ease), color 0.3s var(--sfx-ease),
    background 0.3s var(--sfx-ease), transform 0.3s var(--sfx-ease);
}
.sfx-modal__close svg { width: 18px; height: 18px; stroke: currentColor; stroke-width: 1.8; fill: none; }
.sfx-modal__close:hover { border-color: var(--sfx-orange); color: var(--sfx-orange); background: rgba(20, 16, 13, 0.6); transform: rotate(90deg); }
.sfx-modal__fallback {
  display: block;
  width: fit-content;
  margin: 24px auto 0;
  color: rgba(255, 245, 241, 0.55);
  font-family: "Space Grotesk", ui-monospace, monospace;
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  border-bottom: 1px solid var(--sfx-orange);
  padding-bottom: 6px;
}
@media (max-width: 640px) {
  .sfx-modal { padding: 16px; }
  .sfx-modal__close { top: -44px; width: 36px; height: 36px; }
}