:root{
  --elev: 28px;
  --ease: cubic-bezier(.21,1,.21,1);
  --ring: 0 0 0 3px rgba(0, 131, 255, .24);
}
:where(a, button, [role="button"], .btn):focus-visible{ outline: none; box-shadow: var(--ring); border-radius: 12px; }
html{ scroll-behavior: smooth; }
[data-animate]{ opacity: 0; transform: translateY(12px); transition: opacity .7s var(--ease), transform .7s var(--ease), filter .7s var(--ease); will-change: opacity, transform, filter; }
[data-animate].in-view{ opacity:1; transform:none; }
[data-animate="fade-up"]{ transform: translateY(18px); }
[data-animate="slide-up"]{ transform: translateY(24px); }
[data-animate="zoom-in"]{ transform: scale(.96); }
[data-animate="fade"]{ transform: none; filter: blur(2px); }
[data-animate="fade"].in-view{ filter: blur(0); }
.reveal-stagger > *[data-animate]{ transition-delay: calc(var(--i, 0) * 80ms); }
.btn.delight{ position: relative; overflow: hidden; transition: transform .2s ease, box-shadow .3s ease; }
.btn.delight:hover{ transform: translateY(-1px); box-shadow: 0 10px 24px -12px rgba(0,0,0,.25); }
.btn.delight:active{ transform: translateY(0); box-shadow:none; }
.btn.delight .ripple{ position:absolute; inset:auto; width:10px; height:10px; border-radius:999px; opacity:.35; pointer-events:none; transform: translate(-50%,-50%) scale(1); animation: ripple .6s ease-out forwards; background: radial-gradient(circle closest-side, currentColor, transparent 70%); }
@keyframes ripple{ to{ opacity:0; transform: translate(-50%,-50%) scale(28); } }
.to-top{ position: fixed; right: 18px; bottom: 18px; width:44px; height:44px; border-radius: 999px; border:none; background:#111; color:#fff; font-size:18px; display:grid; place-items:center; box-shadow: 0 10px 24px -10px rgba(0,0,0,.35); cursor: pointer; opacity:0; transform: translateY(12px); transition: opacity .3s ease, transform .3s ease, background .2s ease; z-index: 50; }
.to-top.show{ opacity:1; transform:none; }
.to-top:hover{ background:#000; }
.hero-img.parallax{ transition: transform .08s linear; will-change: transform; }
/* Cards/Details */
.card, details{ transition: transform .25s var(--ease), box-shadow .25s var(--ease); }
.card:hover, details[open]{ transform: translateY(-2px); box-shadow: 0 var(--elev) calc(var(--elev)*1.4) -20px rgba(0,0,0,.20); }
/* Joyful link underline */
a[href]:not(.btn){ text-decoration: none; background-image: linear-gradient(currentColor,currentColor); background-repeat: no-repeat; background-size: 0% 1px; background-position: 0 100%; transition: background-size .35s var(--ease); }
a[href]:not(.btn):hover{ background-size: 100% 1px; }
/* Breathing gradient */
.hero-wrap{ position: relative; overflow: hidden; }
.hero-breath{ position:absolute; inset:0; pointer-events:none; opacity:.22; mix-blend-mode: multiply;
  background: radial-gradient(40% 60% at 20% 30%, rgba(255,175,189,.85), transparent 60%),
              radial-gradient(35% 55% at 80% 30%, rgba(196,224,229,.90), transparent 60%),
              radial-gradient(60% 60% at 50% 80%, rgba(255,239,186,.85), transparent 60%);
  transform: scale(1);
  animation: breathe-scale 14s ease-in-out infinite, breathe-shift 28s linear infinite;
}
@keyframes breathe-scale{ 0%,100%{ transform: scale(1.00); } 50%{ transform: scale(1.04); } }
@keyframes breathe-shift{
  0%{ background-position: 0% 0%, 100% 0%, 50% 100%; }
  50%{ background-position: 10% 8%, 92% 6%, 46% 92%; }
  100%{ background-position: 0% 0%, 100% 0%, 50% 100%; }
}
/* Page fade overlay */
body::after{ content:""; position: fixed; inset: 0; background: #fff; pointer-events: none; opacity: 0; transition: opacity .22s ease; z-index: 999; }
body.fade-ready::after{ opacity: 1; }
body.is-fading::after{ opacity: 1; }
/* Reduce motion */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  [data-animate]{ transition: none !important; opacity: 1 !important; transform: none !important; filter:none !important; }
  .hero-img.parallax{ transition: none !important; }
  .btn.delight .ripple{ display:none !important; }
  .hero-breath{ animation: none !important; }
  body::after{ transition: none !important; opacity: 0 !important; }
}


/* Make breathing gradient sit under image when using fixed hero */
.hero-fixed .hero-breath{ z-index: 0; }
.hero-fixed .hero-img{ position: relative; z-index: 1; transform-origin: center; }