/* ==========================================================================
   Shared components
   ========================================================================== */

/* --- Buttons -------------------------------------------------------------- */

.btn {
  --btn-bg: var(--ink);
  --btn-ink: var(--cream);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.7rem;
  min-height: 3.5rem;
  padding: 0.45rem 0.55rem 0.45rem 1.5rem;
  border-radius: var(--r-pill);
  background: var(--btn-bg);
  color: var(--btn-ink);
  font-family: var(--font-body);
  font-size: 0.98rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.01em;
  white-space: nowrap;
  border: 1px solid transparent;
  transition: transform var(--dur) var(--ease-out),
    background-color var(--dur) var(--ease-out),
    box-shadow var(--dur) var(--ease-out),
    color var(--dur) var(--ease-out);
  will-change: transform;
}

.btn__arrow {
  display: grid;
  place-items: center;
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 50%;
  background: rgba(255, 245, 232, 0.14);
  transition: transform var(--dur) var(--ease-out),
    background-color var(--dur) var(--ease-out);
}

.btn__arrow svg {
  width: 1.05rem;
  height: 1.05rem;
  transition: transform var(--dur) var(--ease-out);
}

.btn:hover {
  transform: translateY(-2px);
  background: #2a3038;
  box-shadow: 0 18px 34px -20px rgba(52, 59, 69, 0.65);
}

.btn:hover .btn__arrow {
  background: rgba(255, 245, 232, 0.22);
}

.btn:hover .btn__arrow svg {
  transform: translateX(2px);
}

.btn:active {
  transform: translateY(0) scale(0.985);
}

.btn--ghost {
  --btn-bg: rgba(255, 255, 255, 0.42);
  --btn-ink: var(--ink);
  padding: 0.45rem 1.6rem;
  border-color: rgba(52, 59, 69, 0.16);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.btn--ghost:hover {
  background: var(--white);
  box-shadow: var(--shadow-sm);
}

.btn--light {
  --btn-bg: var(--cream);
  --btn-ink: var(--ink);
}

.btn--light .btn__arrow {
  background: rgba(52, 59, 69, 0.08);
}

.btn--light:hover {
  background: var(--white);
  box-shadow: 0 18px 34px -22px rgba(0, 0, 0, 0.55);
}

.btn--light:hover .btn__arrow {
  background: var(--sun);
}

.btn--sun {
  --btn-bg: var(--sun);
  --btn-ink: var(--ink);
}

.btn--sun .btn__arrow {
  background: rgba(52, 59, 69, 0.1);
}

.btn--sun:hover {
  background: #ffdf7e;
  box-shadow: 0 18px 34px -22px rgba(227, 185, 63, 0.75);
}

.btn--sun:hover .btn__arrow {
  background: rgba(52, 59, 69, 0.16);
}

.btn--block {
  width: 100%;
}

.btn[disabled],
.btn[aria-disabled='true'] {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

/* --- Text links ----------------------------------------------------------- */

.text-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-body);
  font-size: 0.92rem;
  font-weight: 800;
  letter-spacing: -0.005em;
  color: var(--ink);
  padding-block: 0.2rem;
  border-bottom: 1.5px solid transparent;
  transition: border-color var(--dur) var(--ease-out),
    color var(--dur) var(--ease-out);
}

.text-link svg {
  width: 1rem;
  height: 1rem;
  transition: transform var(--dur) var(--ease-out);
}

.text-link:hover {
  border-color: currentColor;
}

.text-link:hover svg {
  transform: translateX(3px);
}

.text-link--light {
  color: var(--cream);
}

/* --- Pills & tags --------------------------------------------------------- */

.pill {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.9rem;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.58);
  border: 1px solid rgba(52, 59, 69, 0.08);
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--ink-soft);
  line-height: 1;
  backdrop-filter: blur(8px);
}

.pill svg {
  width: 0.95rem;
  height: 0.95rem;
  color: var(--peach-deep);
}

.tag {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.38rem 0.7rem;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.74);
  border: 1px solid var(--line-soft);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  line-height: 1;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.tag--peach {
  background: var(--peach-soft);
  border-color: rgba(239, 143, 121, 0.16);
  color: #a9523f;
}

.tag--mint {
  background: var(--mint-soft);
  border-color: rgba(131, 185, 116, 0.18);
  color: #4f7a44;
}

.tag--sky {
  background: var(--sky-soft);
  border-color: rgba(120, 190, 223, 0.2);
  color: #3f7894;
}

.tag--sun {
  background: var(--sun-soft);
  border-color: rgba(227, 185, 63, 0.22);
  color: #987a1c;
}

.tag--light {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.16);
  color: rgba(255, 245, 232, 0.8);
}

/* --- Section index -------------------------------------------------------- */

.section-index {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  font-family: var(--font-body);
  font-size: var(--fs-eyebrow);
  font-weight: 800;
  letter-spacing: 0.18em;
  color: var(--ink-faint);
  text-transform: uppercase;
}

.section-index::after {
  content: '';
  width: clamp(2rem, 5vw, 4rem);
  height: 1px;
  background: currentColor;
  opacity: 0.4;
}

/* --- Scroll progress ------------------------------------------------------ */

.scroll-progress {
  position: fixed;
  inset: 0 0 auto;
  z-index: 10001;
  height: 3px;
  background: linear-gradient(90deg, var(--sun), var(--peach), var(--mint), var(--sky));
  transform: scaleX(0);
  transform-origin: 0 50%;
  pointer-events: none;
}

/* --- Marquee -------------------------------------------------------------- */

.marquee {
  position: relative;
  z-index: 2;
  overflow: hidden;
  padding-block: 1.05rem;
  background: var(--ink);
  color: var(--cream);
  transform: rotate(-1.2deg) scale(1.03);
  margin-block: -0.5rem;
}

.marquee__track {
  display: flex;
  width: max-content;
  will-change: transform;
}

.marquee__group {
  display: flex;
  align-items: center;
  gap: 1.6rem;
  padding-right: 1.6rem;
  font-family: var(--font-display);
  font-size: clamp(0.9rem, 1.5vw, 1.1rem);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
}

.marquee__group svg {
  width: 1.05rem;
  height: 1.05rem;
  color: var(--sun);
  flex: none;
}

.marquee__group span:nth-child(4n + 3) svg {
  color: var(--peach);
}

.marquee__group span:nth-child(4n + 5) svg {
  color: var(--mint);
}

/* --- Soft icon badge ------------------------------------------------------ */

.icon-badge {
  display: grid;
  place-items: center;
  width: 3.25rem;
  height: 3.25rem;
  border-radius: 1.1rem;
  background: var(--cream);
  color: var(--ink);
  border: 1px solid rgba(52, 59, 69, 0.06);
  flex: none;
}

.icon-badge svg {
  width: 1.45rem;
  height: 1.45rem;
}

.icon-badge--peach {
  background: var(--peach-soft);
  color: #b65842;
}

.icon-badge--sky {
  background: var(--sky-soft);
  color: #3f7894;
}

.icon-badge--mint {
  background: var(--mint-soft);
  color: #4f7a44;
}

.icon-badge--sun {
  background: var(--sun-soft);
  color: #987a1c;
}

/* --- Decorative floating bits -------------------------------------------- */

.deco {
  position: absolute;
  pointer-events: none;
  z-index: 0;
  color: var(--peach);
}

.deco--star {
  width: 22px;
  height: 22px;
  opacity: 0.75;
}

.deco--ring {
  width: 120px;
  height: 120px;
  border: 1.5px dashed rgba(52, 59, 69, 0.14);
  border-radius: 50%;
}

.deco--blob {
  width: 300px;
  height: 300px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, var(--peach-soft), transparent 68%);
  filter: blur(8px);
  opacity: 0.8;
}

/* --- Reveal defaults (set by JS, safe without JS) ------------------------ */

html.js [data-reveal] {
  opacity: 0;
  transform: translateY(26px);
}

/* Only use CSS transitions when GSAP is not driving the reveals. */
html.js:not(.has-gsap) [data-reveal] {
  transition: opacity 700ms var(--ease-out), transform 700ms var(--ease-out);
}

html.js [data-reveal='fade'] {
  transform: none;
}

html.js [data-reveal='left'] {
  transform: translateX(-30px);
}

html.js [data-reveal='right'] {
  transform: translateX(30px);
}

html.js [data-reveal='scale'] {
  transform: scale(0.94);
}

html.js [data-reveal] [data-reveal-line] {
  opacity: 0;
}

html.js.is-ready [data-reveal],
html.js [data-reveal].is-inview {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  html.js [data-reveal] {
    opacity: 1;
    transform: none;
    transition: none;
  }
}