/* ============================================================
   SearaDesign — design system
   Dark warm editorial · amber ember · frosted-glass aurora
   ============================================================ */

:root{
  --bg:      #0e0c0a;   /* warm near-black */
  --bg-2:    #14110d;
  --surface: #1a1611;
  --ink:     #f7f2e9;   /* warm white */
  --ink-dim: #cdc4b6;
  --muted:   #9d9384;
  --faint:   #6d6455;
  --line:    rgba(247,242,233,.11);
  --line-2:  rgba(247,242,233,.06);
  --amber:   #f5a524;   /* accent */
  --amber-2: #ffbe4d;
  --ember:   #ef6c2a;
  --rose:    #e05a6d;
  --glass:   rgba(30,25,19,.55);
  --glass-hi:rgba(247,242,233,.05);
}

*{ -webkit-tap-highlight-color: transparent; }
html{ scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior: auto; } }

body{
  cursor: none;
  background: var(--bg);
  color: var(--ink);
  font-family: 'Inter', system-ui, sans-serif;
  font-feature-settings: "ss01","cv05";
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

/* ---------- Display type: wide grotesque ---------- */
.font-display{
  font-family: 'Archivo', 'Inter', sans-serif;
  font-variation-settings: 'wdth' 125, 'wght' 800;
  letter-spacing: -0.02em;
  line-height: 0.96;
  text-transform: uppercase;
}
.font-wide{
  font-family: 'Archivo', sans-serif;
  font-variation-settings: 'wdth' 125, 'wght' 600;
}
.display-fluid{ font-size: clamp(2.5rem, 7.6vw, 6.8rem); }
.display-xl{ font-size: clamp(2.2rem, 6.4vw, 5.4rem); }
.display-lg{ font-size: clamp(1.9rem, 4.6vw, 3.4rem); }

.label{
  font-family: 'Inter', sans-serif;
  text-transform: uppercase;
  letter-spacing: .28em;
  font-size: .68rem;
  font-weight: 600;
  color: var(--muted);
}
.mono-num{ font-variation-settings:'wdth' 110,'wght' 700; font-family:'Archivo',sans-serif; }

/* ---------- Aurora background ---------- */
.aurora{ position: fixed; inset: 0; z-index: -2; overflow: hidden; pointer-events: none; }
.aurora::before{
  content:""; position:absolute; inset:0;
  background: radial-gradient(120% 90% at 50% -10%, rgba(20,17,13,0) 40%, var(--bg) 100%);
}
.orb{ position:absolute; border-radius:50%; filter: blur(90px); opacity:.42; will-change: transform; }
.orb--amber{ width:46vw; height:46vw; background: radial-gradient(circle, rgba(245,165,36,.9), transparent 68%); top:-8vw; left:-6vw; animation: drift1 26s ease-in-out infinite; }
.orb--ember{ width:40vw; height:40vw; background: radial-gradient(circle, rgba(239,108,42,.85), transparent 66%); top:18vw; right:-10vw; animation: drift2 32s ease-in-out infinite; }
.orb--rose{  width:34vw; height:34vw; background: radial-gradient(circle, rgba(224,90,109,.6), transparent 68%);  bottom:-8vw; left:22vw; animation: drift3 38s ease-in-out infinite; }

@keyframes drift1{ 0%,100%{transform:translate(0,0) scale(1)} 50%{transform:translate(6vw,4vw) scale(1.12)} }
@keyframes drift2{ 0%,100%{transform:translate(0,0) scale(1)} 50%{transform:translate(-5vw,3vw) scale(1.08)} }
@keyframes drift3{ 0%,100%{transform:translate(0,0) scale(1)} 50%{transform:translate(4vw,-5vw) scale(1.15)} }

/* Grain overlay */
.grain{ position: fixed; inset:0; z-index:-1; 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='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }

/* ---------- Frosted glass ---------- */
.glass{
  background: var(--glass);
  backdrop-filter: blur(18px) saturate(1.2);
  -webkit-backdrop-filter: blur(18px) saturate(1.2);
  border: 1px solid var(--line);
  border-radius: 22px;
}
.glass-hair{ border:1px solid var(--line); border-radius: 20px; background: linear-gradient(180deg, rgba(247,242,233,.03), rgba(247,242,233,0)); }
.glass-nav{
  background: rgba(14,12,10,.55);
  backdrop-filter: blur(20px) saturate(1.3);
  -webkit-backdrop-filter: blur(20px) saturate(1.3);
  border: 1px solid var(--line);
}

/* ---------- Buttons ---------- */
.btn{ position:relative; display:inline-flex; align-items:center; gap:.6rem; font-weight:600; letter-spacing:.01em;
  border-radius:100px; transition: transform .4s cubic-bezier(.2,.7,.2,1), background .35s, color .35s, border-color .35s; }
.btn-amber{ background: var(--amber); color:#171208; padding:.95rem 1.6rem; box-shadow: 0 10px 34px -10px rgba(245,165,36,.55); }
.btn-amber:hover{ background: var(--amber-2); transform: translateY(-2px); }
.btn-ghost{ border:1px solid var(--line); color:var(--ink); padding:.95rem 1.6rem; background: var(--glass-hi); }
.btn-ghost:hover{ border-color: rgba(247,242,233,.45); transform: translateY(-2px); }
.btn-arrow{ width:2.9rem; height:2.9rem; border-radius:50%; border:1px solid var(--line); display:inline-flex; align-items:center; justify-content:center; transition:.4s cubic-bezier(.2,.7,.2,1); }
.btn-arrow:hover{ background:var(--amber); color:#171208; border-color:var(--amber); transform: rotate(45deg); }

.pill{ display:inline-flex; align-items:center; gap:.4rem; border:1px solid var(--line); border-radius:100px; padding:.4rem .85rem; font-size:.78rem; color:var(--ink-dim); background:var(--glass-hi); }

/* Spark / star motif */
.spark{ display:inline-block; }
.spark svg{ display:block; }
@keyframes spin-slow{ to{ transform: rotate(360deg); } }
.spin-slow{ animation: spin-slow 22s linear infinite; }

/* ---------- Links ---------- */
.link-underline{ position:relative; }
.link-underline::after{ content:""; position:absolute; left:0; bottom:-3px; height:1px; width:100%; background:currentColor; transform:scaleX(0); transform-origin:left; transition: transform .45s cubic-bezier(.2,.7,.2,1); }
.link-underline:hover::after{ transform:scaleX(1); }

.nav-link{ position:relative; color:var(--ink-dim); transition:color .3s; }
.nav-link:hover, .nav-link[aria-current="page"]{ color:var(--ink); }
.nav-link::after{ content:""; position:absolute; left:0; bottom:-6px; height:1px; width:0; background:var(--amber); transition: width .35s cubic-bezier(.2,.7,.2,1); }
.nav-link:hover::after, .nav-link[aria-current="page"]::after{ width:100%; }

/* ---------- Reveal on scroll ---------- */
[data-reveal]{ opacity:0; transform: translateY(28px); transition: opacity .9s cubic-bezier(.2,.7,.2,1), transform .9s cubic-bezier(.2,.7,.2,1); }
[data-reveal].in{ opacity:1; transform:none; }
[data-reveal-delay="1"]{ transition-delay:.08s; }
[data-reveal-delay="2"]{ transition-delay:.16s; }
[data-reveal-delay="3"]{ transition-delay:.24s; }
[data-reveal-delay="4"]{ transition-delay:.32s; }
[data-reveal-delay="5"]{ transition-delay:.40s; }

/* Line clip reveal for big headings */
.reveal-lines .rl{ display:block; overflow:hidden; padding-bottom:.09em; }
.reveal-lines .rl > span{ display:block; transform: translateY(105%); transition: transform 1s cubic-bezier(.16,1,.3,1); }
.reveal-lines.in .rl > span{ transform:none; }
.reveal-lines.in .rl:nth-child(2) > span{ transition-delay:.09s; }
.reveal-lines.in .rl:nth-child(3) > span{ transition-delay:.18s; }
.reveal-lines.in .rl:nth-child(4) > span{ transition-delay:.27s; }

/* ---------- Marquee ---------- */
.marquee{ overflow:hidden; white-space:nowrap; }
.marquee-track{ display:inline-flex; gap:3.5rem; align-items:center; animation: marq 34s linear infinite; }
@keyframes marq{ to{ transform: translateX(-50%); } }
.marquee:hover .marquee-track{ animation-play-state: paused; }

/* ---------- Project card ---------- */
.work-card{ position:relative; overflow:hidden; border-radius:20px; border:1px solid var(--line); background:var(--surface); }
.work-card img{ transition: transform 1.1s cubic-bezier(.16,1,.3,1), filter .6s; filter: grayscale(.35) contrast(1.02); }
.work-card:hover img{ transform: scale(1.06); filter: grayscale(0) contrast(1.05); }
.work-card__meta{ transition: transform .5s cubic-bezier(.2,.7,.2,1); }

/* Tilt */
.tilt{ transform-style: preserve-3d; transition: transform .3s cubic-bezier(.2,.7,.2,1); }

/* ---------- Custom cursor ---------- */
.cursor-dot,.cursor-ring{ position:fixed; top:0; left:0; z-index:120; pointer-events:none; border-radius:50%; mix-blend-mode: difference; }
.cursor-dot{ width:6px; height:6px; background:#fff; transform: translate(-50%,-50%); }
.cursor-ring{ width:38px; height:38px; border:1px solid rgba(255,255,255,.6); transform: translate(-50%,-50%); transition: width .3s, height .3s, background .3s; }
.cursor-ring.hover{ width:58px; height:58px; background: rgba(255,255,255,.12); }
@media (max-width: 1024px){ .cursor-dot,.cursor-ring{ display:none; } }

/* Field */
.field{ width:100%; background: rgba(247,242,233,.04); border:1px solid var(--line); border-radius:14px; padding:.95rem 1.05rem; color:var(--ink); transition:border-color .3s, background .3s; font-size:1rem; }
.field::placeholder{ color:var(--faint); }
.field:focus{ outline:none; border-color: var(--amber); background: rgba(247,242,233,.06); }
select.field{ appearance:none; }

/* Choice cards (wizard) */
.choice{ cursor:pointer; border:1px solid var(--line); border-radius:16px; padding:1.1rem 1.15rem; background: rgba(247,242,233,.03); transition: border-color .3s, background .3s, transform .3s; }
.choice:hover{ border-color: rgba(247,242,233,.4); transform: translateY(-2px); }
.choice[aria-checked="true"], .choice.sel{ border-color: var(--amber); background: rgba(245,165,36,.09); }

/* Step dots */
.step-line{ height:2px; background: var(--line); border-radius:2px; overflow:hidden; }
.step-line > span{ display:block; height:100%; background: linear-gradient(90deg,var(--amber),var(--ember)); width:0; transition: width .6s cubic-bezier(.2,.7,.2,1); }

/* Text gradient */
.text-amber-grad{ background: linear-gradient(100deg, var(--amber-2), var(--ember)); -webkit-background-clip:text; background-clip:text; color:transparent; }

/* Focus visibility */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible, [tabindex]:focus-visible{
  outline: 2px solid var(--amber); outline-offset: 3px; border-radius: 6px;
}

/* Section rule */
.hr{ height:1px; background:var(--line); border:0; }

/* Number counter accent bar */
.stat-bar{ width:34px; height:3px; border-radius:3px; background: linear-gradient(90deg,var(--amber),var(--ember)); }

/* Device frames */
.phone-frame{ border-radius: 34px; border: 8px solid #201a13; background:#0a0806; box-shadow: 0 40px 90px -30px rgba(0,0,0,.8), inset 0 0 0 1px rgba(247,242,233,.05); overflow:hidden; }
.laptop-frame{ border-radius: 14px 14px 0 0; border: 10px solid #201a13; border-bottom:0; background:#0a0806; box-shadow: 0 40px 90px -30px rgba(0,0,0,.8); overflow:hidden; }

/* ---------- Header + mobile drawer ---------- */
[data-header]{ transition: transform .4s ease; }
.nav-inner{ transition: background .4s, box-shadow .4s, border-color .4s; }
[data-header].is-scrolled .nav-inner{ box-shadow: 0 18px 50px -24px rgba(0,0,0,.7); }
[data-drawer]{ transition: opacity .35s ease; opacity:0; }
[data-drawer].open{ opacity:1; }
[data-drawer] .drawer-panel{ transform: translateY(-12px); transition: transform .4s cubic-bezier(.16,1,.3,1); }
[data-drawer].open .drawer-panel{ transform: none; }
.burger span{ transition: transform .35s, opacity .3s; transform-origin:center; }
.burger[aria-expanded="true"] span:nth-child(1){ transform: translateY(5px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.burger[aria-expanded="true"] span:nth-child(3){ transform: translateY(-5px) rotate(-45deg); }

/* Filter pills */
[data-filter]{ cursor:pointer; }
[data-filter][aria-pressed="true"]{ background: var(--amber); color:#171208; border-color: var(--amber); }

/* Lang toggle */
.lang-btn{ padding:.28rem .55rem; border-radius:100px; font-size:.72rem; font-weight:600; color:var(--muted); transition:.3s; }
.lang-btn[aria-pressed="true"]{ background: var(--amber); color:#171208; }

/* reduced motion */
@media (prefers-reduced-motion: reduce){
  .orb{ animation:none !important; }
  .spin-slow{ animation:none !important; }
  .marquee-track{ animation:none !important; }
  [data-reveal], .reveal-lines .rl > span{ transition:none !important; opacity:1 !important; transform:none !important; }
  .work-card img{ transition:none; }
}