/* The field — the hero's layout around its painting. index.html only;
   css/styles.css is shared by ten pages. The words are the painting's
   inscription, set in the sky's upper left with the painter's seal, and
   the field fills what is below. That holds with or without the canvas,
   so nothing moves when the field arrives. */

.hero {
  justify-content: flex-start;
  align-items: flex-start;
  text-align: left;
  padding-top: clamp(4.5rem, 15vh, 10rem);
  padding-inline: clamp(1.5rem, 8vw, 9rem);
  overflow: hidden;
}

.hero-inscription {
  position: relative;
  z-index: 1;
  max-width: min(34rem, 100%);
}

.hero-signature {
  display: flex;
  align-items: flex-start;
  gap: clamp(0.75rem, 1.4vw, 1.15rem);
}

.hero .hero-title {
  margin: 0;
  font-size: clamp(3.4rem, 7vw, 6rem);
  font-weight: 300;
  line-height: 0.95;
  letter-spacing: 0.005em;
}

/* The only red in the hero, as a painter's seal is the only red in an ink
   painting. Decoration: the name beside it is the heading. */
.hero-seal {
  --seal: #A8412F;
  flex: none;
  width: clamp(2.5rem, 3.8vw, 3.4rem);
  height: clamp(2.5rem, 3.8vw, 3.4rem);
  margin-top: 0.6rem;
  color: var(--seal);
}

[data-theme="dark"] .hero-seal { --seal: #C4573F; }

/* The quieter lines sit in --ink-fog at full opacity: the sky's ink wash
   is proved readable for exactly that (js/hero-field-core.test.js). */
.hero .hero-tagline {
  margin: 0.7rem 0 0;
  font-size: clamp(1.2rem, 1.8vw, 1.5rem);
  color: var(--ink-fog);
}

.hero .turning-echo {
  align-items: flex-start;
  text-align: left;
  margin-top: 1rem;
}

.hero .hero-quotes {
  --aura: 0.42;
  margin: clamp(1.4rem, 3.5vh, 2.4rem) 0 0;
  max-width: 26rem;
  height: 2.6em;
}

[data-theme="dark"] .hero .hero-quotes, body.constellation .hero .hero-quotes { --aura: 0.3; }

/* The whisper is in ink, its energy a wash of colour behind the words:
   three blooms shaped by the words themselves (js/hero-field.js), in the
   hue the wisp breathes below and the gust carries across the field. At
   its peak (--aura) ink still holds 4.6:1 on the sky for every energy
   (js/hero-field-wiring.test.js). */
.hero .hero-quotes .hero-quote[data-category] {
  right: auto;
  justify-content: flex-start;
  text-align: left;
  color: var(--ink);
}

.hero .hero-quotes .hero-quote[data-category]::before {
  content: '';
  position: absolute;
  inset: -1em -2.5em;
  z-index: -1;
  background:
    radial-gradient(ellipse var(--bloom-1, 20% 40% at 30% 52%), var(--energy), transparent),
    radial-gradient(ellipse var(--bloom-2, 20% 38% at 70% 48%), var(--energy), transparent),
    radial-gradient(ellipse var(--bloom-3, 26% 42% at 50% 50%), var(--energy), transparent);
  opacity: var(--aura);
  pointer-events: none;
}

/* The seven energies, as pilgrim-ios WhisperCategory.borderColor. Presence's
   deep teal vanishes at night, so it has a lighter twin there. */
.hero-quote[data-category="presence"]   { --energy: #1C3B4A; }
.hero-quote[data-category="lightness"]  { --energy: #C2A68C; }
.hero-quote[data-category="wonder"]     { --energy: #A8B8BF; }
.hero-quote[data-category="gratitude"]  { --energy: #C7A14F; }
.hero-quote[data-category="compassion"] { --energy: #A8D9D1; }
.hero-quote[data-category="courage"]    { --energy: #C7B887; }
.hero-quote[data-category="stillness"]  { --energy: #B8946B; }

[data-theme="dark"] .hero-quote[data-category="presence"],
body.constellation .hero-quote[data-category="presence"] { --energy: #7A95A2; }

/* At night the wash's heart is lighter: a lantern behind paper. */
[data-theme="dark"] .hero .hero-quotes .hero-quote[data-category]::before,
body.constellation .hero .hero-quotes .hero-quote[data-category]::before {
  background:
    radial-gradient(ellipse 24% 42% at 48% 52%, color-mix(in srgb, var(--energy), #fff 30%), transparent),
    radial-gradient(ellipse var(--bloom-1, 20% 40% at 30% 52%), var(--energy), transparent),
    radial-gradient(ellipse var(--bloom-2, 20% 38% at 70% 48%), var(--energy), transparent),
    radial-gradient(ellipse var(--bloom-3, 26% 42% at 50% 50%), var(--energy), transparent);
}

.hero .hero-quotes .hero-quote.active[data-category]::before {
  animation: whisper-bloom 7.5s cubic-bezier(0.25, 0.6, 0.3, 1) both;
}

@keyframes whisper-bloom {
  0%, 8% { opacity: 0; transform: scale(0.8); }
  38% { opacity: var(--aura); transform: scale(1.05); }
  100% { opacity: calc(var(--aura) * 0.8); transform: scale(1); }
}

.hero-field {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1.4s ease;
}

.hero-field.is-ready { opacity: 1; }

/* "begin walking" stands where the path leaves the bottom edge, at the
   centre, whatever the inscription's alignment. */
.scroll-hint {
  z-index: 1;
  left: 50%;
  transform: translateX(-50%);
}

/* A short screen keeps only a band of field, so "begin walking" drops to
   where the path leaves the bottom edge rather than standing in grass. */
@media (max-height: 760px) {
  .hero { padding-top: clamp(3.5rem, 11vh, 6rem); }
  .hero .hero-title { font-size: clamp(3rem, 6vw, 4.6rem); }
  .scroll-hint { bottom: 1.25rem; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-field { transition: none; }
  .hero .hero-quotes .hero-quote.active[data-category]::before { animation: none; }
}

/* The path's line (js/path-line.js): the footpath goes on down the page
   as one line of ink and becomes the walk story's. Page coordinates; the
   script sets its top and height. The part in the story's first scene
   wears the scene's ink. */
.path-line {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  pointer-events: none;
  overflow: visible;
  color: var(--ink);
}

.path-line--lead {
  inset: 0;
  height: 100%;
  color: inherit;
}

/* Room below the field for the line to swing out of the column, and on
   a phone a margin for it to walk in beside the words. */
@media (min-width: 641px) {
  .philosophy { padding-top: 10rem; }
}

@media (max-width: 640px) {
  .philosophy,
  .not-pilgrim { padding-left: 2.25rem; }
}