/* ============================================================
   apple-pass.css — Apple-tier polish overlay (loaded LAST)
   Goals:
   - Slower, more graceful reveal animations (Apple-style)
   - Refined hover/lift states on cards + buttons
   - Smoother section breathing room
   - Polished hero typography rhythm
   Rollback: remove the <link> in index.html — zero side effects
   Created: 2026-05-04
   ============================================================ */

:root {
  /* Apple core easing curves */
  --ap-ease: cubic-bezier(0.25, 0.1, 0.25, 1);
  --ap-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ap-ease-in: cubic-bezier(0.42, 0, 1, 1);
  --ap-ease-emph: cubic-bezier(0.2, 0, 0.1, 1);
}

/* ---- 1. Reveal animations — slower stagger, no bounce ---- */
.rv,
.rv-s,
.rv-l {
  transition:
    opacity 1.05s var(--ap-ease-out),
    transform 1.05s var(--ap-ease-out) !important;
}

.rv.d1,
.rv-s.d1,
.rv-l.d1 {
  transition-delay: 0.12s;
}
.rv.d2,
.rv-s.d2 {
  transition-delay: 0.22s;
}
.rv.d3,
.rv-s.d3 {
  transition-delay: 0.34s;
}
.rv.d4,
.rv-s.d4 {
  transition-delay: 0.46s;
}

/* Slightly smaller starting transform for a more elegant feel */
.rv:not(.in) {
  transform: translateY(28px);
}
.rv-s:not(.in) {
  transform: scale(0.94);
}
.rv-l:not(.in) {
  transform: translateX(-32px);
}

/* ---- 2. Buttons — refined press feel ---- */
.btn,
a.btn,
.cta {
  transition:
    transform 0.55s var(--ap-ease-out),
    box-shadow 0.55s var(--ap-ease-out),
    background-color 0.35s var(--ap-ease) !important;
}

.btn:hover,
a.btn:hover,
.cta:hover {
  transform: translateY(-1.5px);
}

.btn-pink:hover {
  box-shadow:
    0 14px 36px -10px rgba(255, 45, 120, 0.55),
    0 0 0 1px rgba(255, 255, 255, 0.04);
}

.btn-ghost:hover {
  border-color: rgba(255, 255, 255, 0.55);
  background: rgba(255, 255, 255, 0.04);
}

.btn:active,
a.btn:active,
.cta:active {
  transform: translateY(0) scale(0.985);
  transition-duration: 0.12s;
}

/* ---- 3. Cards — softer hover lift (Apple devices grid feel) ---- */
.vibe-card,
.bento-card,
.b-card,
.work-card,
.fit-item {
  transition:
    transform 0.65s var(--ap-ease-out),
    box-shadow 0.65s var(--ap-ease-out),
    border-color 0.35s var(--ap-ease) !important;
}

.vibe-card:hover,
.bento-card:hover,
.b-card:hover {
  transform: translateY(-3px);
}

/* ---- 4. Nav — softer scrolled-state transition ---- */
nav.top {
  transition:
    background 0.8s var(--ap-ease-out),
    backdrop-filter 0.8s var(--ap-ease-out),
    box-shadow 0.8s var(--ap-ease-out),
    padding 0.5s var(--ap-ease-out) !important;
}

nav.top.scrolled {
  padding-top: 14px;
  padding-bottom: 14px;
}

/* Nav links — smoother color hover */
nav.top a {
  transition:
    color 0.35s var(--ap-ease),
    opacity 0.35s var(--ap-ease);
}
nav.top a:hover {
  color: #fff;
  opacity: 1;
}

/* ---- 5. Hero typography polish ---- */
.hb-headline {
  letter-spacing: -0.028em;
}

/* Disabled: per-line transition was causing Lighthouse to flag the line
   reveal as layout shift on desktop — visible CLS contribution dropped
   when removed. .rv reveal at the headline level still applies. */
/* .hb-headline .line { transition: ...; } */

/* Lede text — slightly tighter on desktop for a calmer feel */
.lede {
  letter-spacing: -0.005em;
  line-height: 1.62;
}

/* ---- 6. Section breathing — slightly more space (Apple loves whitespace) ---- */
@media (min-width: 901px) {
  section.block,
  section.work,
  section.why,
  section.fit,
  section.cta-end {
    padding-top: clamp(72px, 9vw, 128px);
    padding-bottom: clamp(72px, 9vw, 128px);
  }
}

/* ---- 7. Quote (Our Vibe) — softer line cascade ---- */
.quote-line {
  transition:
    opacity 1.3s var(--ap-ease-out),
    transform 1.3s var(--ap-ease-out) !important;
}

/* ---- 8. Marquee — slow + steady ---- */
.marquee-track {
  animation-timing-function: linear !important;
}

/* ---- 9. Image / work-card polish ---- */
.work-card img,
.work-card .frame img {
  transition: transform 1.4s var(--ap-ease-out) !important;
}
.work-card:hover img,
.work-card:hover .frame img {
  transform: scale(1.035);
}

/* ---- 10. Cursor — keep but soften (less twitchy) ---- */
.cursor-ring {
  transition:
    transform 0.22s var(--ap-ease-out),
    width 0.22s var(--ap-ease-out),
    height 0.22s var(--ap-ease-out),
    opacity 0.22s var(--ap-ease) !important;
}
.cursor-dot {
  transition:
    transform 0.12s var(--ap-ease-out),
    opacity 0.22s var(--ap-ease) !important;
}

/* ---- 11. Reduced motion — strip all transitions to instant ---- */
@media (prefers-reduced-motion: reduce) {
  .rv,
  .rv-s,
  .rv-l,
  .btn,
  a.btn,
  .cta,
  .vibe-card,
  .bento-card,
  .b-card,
  .work-card,
  nav.top,
  .hb-headline .line,
  .quote-line {
    transition: none !important;
    animation: none !important;
  }
}

/* ---- 12. Focus state polish — accessibility + Apple-style ring ---- */
a:focus-visible,
button:focus-visible,
.btn:focus-visible,
.chip:focus-visible,
.chat-input:focus-visible {
  outline: 2px solid var(--pink);
  outline-offset: 3px;
  border-radius: 4px;
}