/* ===========================================================
   DF Hair Studio — shared stylesheet
   Cream / Ink / Bronze · Instrument Serif + Inter
   =========================================================== */

:root {
  --cream: #f4ece2;
  --cream-2: #efe4d6;
  --cream-3: #e9dccb;
  --ink: #191512;
  --ink-2: #221d18;
  --bronze: #a17c50;
  --bronze-deep: #876440;
}

html { scroll-behavior: smooth; }
body { font-family: "Poppins", sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
/* Headings — Poppins (the original site's font), used semibold like the old hero */
.font-display { font-family: "Poppins", sans-serif; font-weight: 600 !important; letter-spacing: -0.015em; }
.font-body { font-family: "Poppins", sans-serif; }

::selection { background: var(--ink); color: var(--cream); }

.eyebrow { letter-spacing: 0.28em; }

/* ---------- Scroll reveal ---------- */
.js .reveal { opacity: 0; transform: translateY(34px); transition: opacity 1.1s cubic-bezier(0.16,1,0.3,1), transform 1.1s cubic-bezier(0.16,1,0.3,1); will-change: opacity, transform; }
.js .reveal.active { opacity: 1; transform: translateY(0); }
.js .reveal-img { clip-path: inset(0 0 100% 0); transition: clip-path 1.3s cubic-bezier(0.77,0,0.175,1); will-change: clip-path; }
.js .reveal-img.active { clip-path: inset(0 0 0 0); }
.js .reveal-line { width: 0; transition: width 1.1s cubic-bezier(0.16,1,0.3,1); }
.js .reveal-line.active { width: 88px; }
.delay-1 { transition-delay: 0.10s; }
.delay-2 { transition-delay: 0.20s; }
.delay-3 { transition-delay: 0.32s; }
.delay-4 { transition-delay: 0.44s; }

/* ---------- Image treatment ---------- */
.img-frame { overflow: hidden; background: var(--cream-3); }
.img-frame img { transition: transform 1.4s cubic-bezier(0.16,1,0.3,1), filter 1.2s ease; }
.img-soft img { filter: saturate(0.72) contrast(1.02); }
.group:hover .img-soft img,
.img-frame:hover img { transform: scale(1.045); }
.group:hover .img-soft img { filter: saturate(0.95) contrast(1.02); }

/* ---------- Marquee ---------- */
.marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.marquee__track { display: inline-flex; align-items: center; white-space: nowrap; animation: marquee 38s linear infinite; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.marquee:hover .marquee__track { animation-play-state: paused; }

/* ---------- Nav ---------- */
#nav { transition: transform 0.5s cubic-bezier(0.16,1,0.3,1), background-color 0.5s ease, padding 0.4s ease, box-shadow 0.5s ease, border-color 0.5s ease; }
#nav.scrolled { background: rgba(244, 236, 226, 0.82); backdrop-filter: blur(14px); box-shadow: 0 1px 0 rgba(25,21,18,0.07); }
#nav.solid { background: rgba(244, 236, 226, 0.92); backdrop-filter: blur(14px); box-shadow: 0 1px 0 rgba(25,21,18,0.07); }
#nav.hide { transform: translateY(-104%); }
.nav-link { position: relative; opacity: 0.62; transition: opacity 0.3s ease; }
.nav-link:hover { opacity: 1; }
.nav-link.active { opacity: 1; }
.nav-link.active::after { content: ""; position: absolute; left: 50%; transform: translateX(-50%); bottom: -7px; width: 4px; height: 4px; border-radius: 50%; background: var(--bronze); }

/* ---------- Hero ---------- */
@keyframes kenburns { from { transform: scale(1.08); } to { transform: scale(1.15); } }
.kenburns { animation: kenburns 16s ease-out forwards; }
.hero-line { display: block; overflow: hidden; }
.js .hero-line > span { display: block; transform: translateY(110%); transition: transform 1.2s cubic-bezier(0.16,1,0.3,1); }
.js .hero-line.in > span { transform: translateY(0); }

/* ---------- Sub-page header ---------- */
.subhero { position: relative; }

/* ---------- Links ---------- */
.ul-link { position: relative; }
.ul-link::after { content: ""; position: absolute; left: 0; bottom: -3px; height: 1px; width: 100%; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform 0.5s cubic-bezier(0.16,1,0.3,1); }
.ul-link:hover::after { transform: scaleX(1); transform-origin: left; }

/* ---------- Price rows ---------- */
.price-row { display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: 1rem; padding: 0.85rem 0; border-bottom: 1px solid rgba(25,21,18,0.10); }
.price-row .leader { position: relative; }

/* ---------- Service editorial rows ---------- */
.svc-row { border-top: 1px solid rgba(25,21,18,0.12); }

/* ---------- Contact form ---------- */
.field { position: relative; }
.field input, .field textarea {
  width: 100%; background: transparent; border: 0; border-bottom: 1px solid rgba(25,21,18,0.22);
  padding: 0.85rem 0; font-family: "Poppins", sans-serif; font-weight: 300; font-size: 1rem; color: var(--ink);
  transition: border-color 0.4s ease;
}
.field textarea { resize: vertical; min-height: 120px; }
.field input:focus, .field textarea:focus { outline: none; border-color: var(--bronze); }
.field input::placeholder, .field textarea::placeholder { color: rgba(25,21,18,0.4); }

/* ---------- Mobile menu ---------- */
#mobileMenu { transition: opacity 0.45s ease, visibility 0.45s ease; }
#mobileMenu.open { opacity: 1; visibility: visible; }

.logo-invert { filter: invert(1) brightness(1.9) sepia(0.18) saturate(0.7); }

/* ---------- Gift voucher storefront ---------- */
.voucher-card { display: block; width: 100%; padding: 0; background: none; border: 0; cursor: pointer; }
.voucher-card .img-frame { position: relative; }
.voucher-card .img-frame::after {
  content: ""; position: absolute; inset: 0; border-radius: 3px;
  box-shadow: inset 0 0 0 0 var(--bronze); transition: box-shadow 0.25s ease; pointer-events: none;
}
.voucher-card:hover .img-frame { transform: translateY(-2px); }
.voucher-card .img-frame { transition: transform 0.3s cubic-bezier(0.16,1,0.3,1); }
.voucher-card.selected .img-frame::after { box-shadow: inset 0 0 0 3px var(--bronze); }
.voucher-card.selected .img-frame {
  position: relative;
}
.voucher-card.selected .img-frame > img { filter: none; }
/* selected check badge */
.voucher-card.selected .img-frame::before {
  content: "✓"; position: absolute; z-index: 2; top: 10px; right: 10px;
  width: 26px; height: 26px; border-radius: 50%; background: var(--bronze); color: #fff;
  display: flex; align-items: center; justify-content: center; font-size: 14px; line-height: 1;
}

.delivery-opt.selected { border-color: var(--bronze); background: rgba(161,124,80,0.07); }
.delivery-opt:hover { border-color: rgba(161,124,80,0.6); }

/* Stripe Payment Element sits on a white card inside the cream panel */
#payment-element { background: #fff; border: 1px solid rgba(25,21,18,0.10); border-radius: 4px; padding: 16px; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .reveal, .js .reveal-img, .js .reveal-line, .js .hero-line > span { opacity: 1 !important; transform: none !important; clip-path: none !important; width: auto !important; transition: none !important; }
  .reveal-line.active { width: 88px; }
  .kenburns, .marquee__track { animation: none !important; }
}