/* ============================================================
   LADLA — Main Stylesheet v2.1
   No hardcoded colours. All values from tokens.css.
   ============================================================ */

/* === FONTS === */
@font-face {
  font-family:'Inter';
  src:url('../assets/fonts/inter-var-latin.woff2') format('woff2');
  font-weight:100 900; font-style:normal; font-display:swap;
}
@font-face {
  font-family:'JetBrains Mono';
  src:url('../assets/fonts/jetbrains-mono-var-latin.woff2') format('woff2');
  font-weight:100 800; font-style:normal; font-display:swap;
}

/* === BASE === */
.visually-hidden {
  position:absolute; width:1px; height:1px; padding:0;
  margin:-1px; overflow:hidden; clip:rect(0,0,0,0);
  white-space:nowrap; border:0;
}

html {
  background:var(--black);
  color:var(--white);
  font-family:var(--font-sans);
  font-size:16px;
  overflow-x:clip;
}

body {
  background:var(--black);
  min-height:100vh;
  overflow-x:clip;
  position:relative;
  /* CSS custom props for cursor-following light — set by background.js */
  --mouse-x: 50%;
  --mouse-y: 50%;
}

/* === SKIP LINK === */
.skip-link {
  position:fixed; top:var(--space-4); left:var(--space-4);
  z-index:100; padding:var(--space-3) var(--space-6);
  background:var(--cosmic); color:var(--white);
  font-size:var(--text-sm); font-weight:var(--weight-medium);
  border-radius:4px; opacity:0; pointer-events:none;
  transform:translateY(-8px);
  transition:opacity var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
}
.skip-link:focus { opacity:1; pointer-events:auto; transform:translateY(0); }

/* === FOCUS RING === */
:focus-visible {
  outline:2px solid var(--cosmic-bright);
  outline-offset:4px;
}

/* ============================================================
   BACKGROUND SYSTEM — Layered depth
   ============================================================ */

/* Canvas for particles — sits behind everything */
#bg-canvas {
  position:fixed; inset:0;
  z-index:-3;
  pointer-events:none;
  width:100%; height:100%;
}

/* Animated gradient mesh */
.bg-mesh {
  position:fixed; inset:0;
  z-index:-2;
  pointer-events:none;
  background:
    radial-gradient(ellipse 80% 60% at 20% 80%, var(--cosmic-faintest) 0%, transparent 60%),
    radial-gradient(ellipse 60% 80% at 80% 20%, var(--cosmic-faintest) 0%, transparent 60%),
    radial-gradient(ellipse 100% 100% at 50% 50%, var(--black-soft) 0%, var(--black) 100%);
  animation: meshShift 18s ease-in-out infinite alternate;
}

@keyframes meshShift {
  0%   { background-position: 20% 80%, 80% 20%, 50% 50%; }
  33%  { background-position: 60% 40%, 30% 70%, 50% 50%; }
  66%  { background-position: 10% 60%, 90% 40%, 50% 50%; }
  100% { background-position: 50% 20%, 50% 80%, 50% 50%; }
}

/* Noise grain overlay */
.bg-noise {
  position:fixed; inset:0;
  z-index:-1;
  pointer-events:none;
  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.72' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
  background-size:300px 300px;
  opacity:0.07;
  mix-blend-mode: overlay;
}

/* Cursor-following ambient light — updated via JS */
.bg-light {
  position:fixed; inset:0;
  z-index:0;
  pointer-events:none;
  background: radial-gradient(
    600px circle at var(--mouse-x) var(--mouse-y),
    var(--white-07) 0%,
    rgba(25,81,168,0.04) 35%,
    transparent 70%
  );
  transition:background 0.05s linear;
}

/* Glossy diagonal light streak */
.bg-streak {
  position:fixed;
  top:-30%; left:-15%;
  width:55%; height:220%;
  background:linear-gradient(
    108deg,
    transparent 42%,
    var(--white-07) 49%,
    var(--white-10) 50%,
    var(--white-07) 51%,
    transparent 58%
  );
  pointer-events:none;
  z-index:0;
  transform:rotate(0deg);
}

/* Mobile: no cursor light, simpler streak */
@media(max-width:767px) {
  .bg-light { background: radial-gradient(ellipse at 50% 0%, var(--white-05) 0%, transparent 60%); }
  .bg-streak { opacity:0.6; }
}

/* ============================================================
   NAV DOTS
   ============================================================ */
.scroll-nav {
  position:fixed; right:var(--space-6); top:50%;
  transform:translateY(-50%);
  z-index:var(--z-nav);
}
.scroll-nav__dots {
  display:flex; flex-direction:column;
  gap:var(--space-6); align-items:center;
}
.scroll-nav__dot {
  position:relative;
  display:flex; align-items:center; justify-content:center;
  width:22px; height:22px; border-radius:50%;
}
.scroll-nav__dot:focus-visible {
  outline:2px solid var(--cosmic-bright); outline-offset:3px;
}
.scroll-nav__dot::before {
  content:''; display:block;
  width:6px; height:6px; border-radius:50%;
  background:var(--white-20);
  transition:background var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
}
.scroll-nav__dot.is-active::before {
  background:var(--cosmic);
  box-shadow:0 0 14px var(--cosmic-glow), 0 0 4px var(--cosmic-glow);
  transform:scale(1.4);
}
.scroll-nav__dot:hover::before { background:var(--white-40); }

.scroll-nav__label {
  position:absolute; right:calc(100% + var(--space-3));
  white-space:nowrap;
  font-size:var(--text-xs); font-weight:var(--weight-medium);
  letter-spacing:var(--tracking-wide); color:var(--white-60);
  opacity:0; transform:translateX(8px);
  transition:opacity var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
  pointer-events:none;
}
.scroll-nav__dot:hover .scroll-nav__label,
.scroll-nav__dot:focus-visible .scroll-nav__label { opacity:1; transform:translateX(0); }

@media(max-width:767px) {
  .scroll-nav {
    right:unset; top:unset; bottom:16px; left:50%;
    transform:translateX(-50%);
    background:var(--black-soft);
    padding:var(--space-3) var(--space-4); border-radius:20px;
    border:1px solid var(--white-10);
  }
  .scroll-nav__dots { flex-direction:row; gap:var(--space-6); }
  .scroll-nav__dot { width:44px; height:44px; }
  .scroll-nav__dot::before { width:5px; height:5px; }
  .scroll-nav__label { display:none; }
}

/* ============================================================
   SECTION 1 — OPENING
   ============================================================ */
.section-opening {
  position:relative; min-height:100vh;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  text-align:center;
  padding:var(--space-16) var(--space-8);
  overflow:hidden;
}

/* Site wordmark — CSS text, not SVG */
.site-wordmark {
  display:inline-block;
  font-size:clamp(4rem, 7vw, 7rem);
  font-weight:var(--weight-black);
  letter-spacing:0.15em;
  color:var(--white);
  line-height:var(--leading-none);
  margin-bottom:var(--space-12);
  opacity:0;
  animation:fadeInDown var(--dur-slow) var(--ease-out) 300ms forwards;
}

/* Cosmic underline accent on the A */
.site-wordmark__accent {
  display:block;
  width:0; height:2px; margin-top:4px;
  background:var(--cosmic-shine);
  background-size:200% 100%;
  animation:
    accentExpand var(--dur-base) var(--ease-out) 1200ms forwards,
    shimmer 3s linear 1500ms infinite;
}

@keyframes accentExpand {
  from { width:0; } to { width:100%; }
}
@keyframes fadeInDown {
  from { opacity:0; transform:translateY(-16px); }
  to   { opacity:1; transform:translateY(0); }
}

/* Tagline */
.hero-tagline {
  font-size:var(--text-xl);
  font-weight:var(--weight-light);
  line-height:var(--leading-relaxed);
  color:var(--white-90);
  max-width:520px; text-align:center;
  min-height:5em;
  opacity:0;
  animation:fadeIn var(--dur-base) var(--ease-out) 700ms forwards;
}
@keyframes fadeIn { from{opacity:0} to{opacity:1} }

.typewriter-text { display:inline; }

.cursor {
  display:inline-block;
  color:var(--cosmic-bright);
  margin-left:1px;
  animation:blink 530ms step-end infinite;
  filter:drop-shadow(0 0 6px var(--cosmic-glow));
}
@keyframes blink { 50%{opacity:0} }

/* Scroll indicator */
.scroll-indicator {
  position:fixed; bottom:var(--space-8); left:50%;
  transform:translateX(-50%);
  z-index:var(--z-overlay);
  display:flex; flex-direction:column;
  align-items:center; gap:var(--space-2);
  opacity:0; transition:opacity var(--dur-slow) var(--ease-out);
}
.scroll-indicator.is-visible { opacity:1; }

.scroll-indicator__label {
  font-size:var(--text-xs); font-weight:var(--weight-medium);
  letter-spacing:var(--tracking-widest); text-transform:uppercase;
  color:var(--white-20);
}
.scroll-indicator__line {
  width:1px; height:44px;
  background:linear-gradient(to bottom, var(--white-20), transparent);
  position:relative; overflow:hidden;
}
.scroll-indicator__line::after {
  content:''; position:absolute; top:0; left:0; width:100%; height:100%;
  background:linear-gradient(to bottom, transparent, var(--cosmic-bright), transparent);
  animation:scrollPulse 1.8s ease-in-out infinite;
  filter:drop-shadow(0 0 3px var(--cosmic-glow));
}
@keyframes scrollPulse {
  0%   { transform:translateY(-100%); }
  100% { transform:translateY(200%); }
}

/* ============================================================
   SECTION 2 — SERVICES (kinetic word reveals)
   ============================================================ */
.section-services {
  position:relative;
  /* Height set by JS: 7 × 70vh = 490vh */
}

.services-sticky {
  position:sticky; top:0; height:100vh;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
}

/* Radial cosmic glow centred on active word */
.services-sticky::before {
  content:''; position:absolute; inset:0;
  background:radial-gradient(700px circle at 50% 50%, var(--cosmic-faint), transparent 65%);
  pointer-events:none; z-index:0;
  animation:glowPulse 4s ease-in-out infinite;
}
@keyframes glowPulse {
  0%,100% { opacity:0.6; }
  50%      { opacity:1; }
}

.service-word {
  position:absolute; top:50%; left:50%;
  /* Default: below (next word waiting) */
  transform:translate(-50%, calc(-50% + 44px)) scale(0.93);
  text-align:center;
  opacity:0;
  will-change:transform,opacity;
  z-index:1;
  width:90vw; max-width:var(--container-max);
  /* CSS handles smooth transitions — JS only switches the class */
  transition:opacity 480ms cubic-bezier(0.16,1,0.3,1),
             transform 480ms cubic-bezier(0.16,1,0.3,1);
}

.service-word.is-active {
  opacity:1;
  transform:translate(-50%, -50%) scale(1);
}

.service-word.is-above {
  opacity:0;
  transform:translate(-50%, calc(-50% - 44px)) scale(0.93);
}

.service-word__title {
  display:block;
  font-size:var(--text-7xl);
  font-weight:var(--weight-black);
  letter-spacing:var(--tracking-tight);
  line-height:var(--leading-none);
  color:var(--white);
  /* Scale and tracking shift applied by JS on active word */
}

/* Cosmic gradient on ampersand */
.cosmic-amp {
  background:var(--cosmic-shine);
  background-size:200% 100%;
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent;
  animation:shimmer 3s linear infinite;
}

.service-word__descriptor {
  display:block; margin-top:var(--space-4);
  font-size:var(--text-sm); font-weight:var(--weight-medium);
  letter-spacing:var(--tracking-wider); text-transform:uppercase;
  color:var(--white-40);
  opacity:0; transform:translateY(6px);
  transition:opacity 300ms var(--ease-out) 100ms,
              transform 300ms var(--ease-out) 100ms;
}
.service-word.is-active .service-word__descriptor {
  opacity:1; transform:translateY(0);
}

@media(max-width:767px) {
  .service-word__title { font-size:var(--text-4xl); }
}
@media(max-width:400px) {
  .service-word__title { font-size:var(--text-3xl); }
}
@media(min-width:1400px) {
  .service-word__title { font-size:8rem; }
}

/* ============================================================
   SECTION 3 — STATEMENT
   ============================================================ */
.section-statement {
  min-height:100vh;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  text-align:center;
  padding:var(--space-48) var(--space-8);
  position:relative; overflow:hidden;
}
.section-statement::after {
  content:''; position:absolute; bottom:0; left:50%;
  transform:translateX(-50%);
  width:100%; height:60%;
  background:radial-gradient(ellipse at 50% 100%, var(--cosmic-faint), transparent 70%);
  pointer-events:none; z-index:0;
}

.statement-text {
  position:relative; z-index:1;
  font-size:var(--text-4xl); font-weight:var(--weight-bold);
  line-height:var(--leading-tight); color:var(--white);
  max-width:var(--container-narrow); margin-inline:auto;
}
.statement-text .cosmic-period {
  background:var(--cosmic-shine); background-size:200% 100%;
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent;
  animation:shimmer 3s linear infinite;
}

.statement-support {
  position:relative; z-index:1;
  margin-top:var(--space-8);
  font-size:var(--text-base); font-weight:var(--weight-light);
  line-height:var(--leading-relaxed); color:var(--white-40);
  max-width:480px; margin-inline:auto;
}

@media(max-width:767px) {
  .statement-text { font-size:var(--text-3xl); }
  .section-statement { padding:var(--space-24) var(--space-6); }
}

/* ============================================================
   SECTION 4 — CONTACT (terminal)
   ============================================================ */
.section-contact {
  min-height:100vh;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  padding:var(--space-48) var(--space-8);
}

.terminal-wrap { width:100%; max-width:var(--container-narrow); }

.terminal-label {
  display:block;
  font-size:var(--text-xs); font-weight:var(--weight-medium);
  letter-spacing:var(--tracking-widest); text-transform:uppercase;
  color:var(--white); margin-bottom:var(--space-6);
}

/* Terminal panel */
.terminal {
  position:relative;
  padding:var(--space-8);
  border:1px solid var(--white-20);
  border-radius:6px;
  background:var(--black-soft);
  font-family:var(--font-mono); font-size:var(--text-lg);
  min-height:140px;
  animation:terminalIdlePulse 4s ease-in-out infinite;
  transition:border-color var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out),
              animation-play-state 0s;
}
@keyframes terminalIdlePulse {
  0%,100% { border-color:var(--white-20); box-shadow:none; }
  50%     { border-color:rgba(25,81,168,0.25); box-shadow:0 0 20px var(--cosmic-faint), inset 0 0 20px var(--cosmic-faintest); }
}
.terminal:focus-within {
  animation:none;
  border-color:var(--cosmic-glow);
  box-shadow:0 0 0 1px var(--cosmic-faint), 0 0 30px var(--cosmic-faint);
}

/* Terminal lines */
.terminal-line {
  display:flex; align-items:flex-start;
  gap:var(--space-3); line-height:var(--leading-normal);
  margin-bottom:var(--space-4);
  animation:lineAppear 200ms var(--ease-out) both;
}
.terminal-line:last-child { margin-bottom:0; }

@keyframes lineAppear {
  from { opacity:0; transform:translateY(4px); }
  to   { opacity:1; transform:translateY(0); }
}

.terminal-prompt {
  color:var(--white-60); flex-shrink:0; user-select:none;
}
.terminal-value { color:var(--white); flex:1; word-break:break-word; }
.terminal-value.is-done { color:var(--white-60); }

/* Live input */
.terminal-input-line { display:flex; align-items:center; gap:var(--space-3); }
.terminal-input-prompt {
  color:var(--white-60); flex-shrink:0;
  font-family:var(--font-mono); font-size:var(--text-lg); user-select:none;
}
.terminal-input {
  flex:1; background:none; border:none; outline:none;
  color:var(--white); font-family:var(--font-mono); font-size:var(--text-lg);
  caret-color:var(--cosmic-bright); line-height:var(--leading-normal);
}
.terminal-input::placeholder { color:var(--white-20); }

/* System / success / error */
.terminal-system { color:var(--white-40); font-style:italic; }
.terminal-success {
  background:var(--cosmic-shine); background-size:200% 100%;
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent;
  animation:shimmer 3s linear infinite;
}
.terminal-error { color:var(--danger); }

/* Cosmic sweep on submit */
.terminal-sweep {
  position:absolute; top:0; left:0;
  width:0; height:100%;
  background:linear-gradient(90deg, transparent, var(--cosmic-glow) 50%, transparent);
  pointer-events:none; opacity:0;
}
.terminal-sweep.is-sweeping { animation:sweep 600ms var(--ease-out) forwards; }
@keyframes sweep {
  0%   { opacity:1; width:0; left:0; }
  50%  { opacity:1; width:40%; }
  100% { opacity:0; width:20%; left:100%; }
}

/* Direct email fallback */
.contact-email-link {
  display:inline-block; margin-top:var(--space-6);
  font-family:var(--font-mono); font-size:var(--text-sm);
  color:var(--white); letter-spacing:var(--tracking-wide);
  transition:color var(--dur-fast);
}
.contact-email-link:hover,
.contact-email-link:focus-visible {
  color:transparent;
  background:var(--cosmic-shine); background-size:200% 100%;
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent;
  animation:shimmer 3s linear infinite;
}

/* Hidden real form */
.contact-form-hidden {
  position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden;
}

@media(max-width:767px) {
  .section-contact { padding:var(--space-24) var(--space-6); }
  .terminal { font-size:var(--text-base); padding:var(--space-6); }
  .terminal-input,
  .terminal-input-prompt { font-size:var(--text-base); }
}

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer {
  text-align:center;
  padding:var(--space-16) var(--space-8) var(--space-8);
}
.footer-divider {
  width:60px; height:1px;
  background:var(--white-10);
  margin:0 auto var(--space-12);
}
.footer-email {
  display:inline-block;
  font-family:var(--font-mono); font-size:var(--text-base);
  color:var(--white-60); letter-spacing:var(--tracking-wide);
  margin-bottom:var(--space-6);
  transition:color var(--dur-fast);
}
.footer-email:hover,
.footer-email:focus-visible {
  color:transparent;
  background:var(--cosmic-shine); background-size:200% 100%;
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent;
  animation:shimmer 3s linear infinite;
}
.footer-legal {
  display:flex; align-items:center; justify-content:center;
  gap:var(--space-3); margin-bottom:var(--space-4);
}
.footer-legal a {
  font-size:var(--text-xs); color:var(--white-40);
  letter-spacing:var(--tracking-wide);
  transition:color var(--dur-fast);
}
.footer-legal a:hover,
.footer-legal a:focus-visible { color:var(--white-60); }
.footer-legal-sep { font-size:var(--text-xs); color:var(--white-20); user-select:none; }
.footer-copy { font-size:var(--text-xs); color:var(--white-20); }

/* ============================================================
   COSMIC TEXT — shimmer treatment
   ============================================================ */
@keyframes shimmer {
  0%   { background-position:-200% center; }
  100% { background-position: 200% center; }
}

/* ============================================================
   REVEAL ANIMATIONS
   ============================================================ */
[data-reveal] {
  opacity:0; transform:translateY(24px);
  transition:opacity var(--dur-slow) var(--ease-smooth),
              transform var(--dur-slow) var(--ease-smooth);
}
[data-reveal].is-revealed { opacity:1; transform:translateY(0); }
[data-reveal][data-delay="200"] { transition-delay:200ms; }
[data-reveal][data-delay="400"] { transition-delay:400ms; }

/* ============================================================
   REDUCED MOTION — all at once
   ============================================================ */
@media(prefers-reduced-motion:reduce) {
  [data-reveal] { opacity:1; transform:none; transition:none; }
  .site-wordmark { opacity:1; animation:none; }
  .site-wordmark__accent { animation:none; width:100%; }
  .hero-tagline { opacity:1; animation:none; }
  .cursor { animation:none; opacity:1; }
  .scroll-indicator { opacity:1; }
  .scroll-indicator__line::after { animation:none; }
  .bg-mesh { animation:none; }
  .services-sticky::before { animation:none; }
  .terminal { animation:none; }
  .terminal-line { animation:none; }
  .terminal-sweep.is-sweeping { animation:none; }
  .cosmic-amp,.statement-text .cosmic-period,
  .terminal-success,.site-wordmark__accent { animation:none; }
  .service-word { transition:none; }
}