/* ==========================================================================
   Flurto — aura.css
   Design layer. Loads last; consumes tokens.css only.

   THE IDEA (from the reference recording)
   The page is a single soft white card floating on warm ground. Photography
   carries the emotion; type stays dark, tight and quiet around it. Corners are
   pillowed, shadows are soft and low, cards tilt and overlap like objects on a
   table. Nothing is sharp, nothing is flat.

   MOTION follows Emil Kowalski's rules: strong custom ease-out (the built-in
   curves are too weak), everything under 300ms, transitions rather than
   keyframes so they can be interrupted, scale(0.97) press feedback, 40-60ms
   stagger, hover gated to real pointers, reduced-motion honoured.
   ========================================================================== */

/* ------------------------------------------------------- 0. the page card */
html { background: var(--color-white); }

/* The page runs edge to edge — no inset, no card, no tinted ground. */
body {
  background: var(--color-white);
  padding: 0;
}

.page-shell {
  background: var(--color-white);
  border-radius: 0;
  box-shadow: none;
}

/* ------------------------------------------------------------- 1. the nav */
/* Frosted by DEFAULT. The bar goes see-through only where there is a hero to
   float over — see the rule below. Defaulting the other way is how the page
   ended up scrolling visibly through it. */
.navbar {
  background: var(--surface-frost);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 0;
  box-shadow: none;
  position: sticky;
}

/* Float over the hero — but only at the top of a page that HAS one, and only
   until the reader scrolls.
   The old selector was `.navbar:has(~ #app-main .hero)`, which never matched
   anything: #app-main is a sibling of #app-header, not of the .navbar inside
   it, so the sibling combinator had nothing to walk. Anchoring on the shared
   ancestor is what makes it actually match. */
.page-shell:has(#app-main .hero) .navbar:not(.navbar--scrolled) {
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.navbar__link {
  position: relative;
  color: var(--color-ink-soft);
  font-weight: var(--weight-medium);
  border-radius: var(--radius-pill);
  padding-inline: 0.85rem;
  transition: color var(--dur-base) var(--ease-out),
              background-color var(--dur-base) var(--ease-out);
}
.navbar__link::after { content: none; }
@media (hover: hover) and (pointer: fine) {
  .navbar__link:hover { color: var(--color-ink); background: var(--blush); }
}
.navbar__link--active { color: var(--color-ink); font-weight: var(--weight-bold); background: var(--blush); }

/* ------------------------------------------------------------ 2. buttons */
.btn {
  border-radius: var(--radius-pill);
  font-weight: var(--weight-bold);
  min-block-size: 46px;
  border: 0;
  /* Emil: name the properties, never `all` */
  transition: transform var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out),
              background-color var(--dur-base) var(--ease-out);
}
/* press feedback — the interface confirming it heard you */
.btn:active { transform: scale(0.97); }

.btn--primary {
  background: var(--color-primary);
  color: var(--color-ink-strong);
  box-shadow: var(--shadow-coral);
}
@media (hover: hover) and (pointer: fine) {
  .btn--primary:hover { background: var(--color-primary-hover); box-shadow: var(--shadow-coral-strong); transform: translateY(-1px); }
  .btn--primary:active { transform: scale(0.97); }
}

.btn--ghost {
  background: var(--color-white);
  color: var(--color-ink);
  box-shadow: 0 0 0 1px var(--color-border-strong), var(--shadow-sm);
}
@media (hover: hover) and (pointer: fine) {
  .btn--ghost:hover { box-shadow: 0 0 0 1px var(--color-ink), var(--shadow-md); transform: translateY(-1px); }
  .btn--ghost:active { transform: scale(0.97); }
}
.btn--light { box-shadow: var(--shadow-md); }

/* -------------------------------------------------------- 3. section head */
/* Centred, with a small letterspaced eyebrow above — the reference's
   "MATCH YOUR LIFESTYLE" device. The eyebrow is the section's own subject. */
.section { padding-block: clamp(3rem, 2rem + 4.4vw, 6rem); }
.section--alt { background: var(--color-bg-alt); border: 0; }

.section__head {
  text-align: center;
  max-inline-size: 42rem;
  margin-inline: auto;
}
.section__head .section__title::before { content: none; }
.section__title { font-weight: var(--weight-bold); letter-spacing: -0.02em; }
.section__subtitle { margin-inline: auto; text-align: center; color: var(--color-ink-muted); }
.section__cta { text-align: center; }

/* ------------------------------------------------------- 4. floating cards */
.feature-card,
.event-card,
.post-card,
.step,
.pillar,
.testimonial,
.value-card {
  background: var(--color-white);
  border: 0;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  transition: transform var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .feature-card:hover,
  .event-card:hover,
  .post-card:hover,
  .pillar:hover,
  .value-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
}

.section--alt .feature-card,
.section--alt .step,
.section--alt .testimonial,
.section--alt .pillar { box-shadow: var(--shadow-xs); }

.feature-card__icon,
.pillar__icon {
  border-radius: var(--radius-md);
  background: var(--blush);
  border: 0;
}
.step__num {
  border-radius: 50%;
  background: var(--color-primary);
  color: var(--color-ink-strong);
  box-shadow: var(--shadow-coral);
}

/* ------------------------------------------------------------- 5. the hero */
.hero {
  background: transparent;
  border: 0;
  padding-block: clamp(2rem, 1.4rem + 3vw, 4rem) clamp(2.5rem, 1.6rem + 3.6vw, 4.5rem);
}
.hero__badge {
  border-radius: var(--radius-pill);
  background: var(--blush);
  border: 0;
  color: var(--eyebrow);
  font-weight: var(--weight-bold);
  letter-spacing: 0.02em;
}
.hero__title { letter-spacing: -0.03em; font-weight: var(--weight-bold); }
.hero__title em { font-style: normal; font-weight: 700; color: var(--color-primary-deep); }

/* stats float as one soft tile, not a bordered strip */
.hero__stats {
  gap: 0;
  border: 0;
  border-radius: var(--radius-lg);
  background: var(--color-white);
  box-shadow: var(--shadow-md);
  overflow: clip;
}
.hero__stats .stat { flex: 1 1 0; padding: 1rem 1.1rem; border: 0; }
.hero__stats .stat + .stat { box-shadow: inset 1px 0 0 var(--color-border); }
.stat__value { color: var(--color-ink); font-weight: var(--weight-bold); }

/* the phone tilts like an object resting on the page */
.hero__art .blob { display: none; }
.phone-mock {
  box-shadow: var(--shadow-xl);
  transform: rotate(-3deg);
  transition: transform var(--dur-slow) var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .hero__art:hover .phone-mock { transform: rotate(-1deg) translateY(-6px); }
}

/* --------------------------------------------------------- 6. photo tiles */
/* Photography is the emotion in this design, so covers get real height,
   pillowed corners and a gentle scale on hover. */
.event-card { overflow: clip; }
.event-card__cover,
.post-card__cover {
  border-radius: 0;
  border: 0;
  overflow: clip;
}
.event-card__cover--img img,
.post-card__cover { transition: transform var(--dur-slow) var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .event-card:hover .event-card__cover--img img { transform: scale(1.04); }
}
.post-card { overflow: clip; }
.post-card__category {
  border-radius: var(--radius-pill);
  background: var(--blush);
  color: var(--eyebrow);
  font-weight: var(--weight-bold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: var(--text-xs);
}

/* ------------------------------------------------------------ 7. cta band */
.cta-band {
  background: var(--color-ink);
  border-radius: var(--radius-2xl);
  overflow: clip;
}
.cta-band::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 1;
  background:
    radial-gradient(70% 120% at 12% 0%, rgba(245, 163, 28, 0.30), transparent 62%),
    radial-gradient(60% 100% at 100% 100%, rgba(245, 163, 28, 0.16), transparent 60%);
  background-size: auto;
}
.cta-band > * { position: relative; z-index: 1; }

/* ------------------------------------------------------------- 8. article */
.post__cover-img, .post__cover { border-radius: var(--radius-xl); }
.post__back {
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--blush);
  color: var(--eyebrow);
  font-weight: var(--weight-bold);
  transition: transform var(--dur-fast) var(--ease-out), background-color var(--dur-base) var(--ease-out);
}
.post__back:active { transform: scale(0.97); }

/* -------------------------------------------------------------- 9. footer */
.footer {
  background: var(--color-ink);
  border: 0;
}
.footer__col h3 {
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--ink-on-dark-faint);
}

/* ------------------------------------------------------------- 10. motion */
/* One orchestrated entrance. Transition-based so a fast scroll can interrupt
   and retarget it instead of restarting from zero. */
html.reveal-on .reveal:not(.is-visible) .grid > *,
html.reveal-on .reveal:not(.is-visible) .blog-grid > * {
  opacity: 0;
  transform: translateY(12px) scale(0.985);
  transition: opacity var(--dur-reveal) var(--ease-out),
              transform var(--dur-reveal) var(--ease-out);
  transition-delay: calc(var(--i, 0) * 45ms);
}
.reveal .grid > *,
.reveal .blog-grid > * {
  opacity: 1;
  transform: none;
  transition: opacity var(--dur-reveal) var(--ease-out),
              transform var(--dur-reveal) var(--ease-out);
  transition-delay: calc(var(--i, 0) * 45ms);
}
.reveal .grid > *:nth-child(2),  .reveal .blog-grid > *:nth-child(2)  { --i: 1; }
.reveal .grid > *:nth-child(3),  .reveal .blog-grid > *:nth-child(3)  { --i: 2; }
.reveal .grid > *:nth-child(4),  .reveal .blog-grid > *:nth-child(4)  { --i: 3; }
.reveal .grid > *:nth-child(5),  .reveal .blog-grid > *:nth-child(5)  { --i: 4; }
.reveal .grid > *:nth-child(6),  .reveal .blog-grid > *:nth-child(6)  { --i: 5; }

/* Reduced motion: keep the fade (it aids comprehension), drop the movement. */
@media (prefers-reduced-motion: reduce) {
  .reveal .grid > *,
  .reveal .blog-grid > * { transform: none; transition-duration: 200ms; transition-delay: 0ms; }
  .phone-mock, .btn, .feature-card, .event-card, .post-card { transition: none; }
}

/* -------------------------------------------------------------- 11. a11y */
:focus-visible {
  outline: var(--focus-width) solid var(--color-ink);
  outline-offset: var(--focus-offset);
}

@media (max-width: 860px) {
  .hero__stats .stat { padding: 0.8rem 0.55rem; }
}

/* admin bar coexists with the page inset (it sets padding-block-start alone) */
html.has-admin-bar body { padding-block-start: var(--admin-bar-h); }

@media (prefers-reduced-motion: reduce) {
  .phone-mock { transition: none; }
}