/* Square 99 — motion + life */

/* ── Reveal-on-scroll primitives ─────────────────────────── */
.reveal {
  opacity: 0;
  will-change: transform, opacity;
  transition:
    opacity .8s cubic-bezier(.2,.7,.2,1),
    transform .9s cubic-bezier(.2,.7,.2,1),
    filter .8s ease;
}
.reveal-up    { transform: translateY(24px); }
.reveal-down  { transform: translateY(-24px); }
.reveal-left  { transform: translateX(28px); }
.reveal-right { transform: translateX(-28px); }
.reveal-scale { transform: scale(0.94); }
.reveal-blur  { filter: blur(8px); transform: translateY(12px); }

.reveal.in {
  opacity: 1;
  transform: none;
  filter: none;
}

/* Respect users who don't want motion */
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; filter: none; transition: none; }
  .word, .marquee-track, .float-y, .float-rot, .pulse-soft, .map-pin .dot,
  .pattern-strip-tile { animation: none !important; }
}

/* ── Word-by-word hero entrance ──────────────────────────── */
.word-wrap {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
  padding: 0 .03em;
}
.word {
  display: inline-block;
  transform: translateY(110%) skewY(8deg);
  opacity: 0;
  animation: word-up 1s cubic-bezier(.2,.7,.2,1) forwards;
}
@keyframes word-up {
  to { transform: none; opacity: 1; }
}

/* ── Subtle ambient motion ───────────────────────────────── */
.float-y {
  animation: float-y 7s ease-in-out infinite;
}
@keyframes float-y {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-14px); }
}
.float-rot {
  animation: float-rot 18s linear infinite;
  transform-origin: center;
}
@keyframes float-rot {
  to { transform: rotate(360deg); }
}
.pulse-soft {
  animation: pulse-soft 3.2s ease-in-out infinite;
}
@keyframes pulse-soft {
  0%, 100% { opacity: 0.07; transform: scale(1); }
  50% { opacity: 0.14; transform: scale(1.04); }
}

/* drifting brand pattern (very subtle) */
.pattern-strip-tile {
  animation: pattern-drift 80s linear infinite;
  background-position: 0 0;
}
@keyframes pattern-drift {
  to { background-position: 600px 0; }
}

/* ── Marquee — pause on hover, fade edges ──────────────────── */
.marquee {
  position: relative;
  mask-image: linear-gradient(90deg, transparent 0%, #000 6%, #000 94%, transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 6%, #000 94%, transparent 100%);
}
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee-track .dot img {
  animation: spin-slow 12s linear infinite;
}
@keyframes spin-slow { to { transform: rotate(360deg); } }

/* ── Page transition (smooth cross-fade w/ ease) ─────────── */
.page-enter {
  animation: page-fade .7s cubic-bezier(.2,.7,.2,1) both;
}
@keyframes page-fade {
  from { opacity: 0; transform: translateY(16px) scale(0.995); filter: blur(6px); }
  to   { opacity: 1; transform: none;                        filter: none; }
}

/* ── Buttons: micro-interactions ──────────────────────────── */
.btn {
  position: relative;
  overflow: hidden;
}
.btn > * { position: relative; z-index: 1; }
.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--orange-deep);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .4s cubic-bezier(.7,0,.2,1);
  z-index: 0;
}
.btn:hover::before { transform: scaleX(1); transform-origin: left; }
.btn-orange:hover { color: #fff; }
.btn-ghost::before { background: var(--fg); }
.btn-ghost:hover { color: var(--bg); border-color: var(--fg); }
.btn:hover svg { transform: translateX(3px); transition: transform .25s ease; }
.btn svg { transition: transform .25s ease; }

/* Btn-arrow: animate underline + arrow */
.btn-arrow { position: relative; transition: color .2s ease; }
.btn-arrow svg { transition: transform .25s cubic-bezier(.2,.7,.2,1); }
.btn-arrow:hover svg { transform: translateX(5px); }

/* ── Nav link underline (replaces dot, more elegant) ──────── */
.nav-link::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -6px;
  height: 1.5px;
  background: var(--orange);
  border-radius: 2px;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .35s cubic-bezier(.2,.7,.2,1);
  width: auto;
  border-radius: 0;
}
.nav-link:hover::after { transform: scaleX(1); transform-origin: left; }
.nav-link.active::after { transform: scaleX(1); }

/* the dot variant — keep but smaller, only as fallback */
.nav-link.use-dot::after {
  left: 50%;
  width: 4px; height: 4px;
  border-radius: 50%;
  transform: translateX(-50%) scale(0);
}
.nav-link.use-dot.active::after { transform: translateX(-50%) scale(1); }

/* ── Service cards: enhanced hover ────────────────────────── */
.svc-card {
  cursor: pointer;
  transition: background .35s ease, color .35s ease;
}
.svc-card::after {
  content: "→";
  position: absolute;
  top: 24px; right: 28px;
  font-family: var(--f-mono);
  font-size: 14px;
  opacity: 0;
  transform: translateX(-8px);
  transition: opacity .25s ease, transform .25s ease;
  color: var(--orange);
}
.svc-card:hover::after { opacity: 1; transform: translateX(0); }
.svc-card h3 { transition: transform .35s cubic-bezier(.2,.7,.2,1); }
.svc-card:hover h3 { transform: translateY(-2px); }

/* ── Gallery tiles: zoom on hover, dim others ─────────────── */
.gallery-mosaic .cell {
  transition: transform .5s cubic-bezier(.2,.7,.2,1), filter .35s ease;
}
.gallery-mosaic:hover .cell { filter: brightness(0.7) saturate(0.85); }
.gallery-mosaic:hover .cell:hover {
  filter: brightness(1) saturate(1);
  transform: scale(1.02);
  z-index: 1;
}
.gallery-mosaic .cell .img-ph::after {
  transition: transform .8s cubic-bezier(.2,.7,.2,1), opacity .35s ease;
}
.gallery-mosaic .cell:hover .img-ph::after {
  transform: scale(1.1);
  opacity: 0.20;
}

/* ── Team cards: gentle lift ──────────────────────────────── */
.team-card .ph {
  transition: transform .5s cubic-bezier(.2,.7,.2,1);
}
.team-card:hover .ph { transform: translateY(-6px); }
.team-card h3 { transition: color .25s ease; }
.team-card:hover h3 { color: var(--orange); }

/* ── Stats: subtle hover wiggle ──────────────────────────── */
.stat .v {
  transition: transform .4s cubic-bezier(.2,.7,.2,1), color .25s ease;
  display: inline-block;
}
.stat:hover .v { transform: translateY(-3px); color: var(--orange); }

/* ── Date/time picker selection bounce ────────────────────── */
.date-cell, .time-cell {
  transition: all .2s cubic-bezier(.2,.7,.2,1);
}
.date-cell.selected, .time-cell.selected {
  animation: pop-in .35s cubic-bezier(.2,1.4,.4,1);
}
@keyframes pop-in {
  0% { transform: scale(0.94); }
  60% { transform: scale(1.04); }
  100% { transform: scale(1); }
}

/* ── Booking choice cards: orange flash on select ─────────── */
.book-choice, .barber-card {
  position: relative;
  overflow: hidden;
}
.book-choice.selected, .barber-card.selected {
  animation: select-flash .5s cubic-bezier(.2,.7,.2,1);
}
@keyframes select-flash {
  0% { box-shadow: inset 0 0 0 0 rgba(255,255,255,.4); }
  40% { box-shadow: inset 0 0 0 60px rgba(255,255,255,.18); }
  100% { box-shadow: inset 0 0 0 0 rgba(255,255,255,0); }
}

/* ── Step bar fill animation ──────────────────────────────── */
.book-step .bar { transition: background .4s ease; }

/* ── Confirmation check animation ─────────────────────────── */
.confirm .check {
  animation: check-pop .65s cubic-bezier(.2,1.5,.4,1) both;
}
@keyframes check-pop {
  0% { transform: scale(0); opacity: 0; }
  60% { transform: scale(1.12); opacity: 1; }
  100% { transform: scale(1); }
}

/* ── Hero CTA emphasis (subtle attract) ───────────────────── */
.hero .btn-orange::after {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 999px;
  border: 1.5px solid var(--orange);
  opacity: 0;
  animation: cta-ring 2.4s ease-out infinite;
  pointer-events: none;
}
@keyframes cta-ring {
  0% { transform: scale(.85); opacity: 0; }
  20% { opacity: 0.6; }
  100% { transform: scale(1.15); opacity: 0; }
}

/* ── Map pin: brand mark spinning slowly above pin ────────── */

/* ── Logo mark: gentle hover lift ─────────────────────────── */
.logo .logo-mark-img {
  transition: transform .35s cubic-bezier(.2,.7,.2,1), filter .3s ease;
}
.logo:hover .logo-mark-img {
  transform: rotate(-6deg) scale(1.04);
}

/* ── Pull-quote: animated highlight underline ─────────────── */
.pullquote .accent {
  display: inline-block;
}
.pullquote-mark {
  background-image: linear-gradient(180deg, transparent 78%, color-mix(in oklab, var(--orange) 25%, transparent) 78%, color-mix(in oklab, var(--orange) 25%, transparent) 96%, transparent 96%);
  padding: 0 4px;
  background-size: 100% 100%;
}

/* ── Hero deco: subtle float ──────────────────────────────── */
.hero-mark-deco { animation: float-y 9s ease-in-out infinite; }

/* ── WhatsApp float: bounce in, breathe ───────────────────── */
.wa-float {
  animation: wa-in .8s cubic-bezier(.2,1.5,.4,1) both, wa-breathe 3.4s ease-in-out infinite 1s;
}
@keyframes wa-in {
  from { transform: translateY(20px) scale(.6); opacity: 0; }
  to   { transform: none; opacity: 1; }
}
@keyframes wa-breathe {
  0%, 100% { box-shadow: 0 10px 28px rgba(0,0,0,.18), 0 0 0 0 rgba(37,211,102,.3); }
  50% { box-shadow: 0 10px 28px rgba(0,0,0,.18), 0 0 0 16px rgba(37,211,102,0); }
}

/* ── Footer link hover slide ──────────────────────────────── */
.footer-inner a {
  position: relative;
  padding-left: 0;
  transition: color .2s ease, padding-left .25s cubic-bezier(.2,.7,.2,1);
}
.footer-inner a::before {
  content: "→";
  position: absolute;
  left: -16px;
  opacity: 0;
  transition: left .25s cubic-bezier(.2,.7,.2,1), opacity .2s ease;
  color: var(--orange);
}
.footer-inner a:hover {
  padding-left: 16px;
}
.footer-inner a:hover::before {
  left: 0; opacity: 1;
}

/* ── Lang toggle: animated pill ──────────────────────────── */
.lang-toggle button {
  position: relative;
  transition: color .25s ease;
}
.lang-toggle button.active {
  transition: color .25s ease;
}

/* ── Section heads: large display gradient sweep on reveal ── */
.section-head h2 {
  background-image: linear-gradient(120deg, var(--fg) 35%, var(--orange) 50%, var(--fg) 65%);
  background-size: 200% 100%;
  background-position: 100% 0;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  transition: background-position 1.2s cubic-bezier(.2,.7,.2,1);
}
.reveal.in .section-head h2,
.section-head:hover h2 {
  background-position: 0 0;
}
.section-head.reveal.in h2 { background-position: 0 0; }

/* simpler: when the section-head wrapper has .in, slide it once */
.section-head { transition: opacity .8s ease, transform .9s cubic-bezier(.2,.7,.2,1); }

/* ── Pricing tag: subtle pulse on focus ──────────────────── */
.svc-card .price .amount {
  transition: color .25s ease, transform .25s ease;
}
.svc-card:hover .price .amount {
  color: var(--orange);
  transform: translateX(2px);
}
.svc-card:hover .price .dur { color: var(--cream); }
[data-palette="ink"] .svc-card:hover { background: var(--bg-panel); color: var(--cream); }

/* ── Hero title sweeping accent gradient on the orange word ─ */
.hero-title .accent {
  background: linear-gradient(110deg, var(--orange) 0%, var(--orange) 45%, color-mix(in oklab, var(--orange) 70%, white) 55%, var(--orange) 65%, var(--orange) 100%);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  animation: shimmer 4.5s ease-in-out infinite;
}
@keyframes shimmer {
  0%, 100% { background-position: 100% 0; }
  50% { background-position: -100% 0; }
}

/* ── Cursor for buttons / links ───────────────────────────── */
button, .btn, a { cursor: pointer; }

/* ── Stat hover: orange dot indicator ─────────────────────── */
.stat { position: relative; transition: background .25s ease; }
.stat::after {
  content: "";
  position: absolute;
  bottom: 20px; left: 24px;
  width: 6px; height: 6px;
  background: var(--orange);
  border-radius: 50%;
  opacity: 0;
  transform: scale(0);
  transition: opacity .25s ease, transform .35s cubic-bezier(.2,1.4,.4,1);
}
.stat:hover::after { opacity: 1; transform: scale(1); }

/* keep things crisp on Safari */
img, .img-ph, .gallery-mosaic .cell { -webkit-transform: translateZ(0); }