/* =========================================================================
 * Gratarean design system — companion to the Tailwind tokens in base.html.
 *
 * Alpine.js convention: every element with x-show / x-if whose initial state
 * is "hidden" MUST also have the x-cloak attribute, so it stays hidden until
 * Alpine boots. The rule below enforces that.
 * ========================================================================= */

[x-cloak] {
  display: none !important;
}

:root {
  --ink:   #1c1a17;
  --ember: #c4502a;
  --paper: #fbfaf8;
  --line:  rgba(28, 26, 23, 0.12);
}

html {
  scroll-behavior: smooth;
}

::selection {
  background: var(--ember);
  color: var(--paper);
}

/* --- Text link with ember underline ---------------------------------- */
.link-ember {
  position: relative;
}
.link-ember::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -3px;
  height: 1px;
  width: 100%;
  background: var(--ember);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .45s cubic-bezier(.2,.7,.2,1);
}
.link-ember:hover::after {
  transform: scaleX(1);
}

/* --- Primary CTA ----------------------------------------------------- */
.btn-ember {
  background: var(--ember);
  color: var(--paper);
  transition: background .4s, transform .4s;
}
.btn-ember:hover {
  background: #a93f1d;
  transform: translateY(-1px);
}

/* --- Reveal on scroll ------------------------------------------------ */
.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition:
    opacity 1.1s cubic-bezier(.2,.7,.2,1),
    transform 1.1s cubic-bezier(.2,.7,.2,1);
}
.reveal.in {
  opacity: 1;
  transform: none;
}

/* --- Image hover scale (paired with .group on the parent) ------------ */
.img-cover {
  transition: transform 1.2s cubic-bezier(.2,.7,.2,1);
}
.group:hover .img-cover {
  transform: scale(1.04);
}

/* --- Ember dot prefix on eyebrows ----------------------------------- */
.ember-dot::before {
  content: "";
  display: inline-block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--ember);
  margin-right: .7em;
  vertical-align: middle;
}

/* --- Sticky header scrolled state ----------------------------------- */
header#hdr {
  transition:
    background-color .4s ease,
    backdrop-filter .4s ease,
    -webkit-backdrop-filter .4s ease,
    border-color .4s ease;
}
header#hdr.is-scrolled {
  background-color: rgba(251, 250, 248, 0.72);
  backdrop-filter: blur(12px) saturate(140%);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  border-bottom: 1px solid var(--line);
}

/* --- Keyboard focus styles ------------------------------------------ */
.btn-ember:focus-visible,
.link-ember:focus-visible,
header nav a:focus-visible,
header button:focus-visible,
#mobile-menu a:focus-visible {
  outline: 2px solid var(--ember);
  outline-offset: 3px;
  border-radius: 2px;
}

/* --- Reduced motion -------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .img-cover,
  .group:hover .img-cover {
    transition: none;
    transform: none;
  }
  .btn-ember,
  .link-ember::after {
    transition: none;
  }
}