/* =========================================================
   THE TANNING LADY — MOTION LAYER
   Full-screen menu, page veil, scroll reveals, micro-interactions.
   Everything here is cosmetic; the site works without it.
   ========================================================= */
:root {
  --ease-out: cubic-bezier(.22, .74, .18, 1);
  --ease-soft: cubic-bezier(.4, 0, .2, 1);
}

/* ---------- Header: compact on mobile, shadow on scroll ---------- */
.site-header { transition: box-shadow .3s ease, background-color .3s ease; }
.site-header.is-scrolled { box-shadow: 0 10px 30px rgba(23,19,16,.28); }
.logo-name { white-space: nowrap; font-size: clamp(1.15rem, 5vw, 1.5rem); }
.logo-tagline { white-space: nowrap; }
@media (max-width: 480px) {
  .header-inner { min-height: 64px; }
  .logo-tagline { display: none; }
  .header-actions { gap: 10px; }
}

/* ---------- Occasions script accent: inline on small screens ---------- */
@media (max-width: 699px) {
  .occasions-script { position: static; display: block; margin-top: 26px; text-align: left; }
}

/* ---------- Full-screen menu (below 900px) ---------- */
@media (max-width: 899px) {
  .main-nav {
    position: fixed;
    inset: 0;
    top: 0;
    max-height: none;
    overflow: hidden;
    background: rgba(23,19,16,.94);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    border: none;
    z-index: 99;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: calc(76px + env(safe-area-inset-top)) 28px calc(28px + env(safe-area-inset-bottom));
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .38s var(--ease-soft), visibility 0s linear .38s;
  }
  .main-nav.is-open {
    max-height: none;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: opacity .38s var(--ease-soft), visibility 0s;
  }
  .main-nav ul { flex-direction: column; gap: 0; padding: 0; }
  .main-nav li { border-bottom: none; }
  .main-nav .nav-link {
    display: block;
    padding: 10px 0;
    font-family: var(--font-heading);
    font-size: clamp(2rem, 9vw, 2.9rem);
    font-weight: 500;
    line-height: 1.15;
    color: var(--c-cream);
    border: none;
    opacity: 0;
    transform: translateY(26px);
    transition: opacity .5s var(--ease-out), transform .6s var(--ease-out), color .2s ease;
  }
  .main-nav .nav-link.current { color: var(--c-bronze); }
  .main-nav.is-open .nav-link { opacity: 1; transform: none; }
  .main-nav.is-open li:nth-child(1) .nav-link { transition-delay: .08s; }
  .main-nav.is-open li:nth-child(2) .nav-link { transition-delay: .15s; }
  .main-nav.is-open li:nth-child(3) .nav-link { transition-delay: .22s; }
  .main-nav.is-open li:nth-child(4) .nav-link { transition-delay: .29s; }
  .menu-extras {
    margin-top: auto;
    padding-top: 28px;
    border-top: 1px solid rgba(248,242,234,.12);
    display: flex;
    flex-direction: column;
    gap: 14px;
    opacity: 0;
    transform: translateY(18px);
    transition: opacity .5s var(--ease-out) .36s, transform .6s var(--ease-out) .36s;
  }
  .main-nav.is-open .menu-extras { opacity: 1; transform: none; }
  .menu-extras .script-accent { font-size: 1.7rem; color: var(--c-bronze); }
  .menu-extras a:not(.btn) { color: rgba(248,242,234,.72); font-size: .9rem; }
  .menu-extras a:not(.btn):hover { color: var(--c-cream); }
  .menu-extras .btn { align-self: flex-start; }
  body.menu-open { overflow: hidden; }
  body.menu-open .site-header { box-shadow: none; }
}
@media (min-width: 900px) {
  .menu-extras { display: none; }
}

/* Hamburger: keep it above the overlay and smooth the morph */
.hamburger { position: relative; z-index: 101; }
.hamburger span { transition: transform .32s var(--ease-out), opacity .2s ease; }

/* ---------- Desktop nav underline grows from the left ---------- */
@media (min-width: 900px) {
  .nav-link { position: relative; border-bottom: none; }
  .nav-link::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
    background: var(--c-bronze); transform: scaleX(0); transform-origin: left;
    transition: transform .3s var(--ease-out);
  }
  .nav-link:hover::after, .nav-link.current::after { transform: scaleX(1); }
}

/* ---------- Page veil (between pages) ---------- */
.page-veil {
  position: fixed; inset: 0; z-index: 3000;
  display: grid; place-items: center;
  background: var(--c-black);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .32s ease, visibility 0s linear .32s;
}
.page-veil.is-covering, .page-veil.is-covered {
  opacity: 1; visibility: visible; pointer-events: auto;
  transition: opacity .28s ease, visibility 0s;
}
.page-veil.is-revealing {
  opacity: 0; visibility: visible; pointer-events: none;
  transition: opacity .55s ease .12s, visibility 0s linear .7s;
}
.page-veil-mark {
  font-family: var(--font-heading); font-weight: 600; color: var(--c-cream);
  font-size: clamp(1.6rem, 6vw, 2.4rem); letter-spacing: .01em; white-space: nowrap;
  clip-path: inset(0 100% 0 0);
  transition: clip-path .5s var(--ease-out);
}
.page-veil-mark .heart { color: var(--c-bronze); margin-left: 4px; }
.page-veil.is-covering .page-veil-mark, .page-veil.is-covered .page-veil-mark { clip-path: inset(0 0 0 0); }

/* ---------- Scroll reveals ---------- */
html.js [data-reveal] {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .7s var(--ease-out), transform .8s var(--ease-out);
  transition-delay: calc(var(--d, 0) * 1ms);
}
html.js [data-reveal].is-in { opacity: 1; transform: none; }

/* Hero entrance */
html.js .hero-copy > * {
  opacity: 0; transform: translateY(18px);
  animation: tl-rise .8s var(--ease-out) forwards;
}
html.js .hero-copy > :nth-child(1) { animation-delay: .1s; }
html.js .hero-copy > :nth-child(2) { animation-delay: .2s; }
html.js .hero-copy > :nth-child(3) { animation-delay: .32s; }
html.js .hero-copy > :nth-child(4) { animation-delay: .44s; }
html.js .hero-media {
  opacity: 0; transform: scale(1.03) translateY(10px);
  animation: tl-settle 1.1s var(--ease-out) .25s forwards;
}
@keyframes tl-rise { to { opacity: 1; transform: none; } }
@keyframes tl-settle { to { opacity: 1; transform: none; } }

/* ---------- Micro-interactions ---------- */
.btn { transition: transform .22s var(--ease-out), box-shadow .22s ease, background .2s ease, color .2s ease, border-color .2s ease; }
.btn:hover { transform: translateY(-2px); }
.btn-whatsapp:hover { box-shadow: 0 14px 30px rgba(124,87,50,.35); }
.btn:active { transform: translateY(0) scale(.97); }
.btn svg { transition: transform .25s var(--ease-out); }
.btn:hover svg { transform: rotate(-8deg) scale(1.08); }

.media-frame img { transition: transform .9s var(--ease-out); }
.service-card { transition: transform .3s var(--ease-out), box-shadow .3s ease; }
.service-card:hover { transform: translateY(-5px); box-shadow: 0 22px 44px rgba(58,41,28,.14); }
.service-card:hover .media-frame img { transform: scale(1.05); }
.gallery-item { overflow: hidden; transition: transform .3s var(--ease-out); }
.gallery-item:hover .media-frame img, .gallery-item:focus-visible .media-frame img { transform: scale(1.06); }
.gallery-preview-grid a:hover .media-frame img { transform: scale(1.05); }
.filter-pill { transition: background .22s ease, color .22s ease, transform .22s var(--ease-out); }
.filter-pill:hover { transform: translateY(-1px); }
.benefit-icon { transition: transform .35s var(--ease-out), background .25s ease; }
.benefit:hover .benefit-icon { transform: translateY(-4px) rotate(-6deg); background: var(--c-beige-dark); }
.footer-social a { transition: transform .25s var(--ease-out), color .2s ease, border-color .2s ease; }
.footer-social a:hover { transform: translateY(-3px); }
.form-field input { transition: border-color .2s ease, background .2s ease, box-shadow .2s ease; }
.form-field input:focus { box-shadow: 0 0 0 4px rgba(161,115,74,.15); }
.lightbox .lightbox-box { animation: tl-settle .45s var(--ease-out) both; }

/* ---------- Reduced motion: switch it all off ---------- */
@media (prefers-reduced-motion: reduce) {
  html.js [data-reveal], html.js .hero-copy > *, html.js .hero-media { opacity: 1; transform: none; animation: none; transition: none; }
  .page-veil { display: none !important; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* ---------- Header pill collapses to icon on narrow phones ---------- */
@media (max-width: 430px) {
  .header-actions .btn-sm { padding: 10px; gap: 0; }
  .header-actions .btn-sm .btn-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .header-actions .btn-sm svg { width: 20px; height: 20px; }
}

/* Keep logo and header actions above the overlay (nav lives inside the header) */
@media (max-width: 899px) {
  .logo, .header-actions { position: relative; z-index: 101; }
}

/* Veil: keep the wordmark fully revealed while fading out on arrival */
.page-veil.is-revealing .page-veil-mark { clip-path: inset(0 0 0 0); transition: none; }

/* Veil: arrive already covered (class set in <head> before first paint) */
html.veil-in .page-veil { opacity: 1; visibility: visible; pointer-events: auto; transition: none; }
html.veil-in .page-veil-mark { clip-path: inset(0 0 0 0); transition: none; }
html.veil-in body { overflow: hidden; }

/* =========================================================
   Viewport hardening (iOS Safari / Android Chrome)
   ========================================================= */
html, body { max-width: 100%; overflow-x: hidden; }
body { position: relative; }
img, picture, svg, video { max-width: 100%; }
.hero, .occasions, .cta-band, .services-cta, .site-footer, main { overflow-x: clip; }
.btn { max-width: 100%; }
@media (max-width: 899px) {
  .main-nav {
    left: 0; right: 0; top: 0; bottom: 0;
    width: 100%;
    height: 100vh;
    height: 100dvh;
    max-height: 100dvh;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }
  .main-nav ul, .menu-extras { width: 100%; max-width: 100%; }
  .main-nav .nav-link { overflow-wrap: anywhere; }
  body.menu-open { position: fixed; width: 100%; top: calc(-1 * var(--menu-scroll-y, 0px)); }
}
.page-veil { width: 100%; max-width: 100vw; overflow: hidden; }