/* ══════════════════════════════════════════════════════
   Utopia Store — Warm White Theme (Standalone)
   Complete CSS — does NOT depend on styles.css
   ══════════════════════════════════════════════════════ */

/* ── Variables ── */
:root {
  /* Backgrounds */
  --bg-page:      #FFFFFF;
  --bg-section:   #F8F5FF;
  --bg-card:      #FFFFFF;
  --bg-accent:    #F0EBFF;
  --bg-dark:      #1A0F2E;
  /* Primary — violet */
  --violet:       #5B2D8E;
  --violet-light: #7B4DB8;
  --violet-dim:   #E8DFFF;
  /* Secondary — teal */
  --teal:         #1A7A6E;
  --teal-light:   #E6F5F3;
  /* Warm accent */
  --amber:        #C17B2A;
  /* Text */
  --text-heading: #0F0A1A;
  --text-body:    #2D2035;
  --text-muted:   #7A6B8A;
  --text-on-dark: #EDE8FF;
  /* Borders */
  --border:       rgba(91, 45, 142, 0.12);
  --border-hover: rgba(91, 45, 142, 0.30);
  --border-card:  rgba(91, 45, 142, 0.08);
  /* Fonts */
  --font-display: 'Cormorant Garamond', Georgia, serif;
  --font-body:    'Jost', sans-serif;
}

/* ── Base ── */
body {
  font-family: var(--font-body);
  background: var(--bg-page);
  color: var(--text-body);
  margin: 0;
}

/* ── Keyframes ── */
@keyframes drift { 0%,100%{transform:translate(0,0) scale(1)} 33%{transform:translate(30px,-20px) scale(1.05)} 66%{transform:translate(-20px,30px) scale(.97)} }
@keyframes mandalaRotate { to{transform:translate(-50%,-50%) rotate(360deg)} }
@keyframes mandalaPulse { 0%{opacity:.15;filter:drop-shadow(0 0 0 transparent)} 30%{opacity:.1;filter:none} 50%{opacity:.1;filter:none} 80%{opacity:.15;filter:drop-shadow(0 0 10px rgba(91,45,142,.15))} 100%{opacity:.15;filter:drop-shadow(0 0 0 transparent)} }
@keyframes particleRise { 0%{opacity:0;transform:translateY(0)} 10%{opacity:.55} 90%{opacity:.55} 100%{opacity:0;transform:translateY(-100vh)} }
@keyframes charFade { from{opacity:0;filter:blur(4px);transform:translateY(8px)} to{opacity:1;filter:blur(0);transform:translateY(0)} }
@keyframes fadeUp { from{opacity:0;transform:translateY(24px)} to{opacity:1;transform:translateY(0)} }
@keyframes smokeRise { 0%{opacity:.6;transform:translateY(0) scaleX(1)} 50%{opacity:.3;transform:translateY(-20px) scaleX(1.8)} 100%{opacity:0;transform:translateY(-45px) scaleX(2.5)} }
@keyframes emberGlow { 0%,100%{opacity:.7;box-shadow:0 0 4px 1px rgba(232,117,42,.4)} 50%{opacity:1;box-shadow:0 0 8px 3px rgba(232,117,42,.7)} }
@keyframes utopiaAura {
  0%,100% { text-shadow:0 0 20px rgba(91,45,142,.08),0 0 40px rgba(123,77,184,.04); color:#3A1A5E; opacity:.85 }
  50% { text-shadow:0 0 60px rgba(91,45,142,.3),0 0 120px rgba(123,77,184,.15),0 0 180px rgba(200,160,255,.06); color:#4A2570; opacity:1 }
}
@keyframes scrollPulse { 0%,100%{opacity:.4;transform:scaleY(1)} 50%{opacity:1;transform:scaleY(1.1)} }
@keyframes marqueeScroll { 0%{transform:translateX(0)} 100%{transform:translateX(-50%)} }
@keyframes btnShimmer { from{left:-100%} to{left:120%} }
@keyframes particleImpact {
  0%   { box-shadow:0 0 0 0 rgba(91,45,142,0) }
  15%  { box-shadow:0 0 18px 4px rgba(91,45,142,.35), inset 0 0 12px rgba(123,77,184,.1) }
  100% { box-shadow:0 0 0 0 rgba(91,45,142,0) }
}

/* ── Animation classes ── */
.particle-hit { animation:particleImpact .6s ease-out }
.hero-title .char { display:inline-block;opacity:0;animation:charFade .5s ease forwards }
.hero-title br { display:block }
.orb { animation:drift 18s ease-in-out infinite }
.hero-mandala { animation:mandalaRotate 120s linear infinite, mandalaPulse 14s ease-in-out infinite }
.particle { position:absolute;border-radius:50%;background:radial-gradient(circle,#FFD54F 0%,#E8752A 50%,#D4421A 100%);box-shadow:0 0 3px 1px rgba(232,117,42,.5);opacity:0;animation:particleRise linear infinite }
.scroll-line { animation:scrollPulse 2s ease-in-out infinite }
.marquee-track { animation:marqueeScroll 35s linear infinite }
.marquee-strip:hover .marquee-track { animation-play-state:paused }

/* ── Reveal ── */
.reveal { opacity:0;transform:translateY(20px);transition:opacity .8s ease,transform .8s ease }
.reveal.visible { opacity:1;transform:translateY(0) }
.reveal-d1 { transition-delay:.1s }
.reveal-d2 { transition-delay:.2s }

/* ── Nav link underline ── */
.nav-link { position:relative }
.nav-link::after { content:'';position:absolute;bottom:-4px;left:50%;right:50%;height:1px;background:var(--violet);transition:left .3s,right .3s }
.nav-link:hover::after { left:0;right:0 }

/* ── Button shimmer ── */
.btn-shimmer { position:relative;overflow:hidden }
.btn-shimmer::after { content:'';position:absolute;top:0;left:-100%;width:60%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.25),transparent) }
.btn-shimmer:hover::after { animation:btnShimmer .6s ease forwards }

/* ── Pillar gold line ── */
.pillar-card { position:relative }
.pillar-card::after { content:'';position:absolute;top:0;left:0;width:100%;height:2px;background:var(--violet);transform:scaleX(0);transform-origin:left;transition:transform .4s ease }
.pillar-card:hover::after { transform:scaleX(1) }

/* ── Intention card ── */
.intent-card { opacity:0;transform:translateY(16px) }
.intent-card.visible { opacity:1;transform:translateY(0);transition:opacity .5s ease,transform .5s ease,background .3s }
.intent-card::before { content:'';position:absolute;bottom:0;left:0;right:0;height:2px;background:var(--violet);transform:scaleX(0);transition:transform .3s;transform-origin:left }
.intent-card:hover::before { transform:scaleX(1) }
.intent-card:hover .intent-sym { transform:scale(1.4);text-shadow:0 0 20px rgba(91,45,142,.3) }

/* ── Proof cards ── */
.proof-card { opacity:0;transform:translateY(16px);transition:opacity .5s ease,transform .5s ease }
.proof-card.visible { opacity:1;transform:translateY(0) }

/* ── Burger (dark nav) ── */
.burger span { display:block;width:22px;height:1.5px;background:var(--text-heading);transition:transform .3s,opacity .3s }
.burger.active span:nth-child(1) { transform:translateY(6.5px) rotate(45deg) }
.burger.active span:nth-child(2) { opacity:0 }
.burger.active span:nth-child(3) { transform:translateY(-6.5px) rotate(-45deg) }

/* ── Cards & surfaces ── */
.card-warm {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 2px 12px rgba(0,0,0,.06);
  overflow: hidden;
}
.card-warm:hover { border-color: var(--border-hover) }

/* ── Scrollable row ── */
.scroll-row {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: scroll;
  gap: 1.25rem;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-bottom: 1rem;
}
.scroll-row::-webkit-scrollbar { display:none }
.scroll-row > * { scroll-snap-align:start; flex:0 0 220px; width:220px }

/* ── Tab system ── */
.tab-bar { display:flex;gap:0;border-bottom:2px solid var(--border) }
.tab-btn {
  padding:.65rem 1.4rem;
  font-size:.78rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  background:transparent;
  border:1.5px solid var(--border);
  border-radius:50px;
  cursor:pointer;
  color:var(--text-muted);
  transition:all .25s;
  font-family:var(--font-body);
}
.tab-btn.active { color:#fff;background:var(--violet);border-color:var(--violet) }
.tab-btn:not(.active):hover { border-color:var(--violet);color:var(--violet) }

/* ── Pill links ── */
.pill {
  padding:.85rem 1.2rem;
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:8px;
  font-family:var(--font-display);
  font-size:1.05rem;
  color:var(--text-heading);
  text-decoration:none;
  transition:background .2s,border-color .2s;
  display:block;
  text-align:center;
}
.pill:hover { background:var(--bg-accent);border-color:var(--violet) }

/* ── Intention tiles ── */
.intent-tile {
  position:relative;
  overflow:hidden;
  border-radius:10px;
  aspect-ratio:3/4;
  display:block;
  text-decoration:none;
}
.intent-tile img { width:100%;height:100%;object-fit:cover;transition:transform .4s }
.intent-tile:hover img { transform:scale(1.05) }
.intent-tile .overlay {
  position:absolute;inset:0;
  background:linear-gradient(to top,rgba(28,20,40,.75) 0%,rgba(28,20,40,.1) 50%,transparent 100%);
}
.intent-tile .tile-text { position:absolute;bottom:0;left:0;right:0;padding:1.25rem }

/* ── Service cards ── */
.svc-card {
  width:220px;
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:10px;
  overflow:hidden;
  text-decoration:none;
  display:block;
  box-shadow:0 2px 12px rgba(0,0,0,.06);
  transition:border-color .2s;
}
.svc-card:hover { border-color:var(--violet) }

/* ── Line clamp ── */
.line-clamp-2 {
  overflow:hidden;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
}

/* ── Chakra strip mobile ── */
@media(max-width:640px){
  .chakra-strip{overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .chakra-strip::-webkit-scrollbar{display:none}
  .chakra-strip>div{min-width:max-content;flex:0 0 auto}
}

/* ── Hero CTA mobile stack ── */
@media(max-width:430px){
  .hero-ctas{flex-direction:column}
  .hero-ctas a{width:100%;min-height:52px;display:flex;align-items:center;justify-content:center}
}

/* ── Intent tiles mobile ── */
@media(max-width:640px){
  .intent-tile { aspect-ratio:4/3 }
}

/* ── Reduced motion ── */
@media(prefers-reduced-motion:reduce){
  .orb,.hero-mandala,.particle,.hero-title .char,.scroll-line,.marquee-track{animation:none!important;opacity:1!important;transform:none!important;filter:none!important}
  .hero-mandala{transform:translate(-50%,-50%)!important}
  .btn-shimmer::after{animation:none!important}
  .intent-card,.proof-card,.reveal{opacity:1!important;transform:none!important}
}