/* ==========================================================================
   Safe Haven — motion & micro-interactions
   Gentle, warm, never in the way. Everything here is switched off for
   visitors who ask their device for reduced motion (see bottom of file).
   Content is only hidden for animation when JS is running (html.js).
   ========================================================================== */

:root {
  --ease-out: cubic-bezier(.22, .61, .36, 1);
  --ease-soft: cubic-bezier(.4, 0, .2, 1);
}

/* ---- Scroll progress: a thin gold thread across the top ---------------- */
.scroll-thread {
  position: fixed; inset: 0 0 auto 0; height: 2px; z-index: 60;
  background: linear-gradient(90deg, var(--purple-2, #7a2bb8), var(--gold));
  transform-origin: 0 50%; transform: scaleX(0);
  pointer-events: none;
}

/* ---- Header settles in after you start scrolling ----------------------- */
.site-header { transition: background .35s var(--ease-soft), box-shadow .35s var(--ease-soft), backdrop-filter .35s; }
.site-header.is-scrolled {
  box-shadow: 0 10px 30px rgba(0, 0, 0, .45);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.site-header .logo img { transition: transform .35s var(--ease-out); }
.site-header .logo:hover img { transform: scale(1.03); }

/* Nav links: gold underline grows from the center */
.nav a { position: relative; }
.nav a:not([aria-current])::after {
  content: ""; position: absolute; left: 50%; right: 50%; bottom: -4px; height: 1px;
  background: var(--gold); transition: left .3s var(--ease-out), right .3s var(--ease-out);
}
.nav a:not([aria-current]):hover::after, .nav a:not([aria-current]):focus-visible::after { left: 0; right: 0; }

/* ---- Hero entrance ------------------------------------------------------ */
@keyframes rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes photo-in { from { opacity: 0; transform: translateY(24px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes write-in { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes heartbeat { 0%, 100% { transform: scale(1); } 15% { transform: scale(1.25); } 30% { transform: scale(1); } 45% { transform: scale(1.15); } }
@keyframes draw { to { stroke-dashoffset: 0; } }

.js .hero .wrap > div:first-child > * { opacity: 0; animation: rise .9s var(--ease-out) forwards; }
.js .hero .eyebrow     { animation-delay: .10s !important; }
.js .hero h1           { animation-delay: .22s !important; }
.js .hero .hero-lead   { animation-delay: .38s !important; }
.js .hero .btn-row     { animation-delay: .52s !important; }
.js .hero .trust       { animation-delay: .66s !important; }

.js .hero-photo { opacity: 0; animation: photo-in 1.1s var(--ease-out) .35s forwards; }
.js .hero-photo .script-note { clip-path: inset(0 100% 0 0); animation: write-in 1.6s var(--ease-soft) 1.25s forwards; }
.script-note .beat { display: inline-block; transform-origin: 50% 60%; }
.js .script-note .beat { animation: heartbeat 1.4s ease-in-out 2.9s 1; }
.hero-photo:hover .script-note .beat { animation: heartbeat 1.2s ease-in-out infinite; }

/* Hero photo: soft tilt toward the cursor (JS sets --rx / --ry) */
.hero-photo img { transition: transform .5s var(--ease-out), box-shadow .5s var(--ease-out); transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); }

/* Swoosh: the gold line draws itself across the page */
.js .hero .swoosh path:nth-child(3) { stroke-dasharray: 1600; stroke-dashoffset: 1600; animation: draw 2.2s var(--ease-soft) .6s forwards; }

/* Page heroes on inner pages */
.js .page-hero .wrap > * { opacity: 0; animation: rise .9s var(--ease-out) forwards; }
.js .page-hero .wrap > *:nth-child(2) { animation-delay: .12s; }
.js .page-hero .wrap > *:nth-child(3) { animation-delay: .24s; }
.js .page-hero .wrap > *:nth-child(4) { animation-delay: .36s; }

/* ---- Floating hearts in the hero background ---------------------------- */
.hero-hearts { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 0; }
.page-hero { position: relative; overflow: hidden; }
.hero > .wrap, .page-hero > .wrap { position: relative; z-index: 1; }
.hero-hearts span {
  position: absolute; bottom: -30px; color: var(--gold); opacity: 0;
  font-size: var(--s, 14px); left: var(--x, 50%);
  animation: float-up var(--d, 16s) linear var(--delay, 0s) infinite;
}
@keyframes float-up {
  0%   { transform: translate(0, 0) rotate(-8deg); opacity: 0; }
  10%  { opacity: var(--o, .18); }
  50%  { transform: translate(var(--drift, 20px), calc(var(--rise, 90vh) / -2)) rotate(8deg); }
  90%  { opacity: var(--o, .18); }
  100% { transform: translate(0, calc(var(--rise, 90vh) * -1)) rotate(-6deg); opacity: 0; }
}

/* ---- Scroll reveal ------------------------------------------------------ */
.js [data-reveal] { opacity: 0; transform: translateY(26px); transition: opacity .8s var(--ease-out), transform .8s var(--ease-out); transition-delay: var(--stagger, 0s); }
.js [data-reveal="left"]  { transform: translateX(-30px); }
.js [data-reveal="right"] { transform: translateX(30px); }
.js [data-reveal="zoom"]  { transform: scale(.96); }
.js [data-reveal].is-in   { opacity: 1; transform: none; }

/* On narrow screens, side-slides become gentle rises (no sideways overflow). */
@media (max-width: 900px) {
  .js [data-reveal="left"], .js [data-reveal="right"] { transform: translateY(22px); }
}
.band, .cta, .site-footer { overflow-x: clip; }

/* Eyebrow lines stretch out once the heading appears */
.js .eyebrow.lined::before, .js .eyebrow.lined::after, .js .eyebrow.lined-l::before { transform: scaleX(0); transition: transform .9s var(--ease-out) .25s; }
.js .eyebrow.lined::before { transform-origin: 100% 50%; }
.js .eyebrow.lined::after, .js .eyebrow.lined-l::before { transform-origin: 0 50%; }
.js .is-in .eyebrow.lined::before, .js .is-in .eyebrow.lined::after, .js .is-in .eyebrow.lined-l::before,
.js .eyebrow.is-in::before, .js .eyebrow.is-in::after,
.js .hero .eyebrow::before, .js .page-hero .eyebrow::before, .js .page-hero .eyebrow::after { transform: scaleX(1); }

/* ---- Cards & panels: warm glow that follows the cursor ----------------- */
.card, .panel, .price-card { position: relative; isolation: isolate; }
.card::before, .panel::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; z-index: -1; pointer-events: none;
  background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%), rgba(214, 168, 78, .14), transparent 65%);
  opacity: 0; transition: opacity .4s var(--ease-soft);
}
.card:hover::before, .panel:hover::before { opacity: 1; }
.panel { transition: transform .35s var(--ease-out), border-color .35s var(--ease-out); }
.panel:hover { transform: translateY(-4px); border-color: var(--gold); }

.card { overflow: hidden; }
.card-img { transition: transform .9s var(--ease-out); }
.card:hover .card-img { transform: scale(1.06); }
.card-badge { transition: transform .5s var(--ease-out); }
.card:hover .card-badge { transform: translateY(-3px) rotate(-6deg); }

/* Icon rings breathe gently on hover */
.ring { transition: transform .4s var(--ease-out), box-shadow .4s var(--ease-out); }
.panel:hover .ring, .feature:hover .ring { transform: scale(1.08); box-shadow: 0 0 0 6px rgba(214, 168, 78, .12); }

/* Photos: slow, subtle zoom on hover */
.photo-frame, .why-photo, .service-detail > img, .service-detail .crop { overflow: hidden; }
.photo-frame img, .why-photo img { transition: transform 1.2s var(--ease-out); }
.photo-frame:hover img, .why-photo:hover img { transform: scale(1.04); }

/* ---- Buttons & links ---------------------------------------------------- */
.btn { position: relative; overflow: hidden; }
.btn::after { transition: transform .3s var(--ease-out); }
.btn:hover::after { transform: translateX(4px); }
.btn-purple::before, .btn-gold::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .28), transparent);
  transform: skewX(-20deg); transition: left .7s var(--ease-soft); pointer-events: none;
}
.btn-purple:hover::before, .btn-gold:hover::before { left: 130%; }
.btn-purple:hover { box-shadow: 0 10px 28px rgba(94, 27, 145, .6); }
.btn:active { transform: translateY(0) scale(.98); }

.link-arrow::after { display: inline-block; transition: transform .3s var(--ease-out); }
.link-arrow:hover::after { transform: translateX(4px); }

/* Phone number: tiny ring wiggle to invite a call */
@keyframes ring-wiggle { 0%, 100% { transform: rotate(0); } 20% { transform: rotate(-12deg); } 40% { transform: rotate(10deg); } 60% { transform: rotate(-6deg); } 80% { transform: rotate(4deg); } }
.header-phone::before { display: inline-block; transform-origin: 50% 60%; }
.header-phone:hover::before { animation: ring-wiggle .7s ease-in-out; }

/* ---- Little hearts that pop from a clicked button ----------------------- */
.heart-pop {
  position: fixed; z-index: 80; pointer-events: none; color: var(--gold);
  font-size: 14px; line-height: 1; transform: translate(-50%, -50%);
  animation: heart-pop .9s var(--ease-out) forwards;
}
@keyframes heart-pop {
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(.4); }
  20%  { opacity: 1; }
  100% { opacity: 0; transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(1.1) rotate(var(--r)); }
}

/* ---- Footer: back-to-top -------------------------------------------- */
.to-top {
  position: fixed; right: 20px; bottom: 20px; z-index: 50;
  width: 46px; height: 46px; border-radius: 50%;
  display: grid; place-items: center; cursor: pointer;
  background: rgba(13, 11, 15, .85); color: var(--gold);
  border: 1px solid var(--gold); font-size: 1.1rem;
  opacity: 0; transform: translateY(12px); pointer-events: none;
  transition: opacity .35s var(--ease-out), transform .35s var(--ease-out), background .25s;
}
.to-top.show { opacity: 1; transform: none; pointer-events: auto; }
.to-top:hover { background: var(--purple); }
.to-top:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

/* ---- Respect visitors who prefer less motion --------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; transition-delay: 0s !important; }
  .js [data-reveal], .js .hero .wrap > div:first-child > *, .js .hero-photo, .js .page-hero .wrap > * { opacity: 1 !important; transform: none !important; }
  .js .hero-photo .script-note { clip-path: none !important; }
  .js .hero .swoosh path { stroke-dashoffset: 0 !important; }
  .js .eyebrow::before, .js .eyebrow::after { transform: none !important; }
  .hero-hearts, .scroll-thread { display: none; }
  html { scroll-behavior: auto; }
}