/* ============================================================
   style.css — Tokens, reset, base, buttons, loader, toggle
   BALAJI G — Colorful Film Editor Portfolio
   Purple primary + playful multi-colour accents
============================================================ */

/* ---------- DESIGN TOKENS ---------- */
:root {
  /* LIGHT MODE (default) */
  --bg: #F5F0FF;            /* soft lavender */
  --bg-2: #EDE6FF;          /* deeper lavender for bands */
  --surface: #FFFFFF;       /* cards */
  --text: #1C1330;          /* near-black purple */
  --muted: #6A6382;
  --border: #E6DDF7;

  /* Purple primary + gradient */
  --primary: #7C3AED;
  --primary-600: #6D28D9;
  --primary-100: #EDE4FF;
  --grad: linear-gradient(135deg, #8B5CF6 0%, #7C3AED 50%, #6D28D9 100%);

  /* Playful accent palette */
  --c-purple: #7C3AED;
  --c-pink:   #EC4899;
  --c-teal:   #14B8A6;
  --c-yellow: #F5B912;
  --c-blue:   #3B82F6;
  --c-coral:  #FB7185;
  --c-green:  #22C55E;

  /* Structure */
  --r-sm: 14px;
  --r: 22px;
  --r-lg: 34px;
  --pill: 999px;
  --gutter: clamp(1.25rem, 4vw, 5rem);
  --max: 1280px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --shadow: 0 18px 40px -20px rgba(124, 58, 237, 0.35);
  --shadow-hard: 6px 6px 0 var(--text);

  --font-display: "Clash Display", "Syne", "Plus Jakarta Sans", sans-serif;
  --font-body: "Plus Jakarta Sans", "Segoe UI", system-ui, sans-serif;
}

/* DARK MODE */
:root[data-theme="dark"] {
  --bg: #120C22;            /* deep purple-black */
  --bg-2: #1A1230;
  --surface: #1E1636;       /* cards */
  --text: #F3EEFF;
  --muted: #A79CC7;
  --border: #2E2450;

  --primary: #9B7BF0;
  --primary-600: #8B5CF6;
  --primary-100: #2A1F4D;
  --grad: linear-gradient(135deg, #A78BFA 0%, #8B5CF6 50%, #7C3AED 100%);

  --c-purple: #A78BFA;
  --c-pink:   #F472B6;
  --c-teal:   #2DD4BF;
  --c-yellow: #FBBF24;
  --c-blue:   #60A5FA;
  --c-coral:  #FB7185;
  --c-green:  #4ADE80;

  --shadow: 0 20px 50px -20px rgba(0, 0, 0, 0.7);
  --shadow-hard: 6px 6px 0 rgba(0,0,0,0.55);
}

/* ---------- RESET ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important; animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.6;
  overflow-x: hidden;
  transition: background 0.4s var(--ease), color 0.4s var(--ease);
  -webkit-font-smoothing: antialiased;
  /* subtle dotted texture */
  background-image: radial-gradient(var(--border) 1px, transparent 1px);
  background-size: 26px 26px;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
input, select, textarea { font-family: inherit; font-size: 1rem; }

@media (hover: none) { .cursor, .cursor-dot { display: none !important; } }

/* ---------- A11Y ---------- */
.skip-link {
  position: fixed; top: -100px; left: 1rem; z-index: 9999;
  background: var(--primary); color: #fff; padding: 0.75rem 1.25rem;
  border-radius: var(--pill); font-weight: 700; transition: top 0.2s var(--ease);
}
.skip-link:focus { top: 1rem; }
:focus-visible { outline: 3px solid var(--primary); outline-offset: 3px; border-radius: 6px; }

/* ---------- TYPOGRAPHY HELPERS ---------- */
.section { max-width: var(--max); margin: 0 auto; padding: clamp(3.5rem, 9vw, 8rem) var(--gutter); position: relative; }
.section__head { margin-bottom: clamp(2rem, 5vw, 3.5rem); text-align: center; }
.section__kicker {
  display: inline-block; color: var(--primary); font-weight: 700;
  letter-spacing: 0.02em; font-size: 0.95rem; margin-bottom: 0.6rem;
  background: var(--primary-100); padding: 0.35rem 0.9rem; border-radius: var(--pill);
}
.section__title {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(2.2rem, 6vw, 4rem); line-height: 1.02; letter-spacing: -0.02em;
}
.section__lead { color: var(--muted); font-size: 1.1rem; margin-top: 0.75rem; }

/* Highlighted words */
.hl { position: relative; white-space: nowrap; }
.hl--purple { color: var(--c-purple); }
.hl--pink { color: var(--c-pink); }
.hl--teal { color: var(--c-teal); }
.hl--coral { color: var(--c-coral); }
.hl::after {
  content: ""; position: absolute; left: -2%; right: -2%; bottom: 0.08em; height: 0.28em;
  background: currentColor; opacity: 0.18; border-radius: var(--pill); z-index: -1;
}

/* ---------- BUTTONS ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  padding: 0.95rem 1.6rem; font-weight: 700; font-size: 1rem;
  border-radius: var(--pill); transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease), background 0.25s var(--ease);
  will-change: transform;
}
.btn--primary { background: var(--grad); color: #fff; box-shadow: var(--shadow); }
.btn--primary:hover { transform: translateY(-3px) scale(1.02); box-shadow: 0 24px 44px -18px rgba(124,58,237,0.6); }
.btn--ghost { background: var(--surface); color: var(--text); border: 2px solid var(--border); }
.btn--ghost:hover { transform: translateY(-3px); border-color: var(--primary); color: var(--primary); }
.btn--block { width: 100%; }

/* ---------- REVEAL ---------- */
.reveal { opacity: 0; transform: translateY(34px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); will-change: opacity, transform; }
.reveal.is-visible { opacity: 1; transform: none; }

/* ---------- LOADER (story journey intro) ---------- */
.loader {
  position: fixed; inset: 0; z-index: 10000; overflow: hidden; background: transparent;
  display: grid; place-items: center;
}
/* Two background panels that split apart like a film cut on exit */
.loader__panel { position: absolute; left: 0; width: 100%; height: calc(50% + 1px); background: var(--bg); z-index: 1; transition: transform 0.8s cubic-bezier(0.76, 0, 0.24, 1); }
.loader__panel--top { top: 0; }
.loader__panel--bottom { bottom: 0; }
.loader.is-done .loader__panel--top { transform: translateY(-101%); }
.loader.is-done .loader__panel--bottom { transform: translateY(101%); }
.loader.is-done .loader__aura, .loader.is-done .loader__stage { opacity: 0; transition: opacity 0.35s var(--ease); }
/* Once the intro is finishing, let clicks pass through, then fully remove it.
   (Without these, the transparent full-screen loader keeps eating every click.) */
.loader.is-done { pointer-events: none; }
.loader[hidden] { display: none !important; }
body.is-loading { overflow: hidden; height: 100vh; }

/* Aurora gradient backdrop */
.loader__aura { position: absolute; inset: 0; pointer-events: none; z-index: 1; }
.loader__aura::before, .loader__aura::after {
  content: ""; position: absolute; width: 46vmax; height: 46vmax; border-radius: 50%; filter: blur(90px); opacity: 0.45;
}
.loader__aura::before { background: radial-gradient(circle, var(--c-purple), transparent 60%); top: -18%; left: -12%; animation: aura1 8s var(--ease) infinite; }
.loader__aura::after { background: radial-gradient(circle, var(--c-pink), transparent 60%); bottom: -18%; right: -12%; animation: aura2 9s var(--ease) infinite; }
@keyframes aura1 { 50% { transform: translate(18%, 14%) scale(1.2); } }
@keyframes aura2 { 50% { transform: translate(-16%, -12%) scale(1.15); } }

/* Floating doodles */
.loader__doodle { position: absolute; left: var(--x); top: var(--y); font-weight: 800; font-size: 2rem; line-height: 1; animation: floatY 6s var(--ease) infinite; }

/* Stage */
.loader__stage { position: relative; z-index: 2; display: grid; place-items: center; gap: 1.3rem; text-align: center; padding: 1rem; }

/* Twinkling sparkles (a little magic) */
.spark { position: absolute; width: 16px; height: 16px; opacity: 0; transform: scale(0); z-index: 2; background: var(--c-yellow); clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%); animation: twinkle 1.9s var(--ease) infinite; }
.spark--a { left: 20%; top: 28%; }
.spark--b { left: 76%; top: 32%; background: var(--c-pink); animation-delay: 0.5s; }
.spark--c { left: 66%; top: 68%; background: var(--c-teal); animation-delay: 1s; }
.spark--d { left: 26%; top: 66%; background: var(--c-blue); width: 12px; height: 12px; animation-delay: 1.4s; }
@keyframes twinkle { 0%, 100% { transform: scale(0) rotate(0deg); opacity: 0; } 50% { transform: scale(1) rotate(20deg); opacity: 1; } }

/* Journey scene: cycle -> bike -> car -> editing desk */
.journey { position: relative; width: min(360px, 82vw); height: 130px; }
.journey__road { position: absolute; left: 0; right: 0; bottom: 30px; height: 4px; border-radius: 2px; background: repeating-linear-gradient(90deg, var(--muted) 0 16px, transparent 16px 32px); opacity: 0.4; animation: roadmove 0.45s linear infinite; }
@keyframes roadmove { to { background-position: -32px 0; } }
.ride { position: absolute; left: 0; width: 100%; bottom: 36px; text-align: center; font-size: clamp(2.6rem, 10vw, 3.4rem); line-height: 1; opacity: 0; will-change: transform, opacity; }
.ride__v { display: inline-block; animation: bob 0.5s var(--ease) infinite; }
@keyframes bob { 50% { transform: translateY(-6px); } }
.ride--1 { animation: drive1 3s var(--ease) forwards; }
.ride--2 { animation: drive2 3s var(--ease) forwards; }
.ride--3 { animation: drive3 3s var(--ease) forwards; }
.ride--4 { animation: land 3s var(--ease) forwards; }
.clap { position: absolute; left: 50%; bottom: 92px; font-size: 1.9rem; transform: translateX(-50%) scale(0); opacity: 0; animation: clapPop 3s var(--ease) forwards; }
@keyframes drive1 { 0% { transform: translateX(200px); opacity: 0; } 5% { opacity: 1; } 9% { transform: translateX(0); } 18% { transform: translateX(0); opacity: 1; } 25% { transform: translateX(-230px); opacity: 0; } 100% { transform: translateX(-230px); opacity: 0; } }
@keyframes drive2 { 0%, 25% { transform: translateX(200px); opacity: 0; } 30% { opacity: 1; } 34% { transform: translateX(0); } 43% { transform: translateX(0); opacity: 1; } 50% { transform: translateX(-230px); opacity: 0; } 100% { transform: translateX(-230px); opacity: 0; } }
@keyframes drive3 { 0%, 50% { transform: translateX(200px); opacity: 0; } 55% { opacity: 1; } 59% { transform: translateX(0); } 68% { transform: translateX(0); opacity: 1; } 75% { transform: translateX(-230px); opacity: 0; } 100% { transform: translateX(-230px); opacity: 0; } }
@keyframes land { 0%, 75% { transform: translateX(200px); opacity: 0; } 80% { opacity: 1; } 86% { transform: translateX(0); } 100% { transform: translateX(0); opacity: 1; } }
@keyframes clapPop { 0%, 84% { transform: translateX(-50%) scale(0); opacity: 0; } 91% { transform: translateX(-50%) scale(1.2); opacity: 1; } 100% { transform: translateX(-50%) scale(1); opacity: 1; } }
@keyframes riseIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

/* Custom illustrated vehicles + editing desk */
.ride { bottom: 22px; font-size: 0; }
.ride svg { display: inline-block; width: clamp(160px, 48vw, 200px); height: auto; overflow: visible; }
.v-wheel { fill: var(--text); }
.v-hub { fill: var(--surface); }
.wheel { transform-box: fill-box; transform-origin: center; animation: spin 0.5s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.wave rect { transform-box: fill-box; transform-origin: 50% 100%; animation: wave 0.7s var(--ease) infinite; }
.wave rect:nth-child(2) { animation-delay: 0.1s; }
.wave rect:nth-child(3) { animation-delay: 0.2s; }
.wave rect:nth-child(4) { animation-delay: 0.3s; }
.wave rect:nth-child(5) { animation-delay: 0.4s; }
@keyframes wave { 0%, 100% { transform: scaleY(0.4); } 50% { transform: scaleY(1); } }
.tl-playhead { transform-box: fill-box; animation: playhead 1.3s var(--ease) infinite alternate; }
@keyframes playhead { from { transform: translateX(0); } to { transform: translateX(54px); } }

/* Brand wordmark + tagline + bar */
.loader__brand { font-family: var(--font-display); font-weight: 800; font-size: clamp(2rem, 7vw, 3.2rem); letter-spacing: 0.08em; background: linear-gradient(100deg, var(--c-purple), var(--c-pink), var(--c-teal), var(--c-purple)); background-size: 300% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: shimmer 3.5s linear infinite; }
@keyframes shimmer { to { background-position: 300% 0; } }
.loader__tag { color: var(--muted); font-weight: 600; font-size: clamp(0.85rem, 2vw, 1rem); letter-spacing: 0.02em; margin-top: -0.6rem; }
.loader__bar { width: min(240px, 62vw); height: 6px; border-radius: var(--pill); background: color-mix(in srgb, var(--border) 70%, transparent); overflow: hidden; }
.loader__bar span { display: block; height: 100%; width: 0%; background: var(--grad); border-radius: var(--pill); box-shadow: 0 0 12px color-mix(in srgb, var(--primary) 60%, transparent); }

/* ---------- THEME TOGGLE ---------- */
.theme-toggle {
  position: fixed; bottom: 1.5rem; right: 1.5rem; z-index: 950;
  width: 66px; height: 34px; border-radius: var(--pill);
  background: var(--bg-2); border: 2px solid var(--border);
  display: flex; align-items: center; padding: 3px; transition: background 0.3s var(--ease);
}
.theme-toggle__thumb {
  width: 26px; height: 26px; border-radius: 50%; background: var(--grad); color: #fff;
  display: grid; place-items: center; transition: transform 0.35s var(--ease);
  font-size: 0.85rem;
}
.theme-toggle__thumb .sun { display: none; }
.theme-toggle__thumb .moon { display: block; }
:root[data-theme="dark"] .theme-toggle__thumb { transform: translateX(32px); }
:root[data-theme="dark"] .theme-toggle__thumb .sun { display: block; }
:root[data-theme="dark"] .theme-toggle__thumb .moon { display: none; }
.theme-toggle:hover { border-color: var(--primary); }