/* ============================================================
   Incanto — Aurora Ambience theme
   Source of truth: clients/incanto/design/concepts/e-aurora-ambience.html
   (approved static direction "Design E") and its archive page
   clients/incanto/design/concepts/works-e.html.

   Load order: shared/assets/css/base.css first, then this file. Every rule
   below was lifted from the approved prototype's inline <style> blocks; the
   only changes are (a) merging the homepage and archive themes into one file,
   (b) scoping the archive-only overrides under `.page--works` so the archive's
   always-solid nav never leaks onto the homepage's transparent one,
   (c) moving the about-section inline styles (label colour, heading margin
   and weight) into `.about-e__text` rules, as spotlight-wall did, which
   renders identically, and (d) revealing the work card overlay on
   :focus-visible as well as :hover, matching the other Incanto conversions.
   Class names, layout values and visual output are otherwise unchanged from
   the approved concept.
   Keep visual changes here, not in shared/base.css.
   ============================================================ */

:root {
  --c-bg: #0a0a12;
  --c-surface: #12121c;
  --c-text: #f2f0f7;
  --c-muted: rgba(242,240,247,0.68);
  --c-accent: #8b7cd9;
  --c-accent-text: #0a0a12;
  --c-border: rgba(242,240,247,0.1);
  --c-violet: #8b7cd9;
  --c-blue: #6fa8dc;
  --c-gold: #e8c88a;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--c-bg);
  font-family: -apple-system, "Inter", "Segoe UI", system-ui, sans-serif;
  color: var(--c-text); overflow-x: hidden;
}
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--c-bg); }
::-webkit-scrollbar-thumb { background: var(--c-accent); border-radius: 3px; }

.hero {
  position: relative; min-height: 100svh;
  display: flex; flex-direction: column;
  overflow: hidden; isolation: isolate;
}

.hero__bg { position: absolute; inset: 0; z-index: 0; background: var(--c-bg); }

/* Aurora bands: 3 large soft blurred ellipses, slow independent drift/rotation.
   Confined to the upper two-thirds so they never compete with the CTA row. */
.aurora { position: absolute; inset: 0; z-index: 1; overflow: hidden; }
.band {
  position: absolute; border-radius: 50%;
  filter: blur(46px); opacity: 0;
  mix-blend-mode: screen;
}
.band--1 {
  width: 68vw; height: 48vh; left: -12vw; top: -10vh;
  background: radial-gradient(ellipse, var(--c-violet) 0%, var(--c-blue) 45%, transparent 72%);
  animation: bandIn 1.6s var(--ease) forwards 0.2s, driftA 26s ease-in-out infinite 1.8s;
}
.band--2 {
  width: 64vw; height: 52vh; right: -14vw; top: 0vh;
  background: radial-gradient(ellipse, var(--c-blue) 0%, var(--c-violet) 50%, transparent 74%);
  animation: bandIn 1.6s var(--ease) forwards 0.4s, driftB 32s ease-in-out infinite 2s;
}
.band--3 {
  width: 52vw; height: 40vh; left: 28vw; top: 4vh; transform: translateX(-50%);
  background: radial-gradient(ellipse, var(--c-gold) 0%, transparent 76%);
  animation: bandIn3 1.6s var(--ease) forwards 0.6s, driftC 40s ease-in-out infinite 2.2s;
}
.band--4 {
  width: 44vw; height: 34vh; right: 2vw; bottom: -12vh;
  background: radial-gradient(ellipse, var(--c-violet) 0%, transparent 76%);
  animation: bandIn4 1.6s var(--ease) forwards 0.75s, driftD 30s ease-in-out infinite 2.4s;
}
@keyframes bandIn  { to { opacity: 0.85; } }
@keyframes bandIn3 { to { opacity: 0.6; } }
@keyframes bandIn4 { to { opacity: 0.5; } }
@keyframes driftA { 0%,100% { transform: translate(0,0) scale(1) rotate(0deg); } 50% { transform: translate(13vw,9vh) scale(1.18) rotate(8deg); } }
@keyframes driftB { 0%,100% { transform: translate(0,0) scale(1) rotate(0deg); } 50% { transform: translate(-12vw,-8vh) scale(1.14) rotate(-8deg); } }
@keyframes driftC { 0%,100% { transform: translate(-50%,0) scale(1); } 50% { transform: translate(-40%,10vh) scale(1.22); } }
@keyframes driftD { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(-9vw,-11vh) scale(1.16); } }

/* Focal anchor: a slow-breathing halo converging behind the headline so the
   eye has a place to land. */
.hero__core-glow {
  position: absolute; left: 50%; top: 46%; z-index: 1;
  width: min(52vw, 620px); height: min(52vw, 620px);
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(255,255,255,0.16) 0%, var(--c-violet) 28%, transparent 68%);
  border-radius: 50%; filter: blur(20px); opacity: 0;
  mix-blend-mode: screen;
  animation: coreGlowIn 1.8s var(--ease) forwards 0.5s, coreGlowBreathe 7s ease-in-out infinite 2.3s;
}
@keyframes coreGlowIn { to { opacity: 0.55; } }
@keyframes coreGlowBreathe { 0%, 100% { transform: translate(-50%, -50%) scale(1); } 50% { transform: translate(-50%, -50%) scale(1.1); } }

/* A handful of slow-twinkling points so the scene reads as populated rather
   than just two shapes drifting. Generated by aurora-ambience.js. */
.hero__particles { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.p {
  position: absolute; width: 2px; height: 2px; border-radius: 50%;
  background: var(--c-text); opacity: 0;
  animation: pTwinkle 6s ease-in-out infinite;
}
@keyframes pTwinkle { 0%, 100% { opacity: 0.1; } 50% { opacity: var(--pmax, 0.5); } }

/* Two thin diagonal light streaks sweeping across periodically — the only
   "fast-ish" motion in the scene, brief and infrequent. */
.shimmer {
  position: absolute; top: -20%; width: 1px; height: 140%;
  background: linear-gradient(to bottom, transparent, rgba(255,255,255,0.5), transparent);
  transform: rotate(18deg); opacity: 0;
  animation: shimmerPass 9s ease-in-out infinite;
}
.shimmer--1 { left: 22%; animation-delay: 2.5s; }
.shimmer--2 { left: 68%; animation-delay: 6s; }
@keyframes shimmerPass {
  0%, 92%, 100% { opacity: 0; transform: rotate(18deg) translateX(0); }
  95% { opacity: 0.5; }
  98% { opacity: 0; transform: rotate(18deg) translateX(40px); }
}

/* Faint grain for texture, matches the other concepts' restraint */
.hero__grain { position: absolute; inset: 0; z-index: 2; opacity: 0.04; mix-blend-mode: overlay; pointer-events: none; }

/* A soft vertical scrim keeps the lower copy legible regardless of band position */
.hero__scrim {
  position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background: linear-gradient(to bottom, rgba(10,10,18,0.05) 0%, rgba(10,10,18,0.35) 55%, rgba(10,10,18,0.75) 100%);
}

.nav { background: transparent; border-bottom-color: transparent; }
.nav.scrolled { background: rgba(10,10,18,0.92); border-bottom-color: var(--c-border); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.nav__logo-text { color: var(--c-text); }
.nav__link { color: rgba(242,240,247,0.7); }
.nav__link:hover { color: var(--c-text); opacity: 1; }
.nav__cta { background: var(--c-accent); color: var(--c-accent-text); }
.nav__menu-btn span { background: var(--c-text); }

.hero__content {
  position: relative; z-index: 10; flex: 1;
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  text-align: center; padding: calc(var(--nav-h) + 2rem) 1.5rem 4rem;
}
.hero__eyebrow {
  font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--c-gold);
  margin-bottom: 1.25rem; opacity: 0; animation: fadeUp 0.8s var(--ease) forwards 0.3s;
}
.hero__title {
  font-size: clamp(2.6rem, 6.5vw, 4.8rem); font-weight: 300; line-height: 1.08; letter-spacing: -0.01em;
  margin: 0 0 1.5rem; max-width: 16ch;
}
.hero__title strong { font-weight: 700; }
.hero__title span { display: inline-block; overflow: hidden; vertical-align: bottom; }
.hero__title span em {
  display: inline-block; font-style: normal; transform: translateY(115%);
  animation: lineUp 0.8s var(--ease) forwards;
}
.hero__title span:nth-child(1) em { animation-delay: 0.6s; }
.hero__title span:nth-child(2) em { animation-delay: 0.75s; }
.hero__title span:nth-child(3) em { animation-delay: 0.9s; }
@keyframes lineUp { to { transform: translateY(0); } }
.hero__sub {
  max-width: 46ch; color: var(--c-muted); line-height: 1.7; margin: 0 0 2rem;
  opacity: 0; transform: translateY(10px); animation: fadeUp 0.7s var(--ease) forwards 1.1s;
}
.hero__cta { opacity: 0; transform: translateY(10px); animation: fadeUp 0.7s var(--ease) forwards 1.3s; }
@keyframes fadeUp { to { opacity: 1; transform: translateY(0); } }
.btn {
  display: inline-block; padding: 0.9rem 2rem; border: 1px solid rgba(242,240,247,0.35);
  color: var(--c-text); border-radius: 4px; text-decoration: none; font-weight: 600;
  font-size: 0.85rem; letter-spacing: 0.06em; text-transform: uppercase;
  transition: border-color 0.3s var(--ease), background 0.3s var(--ease);
}
.btn:hover { border-color: var(--c-gold); background: rgba(232,200,138,0.08); }

@media (prefers-reduced-motion: reduce) {
  .band, .hero__core-glow, .p, .shimmer, .hero__eyebrow, .hero__title span em, .hero__sub, .hero__cta { animation: none !important; }
  .band--1 { opacity: 0.5; } .band--2 { opacity: 0.5; } .band--3 { opacity: 0.35; } .band--4 { opacity: 0.3; }
  .hero__core-glow { opacity: 0.4; }
  .p { opacity: 0.3; } .shimmer { opacity: 0; }
  .hero__eyebrow, .hero__sub, .hero__cta { opacity: 1; transform: none; }
  .hero__title span em { transform: translateY(0); }
}
@media (max-width: 640px) {
  .band { filter: blur(36px); }
  .band--3, .band--4, .hero__particles, .shimmer { display: none; }
  .hero__core-glow { width: 78vw; height: 78vw; filter: blur(16px); }
}

/* ── Works preview (minimal 3-col grid, matches E's restrained tone) ── */
.works-section-e { background: var(--c-bg); }
.works-grid-e { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); margin-top: var(--space-12); }
@media (max-width: 900px) { .works-grid-e { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .works-grid-e { grid-template-columns: 1fr; } }
.work-card-e { position: relative; overflow: hidden; border-radius: var(--radius-md); aspect-ratio: 4/3; cursor: zoom-in; }
.work-card-e img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s var(--ease), filter 0.5s var(--ease); filter: saturate(0.85); }
.work-card-e:hover img { transform: scale(1.05); filter: saturate(1); }
.work-card-e__overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(10,10,18,0.92) 0%, transparent 55%);
  display: flex; flex-direction: column; justify-content: flex-end; padding: var(--space-4);
  opacity: 0; transition: opacity 0.3s var(--ease);
}
.work-card-e:hover .work-card-e__overlay,
.work-card-e:focus-visible .work-card-e__overlay { opacity: 1; }
.work-card-e__cat { font-size: 0.65rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--c-accent); }
.work-card-e__name { font-size: 0.85rem; font-weight: 600; color: var(--c-text); margin-top: 0.25rem; }
.works-preview-cta-e { margin-top: var(--space-12); text-align: center; }
.works-preview-cta-e p { color: var(--c-muted); max-width: 50ch; margin: 0 auto var(--space-6); }
.works-viewall-e {
  display: inline-block; padding: 0.8rem 2rem; border: 1px solid var(--c-border);
  color: var(--c-text); text-decoration: none; font-size: 0.85rem; font-weight: 600;
  letter-spacing: 0.05em; text-transform: uppercase; border-radius: 4px;
  transition: border-color var(--transition), color var(--transition);
}
.works-viewall-e:hover { border-color: var(--c-accent); color: var(--c-accent); }

/* ── Services (clean minimal list, no numbers/arrows) ── */
.services-section-e { background: var(--c-surface); }
.services-list-e { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-8); margin-top: var(--space-12); }
@media (max-width: 768px) { .services-list-e { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .services-list-e { grid-template-columns: 1fr; } }
.service-item-e__name { font-size: 1rem; font-weight: 700; margin-bottom: var(--space-2); }
.service-item-e__desc { font-size: 0.85rem; color: var(--c-muted); line-height: 1.7; }
.service-item-e::before { content: ''; display: block; width: 28px; height: 1px; background: var(--c-accent); margin-bottom: var(--space-4); }

/* ── About ─────────────────────────────────────────── */
.about-section-e { background: var(--c-bg); }
.about-e__inner { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-16); align-items: center; }
@media (max-width: 768px) { .about-e__inner { grid-template-columns: 1fr; } }
.about-e__img { border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 4/3; filter: saturate(0.85); }
.about-e__img img { width: 100%; height: 100%; object-fit: cover; }
/* The approved prototype set these inline on the label/heading; moved here so
   the markup carries no presentational attributes. Renders identically. */
.about-e__text .t-label { color: var(--c-accent); }
.about-e__text .t-heading { margin-bottom: var(--space-6); font-weight: 300; }
.about-e__text p { color: var(--c-muted); line-height: 1.75; margin-bottom: var(--space-4); }

/* ── CTA ───────────────────────────────────────────── */
.cta-section-e { position: relative; background: var(--c-surface); text-align: center; padding-block: var(--space-24); overflow: hidden; }
.cta-section-e__glow {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
  width: 600px; height: 300px; background: radial-gradient(ellipse, rgba(139,124,217,0.18) 0%, transparent 70%);
  pointer-events: none;
}
.cta-section-e p { position: relative; color: var(--c-muted); margin: var(--space-4) 0 var(--space-8); }
.cta-section-e h2 { position: relative; font-weight: 300; }
.cta-section-e .btn { position: relative; }

/* ── WhatsApp FAB ──────────────────────────────────── */
.whatsapp-fab {
  position: fixed; right: var(--space-6); bottom: var(--space-6); z-index: 40;
  width: 56px; height: 56px; border-radius: 50%;
  background: var(--c-accent); color: var(--c-accent-text);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 8px 24px rgba(139,124,217,0.35);
  transition: transform var(--transition), box-shadow var(--transition);
}
.whatsapp-fab:hover { transform: scale(1.08); box-shadow: 0 10px 30px rgba(139,124,217,0.5); }
.whatsapp-fab svg { width: 28px; height: 28px; fill: currentColor; }
@media (max-width: 480px) {
  .whatsapp-fab { right: var(--space-4); bottom: var(--space-4); width: 50px; height: 50px; }
  .whatsapp-fab svg { width: 24px; height: 24px; }
}

/* ── Archive page ("All Our Works") ────────────────────
   From clients/incanto/design/concepts/works-e.html. Scoped to .page--works so
   the archive's always-solid nav never leaks onto the homepage's transparent one. */
.page--works { background: var(--c-bg); color: var(--c-text); font-family: var(--font-sans); }
.page--works .nav {
  background: rgba(10,10,18,0.92); border-bottom-color: var(--c-border);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
}
.page--works .nav__link { color: rgba(242,240,247,0.6); }
.page--works .nav__link:hover { color: var(--c-text); }
.page--works .works-hero { background: var(--c-surface); }