/* ============================================================
   ANIMATIONS
   ------------------------------------------------------------
   Restrained. The spiral draws once and stops — it never spins
   continuously. Everything here is disabled under reduced
   motion (see base.css).
   ============================================================ */

/* ============================================================
   THE HERO
   ============================================================ */
.hero {
  position: relative;
  min-height: 100svh;
  min-height: 100vh;
  display: grid;
  place-items: center;
  text-align: center;
  overflow: hidden;
  background: var(--obsidian);
  isolation: isolate;
}

/* Warm light pooling from above, as in her photographs. */
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(70% 55% at 50% 28%, rgba(200, 154, 60, 0.16), transparent 62%),
    radial-gradient(120% 90% at 50% 110%, rgba(154, 107, 33, 0.10), transparent 60%);
}

/* A faint grain so the black reads soft, not flat digital black. */
.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0.045;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.hero__inner {
  position: relative;
  z-index: 2;
  padding: 7rem 1.2rem 5rem;
  width: min(94vw, 940px);
}

/* ---- The spiral mark, drawn once ---- */
.hero-spiral {
  width: clamp(112px, 17vw, 190px);
  margin: 0 auto clamp(1.2rem, 2vw, 2rem);
  color: var(--gold);
  overflow: visible;
}
.hero-spiral path, .hero-spiral circle { vector-effect: non-scaling-stroke; }

/* Each stroke draws itself in sequence: crescent, then spiral. */
.hero-spiral .draw {
  stroke-dasharray: var(--len, 1200);
  stroke-dashoffset: var(--len, 1200);
  animation: draw-in 2.4s var(--ease-spiral) forwards;
}
.hero-spiral .draw--crescent { animation-delay: 0.15s; }
.hero-spiral .draw--coil     { animation-delay: 0.5s; animation-duration: 2.2s; }

@keyframes draw-in { to { stroke-dashoffset: 0; } }

/* A soft glow that blooms as the drawing completes. */
.hero-spiral .bloom {
  opacity: 0;
  animation: bloom 1.6s var(--ease) 1.9s forwards;
  transform-origin: center;
}
@keyframes bloom {
  0%   { opacity: 0; }
  60%  { opacity: 0.55; }
  100% { opacity: 0.28; }
}

/* ---- Words arrive after the mark ---- */
.hero__inner .lift {
  opacity: 0;
  transform: translateY(20px);
  animation: lift 1.1s var(--ease) forwards;
}
.lift--1 { animation-delay: 2.05s; }
.lift--2 { animation-delay: 2.25s; }
.lift--3 { animation-delay: 2.45s; }
.lift--4 { animation-delay: 2.65s; }

@keyframes lift {
  to { opacity: 1; transform: none; }
}

/* Under reduced motion the hero simply is, already arrived. */
@media (prefers-reduced-motion: reduce) {
  .hero-spiral .draw { stroke-dashoffset: 0; animation: none; }
  .hero-spiral .bloom { opacity: 0.28; animation: none; }
  .hero__inner .lift { opacity: 1; transform: none; animation: none; }
}
body.motion-off .hero-spiral .draw { stroke-dashoffset: 0; animation: none; }
body.motion-off .hero-spiral .bloom { opacity: 0.28; animation: none; }
body.motion-off .hero__inner .lift { opacity: 1; transform: none; animation: none; }

/* ---- Scroll cue: a small descending spiral tail ---- */
.hero__cue {
  position: absolute;
  left: 50%;
  bottom: 1.8rem;
  transform: translateX(-50%);
  z-index: 3;
  display: grid;
  justify-items: center;
  gap: 0.5rem;
  color: var(--gold-champagne);
  opacity: 0;
  animation: lift 1s var(--ease) 3s forwards;
}
.hero__cue span {
  font-family: var(--font-house);
  font-size: 0.55rem;
  letter-spacing: 0.28em;
  text-indent: 0.28em;
  text-transform: uppercase;
}
.hero__cue svg { width: 16px; height: 26px; animation: cue-drift 2.8s var(--ease) infinite; }

@keyframes cue-drift {
  0%, 100% { transform: translateY(0); opacity: 0.55; }
  50%      { transform: translateY(6px); opacity: 1; }
}

/* ============================================================
   THE SPIRAL SPINE
   ------------------------------------------------------------
   A gold thread that runs down the homepage, drawing itself as
   the visitor scrolls. It is what makes the page feel like one
   continuous descent through a house rather than stacked bands.
   Decorative only, hidden from assistive tech.
   ============================================================ */
.spine {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 0;
  height: 100%;
  width: 2px;
  pointer-events: none;
  z-index: 0;
  overflow: visible;
}
.spine__line {
  width: 1px;
  height: 100%;
  margin-inline: auto;
  background: linear-gradient(to bottom,
              transparent, var(--gold-whisper) 12%,
              var(--gold-whisper) 88%, transparent);
  transform-origin: top;
  transform: scaleY(var(--spine-progress, 0));
  transition: transform 0.15s linear;
}
@media (max-width: 900px) { .spine { display: none; } }

/* ============================================================
   LOADING / PENDING
   ============================================================ */
.spinner {
  width: 26px; height: 26px;
  color: var(--gold);
  animation: turn 1.1s linear infinite;
}
@keyframes turn { to { transform: rotate(360deg); } }

/* Skeleton shimmer for images still decoding */
.frame img, .piece__media img, .gallery__main img {
  background: linear-gradient(100deg,
              var(--obsidian-lift) 30%, #17130e 50%, var(--obsidian-lift) 70%);
  background-size: 220% 100%;
}
img[data-loaded='true'] { background: none; }

/* ============================================================
   MICRO-INTERACTIONS
   ============================================================ */

/* A saved heart gives one small pulse. */
@keyframes heart-pulse {
  0%   { transform: scale(1); }
  45%  { transform: scale(1.28); }
  100% { transform: scale(1); }
}
.piece__save.just-saved svg { animation: heart-pulse 0.45s var(--ease-spiral); }

/* Step transitions in the guided tools — a soft rotate-in,
   echoing the spiral rather than a hard slide. */
.step {
  display: none;
  animation: step-in 0.55s var(--ease-spiral) both;
}
.step.is-current { display: block; }
@keyframes step-in {
  from { opacity: 0; transform: translateY(16px) rotate(-0.4deg); }
  to   { opacity: 1; transform: none; }
}

/* Results arriving one after another. */
@keyframes result-in {
  from { opacity: 0; transform: translateY(22px) scale(0.985); }
  to   { opacity: 1; transform: none; }
}
.result-in { animation: result-in 0.65s var(--ease) both; }

/* ============================================================
   THE FIRST SCREEN, matched to the logo (client request, 2026-10-08)
   ------------------------------------------------------------
   The symbol is the logo's own artwork (assets/brand/logo-symbol),
   not a redrawing. The name is set in Cinzel, whose capitals and
   small capitals are the same carved Roman form as the logo's
   lettering, in the logo's metallic gold.
   ============================================================ */
.hero-mark {
  position: relative;
  width: clamp(120px, 15vw, 196px);
  margin: 0 auto clamp(1.1rem, 2vw, 1.8rem);
}
.hero-mark--small { width: clamp(76px, 8vw, 104px); margin-bottom: 1.2rem; }
.hero-mark img { width: 100%; height: auto; display: block; position: relative; z-index: 1; }

/* Warm light behind the gold, as in a candlelit photograph. */
.hero-mark::before {
  content: '';
  position: absolute;
  inset: -30%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(216, 173, 85, 0.30), rgba(216, 173, 85, 0) 70%);
  z-index: 0;
}

/* One slow glint across the metal, clipped to the symbol's own shape. */
.hero-mark::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(105deg, transparent 35%, rgba(255, 246, 214, 0.75) 50%, transparent 65%);
  background-size: 260% 100%;
  background-position: 120% 0;
  -webkit-mask: url("../assets/brand/logo-symbol.png") center / contain no-repeat;
          mask: url("../assets/brand/logo-symbol.png") center / contain no-repeat;
  mix-blend-mode: screen;
  opacity: 0;
}

.hero-wordmark {
  font-family: var(--font-house);
  font-weight: 400;
  font-size: clamp(2.2rem, 0.9rem + 5.6vw, 6.2rem);
  line-height: 1.04;
  letter-spacing: 0.035em;
  margin: 0.15em 0 0;
  /* The logo's metal: bright at the top edge, deepening below. */
  background: linear-gradient(180deg, #f6e4a6 0%, #e2bd63 42%, #c9963a 78%, #a8772a 100%);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  text-wrap: balance;
}
.hero-wordmark--sm { font-size: clamp(1.9rem, 1rem + 3.4vw, 4rem); }
.hero-of { letter-spacing: 0.5em; font-size: 0.82rem; color: var(--gold-champagne); }

@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
  .hero-wordmark { color: var(--gold); -webkit-text-fill-color: currentColor; background: none; }
}

/* Motion: the symbol rises out of the dark, the glint passes once, then the words. */
.hero--logo .hero-mark img,
.hero-mark--small img { animation: mark-rise 1.5s var(--ease) both; }
.hero--logo .hero-mark::before { animation: mark-glow 2.2s var(--ease) both; }
.hero--logo .hero-mark::after { animation: mark-glint 2.4s var(--ease) 1.1s both; }
.hero--logo .lift--1 { animation-delay: 0.9s; }
.hero--logo .lift--2 { animation-delay: 1.1s; }
.hero--logo .lift--3 { animation-delay: 1.3s; }
.hero--logo .lift--4 { animation-delay: 1.5s; }

@keyframes mark-rise {
  from { opacity: 0; transform: translateY(14px) scale(0.94); filter: blur(4px); }
  to   { opacity: 1; transform: none; filter: none; }
}
@keyframes mark-glow { from { opacity: 0; } to { opacity: 1; } }
@keyframes mark-glint {
  0%   { opacity: 1; background-position: 120% 0; }
  100% { opacity: 1; background-position: -20% 0; }
}

@media (prefers-reduced-motion: reduce) {
  .hero--logo .hero-mark img, .hero-mark--small img, .hero--logo .hero-mark::before { animation: none; opacity: 1; }
  .hero--logo .hero-mark::after { animation: none; opacity: 0; }
}
body.motion-off .hero--logo .hero-mark img,
body.motion-off .hero-mark--small img,
body.motion-off .hero--logo .hero-mark::before { animation: none; opacity: 1; }
body.motion-off .hero--logo .hero-mark::after { animation: none; opacity: 0; }