/* ============================================================
   SilverSpoon Studio — Atmosphere layer (v1)
   Ambient warmth, editorial annotations, micro-animations.
   Single accent (--accent), no second color introduced.
   ============================================================ */

:root {
  --warm-1: rgba(240, 168, 104, 0.55);
  --warm-2: rgba(240, 168, 104, 0.30);
  --warm-3: rgba(240, 168, 104, 0.14);
  --warm-edge: rgba(240, 168, 104, 0.06);
}

/* ----- the fixed ambient layer (sits behind everything) ----- */
.atmosphere {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.atmosphere > * { position: absolute; }

/* dotted blueprint grid — masked radial so it fades to nothing
   at the corners and never competes with content                */
.atm-grid {
  inset: 0;
  background-image: radial-gradient(circle at center,
      rgba(255, 255, 255, 0.085) 1px,
      transparent 1.4px);
  background-size: 36px 36px;
  background-position: 0 0;
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 38%,
      #000 0%, rgba(0,0,0,0.55) 45%, transparent 80%);
          mask-image: radial-gradient(ellipse 70% 60% at 50% 38%,
      #000 0%, rgba(0,0,0,0.55) 45%, transparent 80%);
  opacity: 0.85;
}

/* slow horizontal drift of the grid — barely perceptible       */
@keyframes atm-grid-drift {
  from { background-position: 0 0; }
  to   { background-position: 36px 36px; }
}
.atm-grid { animation: atm-grid-drift 22s linear infinite; }

/* film-grain noise overlay, ~1.2% opacity, scaled large        */
.atm-grain {
  inset: -20%;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1   0 0 0 0 1   0 0 0 0 1   0 0 0 0.55 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.6'/></svg>");
  background-size: 240px 240px;
  opacity: 0.05;
  mix-blend-mode: overlay;
  animation: atm-grain 6s steps(6) infinite;
}
@keyframes atm-grain {
  0%   { transform: translate3d( 0%,   0%, 0); }
  20%  { transform: translate3d(-3%,   2%, 0); }
  40%  { transform: translate3d( 2%,  -3%, 0); }
  60%  { transform: translate3d(-2%,  -2%, 0); }
  80%  { transform: translate3d( 3%,   3%, 0); }
  100% { transform: translate3d( 0%,   0%, 0); }
}

/* drifting warm orbs — the "Marbella sun" wandering behind     */
.atm-orb {
  border-radius: 50%;
  filter: blur(70px);
  mix-blend-mode: screen;
  opacity: 0.85;
}
.atm-orb.a {
  width: 720px; height: 720px;
  left: -180px; top: -280px;
  background: radial-gradient(circle at 50% 50%,
      var(--warm-1) 0%, var(--warm-2) 30%, var(--warm-edge) 60%, transparent 70%);
  animation: orb-a 28s ease-in-out infinite alternate;
}
.atm-orb.b {
  width: 520px; height: 520px;
  right: -140px; top: 18%;
  background: radial-gradient(circle at 50% 50%,
      var(--warm-2) 0%, var(--warm-edge) 50%, transparent 70%);
  animation: orb-b 34s ease-in-out infinite alternate;
}
.atm-orb.c {
  width: 640px; height: 640px;
  left: -120px; bottom: -200px;
  background: radial-gradient(circle at 50% 50%,
      var(--warm-1) 0%, var(--warm-3) 35%, transparent 70%);
  animation: orb-c 40s ease-in-out infinite alternate;
}
.atm-orb.d {
  width: 480px; height: 480px;
  right: 8%; bottom: -160px;
  background: radial-gradient(circle at 50% 50%,
      var(--warm-2) 0%, var(--warm-edge) 50%, transparent 70%);
  animation: orb-d 32s ease-in-out infinite alternate;
}

@keyframes orb-a {
  0%   { transform: translate3d(0, 0, 0)        scale(1); opacity: 0.85; }
  50%  { transform: translate3d(60px, 40px, 0)  scale(1.08); opacity: 1; }
  100% { transform: translate3d(-30px, 70px, 0) scale(0.95); opacity: 0.75; }
}
@keyframes orb-b {
  0%   { transform: translate3d(0, 0, 0)        scale(1);   opacity: 0.7; }
  50%  { transform: translate3d(-80px, 50px, 0) scale(1.1); opacity: 0.95; }
  100% { transform: translate3d(20px, 120px, 0) scale(0.9); opacity: 0.65; }
}
@keyframes orb-c {
  0%   { transform: translate3d(0, 0, 0)         scale(1);   opacity: 0.7; }
  50%  { transform: translate3d(40px, -60px, 0)  scale(1.05); opacity: 0.9; }
  100% { transform: translate3d(-50px, -30px, 0) scale(0.95); opacity: 0.7; }
}
@keyframes orb-d {
  0%   { transform: translate3d(0, 0, 0)          scale(1);   opacity: 0.8; }
  50%  { transform: translate3d(-50px, -80px, 0)  scale(1.08); opacity: 1; }
  100% { transform: translate3d(40px, -30px, 0)   scale(0.92); opacity: 0.7; }
}

/* vignette darkens corners so content stays the focus           */
.atm-vignette {
  inset: 0;
  background:
    radial-gradient(ellipse 85% 70% at 50% 40%, transparent 60%, rgba(0,0,0,0.45) 100%);
  pointer-events: none;
}

/* bottom horizon — a warm sunset band just below the fold       */
.atm-horizon {
  left: 0; right: 0; bottom: 0;
  height: 460px;
  background:
    radial-gradient(120% 100% at 50% 100%,
      rgba(240, 168, 104, 0.18) 0%,
      rgba(240, 168, 104, 0.06) 28%,
      transparent 55%);
  pointer-events: none;
  opacity: 0.7;
}

/* lift everything above the atmosphere                          */
body > #root,
body > header,
body > main,
body > footer { position: relative; z-index: 1; }

/* ============================================================
   Hero — sun arc behind the studio panel, scanning beam
   ============================================================ */

.hero { isolation: isolate; }

/* a faint horizon line + sun disc behind the hero column        */
.hero::before {
  content: "";
  position: absolute;
  z-index: 0;
  right: -120px; top: 40px;
  width: 640px; height: 640px;
  background:
    radial-gradient(circle at 50% 50%,
      rgba(240,168,104,0.30) 0%,
      rgba(240,168,104,0.12) 30%,
      transparent 60%),
    conic-gradient(from 200deg at 50% 50%,
      transparent 0deg,
      rgba(240,168,104,0.10) 60deg,
      transparent 120deg);
  border-radius: 50%;
  pointer-events: none;
  filter: blur(2px);
  opacity: 0.9;
  animation: sun-drift 18s ease-in-out infinite alternate;
}
@keyframes sun-drift {
  from { transform: translate3d(0,0,0) scale(1); opacity: 0.85; }
  to   { transform: translate3d(-30px, 12px, 0) scale(1.05); opacity: 1; }
}

/* faint horizon line through the hero band                      */
.hero::after {
  content: "";
  position: absolute;
  left: -20vw; right: -20vw; top: 65%;
  height: 1px;
  background: linear-gradient(to right,
    transparent 0%,
    rgba(240,168,104,0.0) 10%,
    rgba(240,168,104,0.35) 50%,
    rgba(240,168,104,0.0) 90%,
    transparent 100%);
  z-index: 0;
  pointer-events: none;
  opacity: 0.5;
}

/* keep the existing radial glow but soften it                    */
.glow-top { opacity: 0.55; }

/* scanning beam across the studio-panel — slow, ambient          */
.studio-panel { position: relative; }
.studio-panel::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg,
    transparent 0%,
    transparent 38%,
    rgba(240,168,104,0.10) 50%,
    transparent 62%,
    transparent 100%);
  background-size: 240% 100%;
  background-position: 200% 0;
  pointer-events: none;
  border-radius: inherit;
  animation: scan 9s linear infinite;
  mix-blend-mode: screen;
}
@keyframes scan {
  0%   { background-position: 200% 0; }
  60%  { background-position: -100% 0; }
  100% { background-position: -100% 0; }
}

/* the studio-panel gets a subtle warm rim so it lifts off black   */
.studio-panel {
  box-shadow:
    0 1px 0 rgba(255,255,255,0.04) inset,
    0 30px 80px -40px rgba(240,168,104,0.25),
    0 0 0 1px rgba(255,255,255,0.02);
}

/* ============================================================
   Editorial corner annotations — small mono labels in margins
   ============================================================ */

.section .wrap { position: relative; }

/* base annotation styling                                        */
.section-annotation {
  position: absolute;
  top: -32px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(252, 253, 255, 0.45);
  white-space: nowrap;
  pointer-events: none;
  text-shadow: 0 0 8px rgba(0,0,0,0.6);
  display: inline-flex; align-items: center; gap: 8px;
  z-index: 2;
}
.section-annotation.idx { left: 32px; }
.section-annotation.geo { right: 32px; }
.section-annotation.idx::before {
  content: ""; width: 4px; height: 4px; border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 6px var(--accent-glow-strong);
}

@media (max-width: 720px) {
  .section-annotation { display: none; }
}

/* ============================================================
   Section-level atmospheric tints
   Each section gets a different warm wash so the dark canvas
   reads as composed, not flat.
   ============================================================ */

#trust   { background: radial-gradient(80% 60% at 90% 0%,  rgba(240,168,104,0.05) 0%, transparent 55%); }
#services{ background: radial-gradient(70% 70% at 10% 30%, rgba(240,168,104,0.06) 0%, transparent 55%); }
#pricing { background: radial-gradient(85% 70% at 50% 0%,  rgba(240,168,104,0.07) 0%, transparent 55%); }
#process { background: radial-gradient(60% 80% at 100% 70%,rgba(240,168,104,0.05) 0%, transparent 55%); }
#request { background: radial-gradient(75% 75% at 50% 40%, rgba(240,168,104,0.07) 0%, transparent 55%); }
#why     { background: radial-gradient(60% 80% at 5% 50%,  rgba(240,168,104,0.06) 0%, transparent 55%); }
#faq     { background: radial-gradient(80% 70% at 60% 100%,rgba(240,168,104,0.04) 0%, transparent 55%); }

/* ============================================================
   Trust grid — subtle warm wash, animated cell hover
   ============================================================ */

.trust-cell { transition: background 240ms ease, border-color 240ms ease; }
.trust-cell:hover {
  background: rgba(240, 168, 104, 0.025);
  border-color: rgba(240, 168, 104, 0.2);
}
.trust-cell .label {
  display: inline-flex; align-items: center; gap: 6px;
}
.trust-cell .label::before {
  content: ""; width: 5px; height: 5px; border-radius: 50%;
  background: var(--accent); box-shadow: 0 0 8px var(--accent-glow-strong);
}

/* ============================================================
   Service cards — top-edge accent + hover sheen
   ============================================================ */

.service-card { isolation: isolate; overflow: hidden; }
.service-card::before {
  content: "";
  position: absolute; left: 0; right: 0; top: 0;
  height: 1px;
  background: linear-gradient(to right,
    transparent 0%,
    rgba(240,168,104,0.0) 20%,
    rgba(240,168,104,0.6) 50%,
    rgba(240,168,104,0.0) 80%,
    transparent 100%);
  opacity: 0;
  transition: opacity 320ms ease;
  z-index: 1;
}
.service-card:hover::before { opacity: 1; }
.service-card::after {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(circle at var(--mx, 50%) var(--my, 0%),
    rgba(240,168,104,0.08) 0%, transparent 35%);
  opacity: 0;
  transition: opacity 320ms ease;
  pointer-events: none;
  z-index: 0;
}
.service-card:hover::after { opacity: 1; }
.service-card > * { position: relative; z-index: 2; }

/* the service number gets a small underline                       */
.service-num {
  display: inline-flex !important; align-items: center; gap: 10px;
}
.service-num::after {
  content: ""; flex: 0 0 32px; height: 1px;
  background: linear-gradient(to right, var(--accent), transparent);
}

/* ============================================================
   Pricing — featured tier gets an animated spine glow
   ============================================================ */

.tier.featured {
  position: relative;
  overflow: hidden;
}
.tier.featured::before {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg,
    rgba(240,168,104,0.10) 0%,
    transparent 35%);
  pointer-events: none;
  z-index: 0;
}
.tier.featured > * { position: relative; z-index: 1; }

.pricing-ongoing {
  position: relative;
  overflow: hidden;
}
.pricing-ongoing::before {
  content: "";
  position: absolute; left: -10%; right: -10%; top: -50%;
  height: 200px;
  background: radial-gradient(60% 100% at 50% 100%,
    rgba(240,168,104,0.16) 0%, transparent 60%);
  pointer-events: none;
  z-index: 0;
}
.pricing-ongoing > * { position: relative; z-index: 1; }

/* ============================================================
   Process — connecting thread between steps + animated number
   ============================================================ */

.process-grid {
  position: relative;
}
@media (min-width: 901px) {
  .process-grid::before {
    content: "";
    position: absolute;
    left: 12%; right: 12%; top: 56px;
    height: 1px;
    background:
      repeating-linear-gradient(to right,
        rgba(240,168,104,0.35) 0 6px,
        transparent 6px 14px);
    z-index: 0;
    opacity: 0.65;
  }
}
.process-step {
  position: relative; z-index: 1;
  background: linear-gradient(180deg,
    rgba(10,10,12,0.92) 0%, var(--surface-card) 100%);
  transition: border-color 240ms ease, transform 240ms ease;
}
.process-step:hover {
  transform: translateY(-2px);
  border-color: rgba(240,168,104,0.35);
}
.process-step .step-num {
  position: relative;
  display: inline-block;
}
.process-step .step-num::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: -6px;
  height: 1px;
  background: linear-gradient(to right, var(--accent), transparent);
}

/* ============================================================
   Request form — pulsing warm ring + corner ticks
   ============================================================ */

.form-card {
  position: relative;
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.02),
    0 40px 120px -40px rgba(240,168,104,0.25);
}
.form-card::before {
  content: "";
  position: absolute; inset: -1px;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg,
    rgba(240,168,104,0.35),
    rgba(240,168,104,0) 35%,
    rgba(240,168,104,0) 65%,
    rgba(240,168,104,0.35));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
  opacity: 0.6;
  animation: ring-pulse 4.5s ease-in-out infinite;
}
@keyframes ring-pulse {
  0%, 100% { opacity: 0.45; }
  50%      { opacity: 0.9; }
}

/* corner ticks                                                    */
.form-card::after {
  content: "";
  position: absolute;
  inset: 8px;
  border: 1px solid transparent;
  background:
    linear-gradient(to right, rgba(240,168,104,0.5) 0, rgba(240,168,104,0.5) 14px, transparent 14px) top left,
    linear-gradient(to bottom, rgba(240,168,104,0.5) 0, rgba(240,168,104,0.5) 14px, transparent 14px) top left,
    linear-gradient(to left,  rgba(240,168,104,0.5) 0, rgba(240,168,104,0.5) 14px, transparent 14px) top right,
    linear-gradient(to bottom, rgba(240,168,104,0.5) 0, rgba(240,168,104,0.5) 14px, transparent 14px) top right,
    linear-gradient(to right, rgba(240,168,104,0.5) 0, rgba(240,168,104,0.5) 14px, transparent 14px) bottom left,
    linear-gradient(to top,   rgba(240,168,104,0.5) 0, rgba(240,168,104,0.5) 14px, transparent 14px) bottom left,
    linear-gradient(to left,  rgba(240,168,104,0.5) 0, rgba(240,168,104,0.5) 14px, transparent 14px) bottom right,
    linear-gradient(to top,   rgba(240,168,104,0.5) 0, rgba(240,168,104,0.5) 14px, transparent 14px) bottom right;
  background-repeat: no-repeat;
  background-size: 14px 1px, 1px 14px, 14px 1px, 1px 14px, 14px 1px, 1px 14px, 14px 1px, 1px 14px;
  pointer-events: none;
  opacity: 0.55;
}

/* ============================================================
   Why — decorative sun mark next to the heading
   ============================================================ */

.why-grid { position: relative; }
.why-grid::before {
  content: "";
  position: absolute;
  right: -40px; top: 0;
  width: 320px; height: 320px;
  background:
    radial-gradient(circle at 50% 50%,
      rgba(240,168,104,0.18) 0%,
      rgba(240,168,104,0.06) 35%,
      transparent 60%);
  border-radius: 50%;
  filter: blur(20px);
  z-index: 0;
  pointer-events: none;
  animation: sun-drift 22s ease-in-out infinite alternate;
}
.why-grid > * { position: relative; z-index: 1; }

.why-points li {
  transition: background 240ms ease, border-color 240ms ease, transform 240ms ease;
}
.why-points li:hover {
  border-color: rgba(240,168,104,0.3);
  background: rgba(240,168,104,0.03);
  transform: translateX(2px);
}

/* ============================================================
   FAQ — soft warm wash on open row + caret upgrade
   ============================================================ */

.faq-row { transition: background 240ms ease; }
.faq-row:hover { background: rgba(255,255,255,0.015); }
.faq-row.open {
  background: linear-gradient(to right,
    rgba(240,168,104,0.04) 0%,
    transparent 70%);
}

/* ============================================================
   Footer — warm sunset band
   ============================================================ */

.site-footer { position: relative; overflow: hidden; }
.site-footer::before {
  content: "";
  position: absolute; left: -10%; right: -10%; top: -60px;
  height: 1px;
  background: linear-gradient(to right,
    transparent 0%,
    rgba(240,168,104,0.45) 50%,
    transparent 100%);
}
.site-footer::after {
  content: "";
  position: absolute; left: -20%; right: -20%; bottom: -260px;
  height: 460px;
  background:
    radial-gradient(60% 100% at 50% 100%,
      rgba(240, 168, 104, 0.16) 0%,
      rgba(240, 168, 104, 0.06) 30%,
      transparent 55%);
  pointer-events: none;
  z-index: 0;
}
.site-footer .wrap { position: relative; z-index: 1; }

/* ============================================================
   Pill in hero — slow shimmer on the dot
   ============================================================ */
.dot.amber {
  animation: dot-pulse 2.6s ease-in-out infinite;
}
@keyframes dot-pulse {
  0%, 100% { box-shadow: 0 0 12px var(--accent-glow-strong); }
  50%      { box-shadow: 0 0 22px var(--accent-glow-strong), 0 0 6px var(--accent); }
}

/* ============================================================
   Section header — subtle eyebrow tick
   ============================================================ */
.section-header .eyebrow {
  display: inline-flex !important; align-items: center; gap: 10px;
}
.section-header .eyebrow::before {
  content: ""; flex: 0 0 24px; height: 1px;
  background: linear-gradient(to right, var(--accent), transparent);
}

/* ============================================================
   Reduced motion — disable animations
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .atm-grid, .atm-grain, .atm-orb,
  .hero::before, .studio-panel::after,
  .form-card::before, .why-grid::before,
  .dot.amber { animation: none !important; }
}