/* Oz Digital - scroll reveal + extra interaction polish.
 * Loaded after kit.css / pages.css on every page. */

/* ---------- Scroll reveal ---------- */
.oz-reveal {
  opacity: 0;
  transform: translateY(26px);
  transition:
    opacity 0.6s var(--ease-out),
    transform 0.6s var(--ease-out);
  transition-delay: var(--oz-delay, 0ms);
  will-change: opacity, transform;
}
.oz-reveal.is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .oz-reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* ---------- Scroll progress bar ---------- */
.oz-progress {
  position: fixed; top: 0; left: 0; height: 3px; width: 0;
  background: var(--oz-amber-500);
  z-index: 60; pointer-events: none;
  transition: width 90ms linear;
}

/* ---------- Richer hover states (layered on top of existing rules) ---------- */

/* Service tiles: icon pops, faint amber wash sweeps up */
.oz-svc { position: relative; }
.oz-svc::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(180deg, transparent 55%, var(--oz-amber-50) 100%);
  opacity: 0; transition: opacity var(--dur-base) var(--ease-out);
}
.oz-svc--link:hover::after { opacity: 1; }
.oz-svc__icon { transition: transform var(--dur-base) var(--ease-out), background var(--dur-base); }
.oz-svc--link:hover .oz-svc__icon { transform: rotate(-6deg) scale(1.08); }

/* Process steps: top rule fills amber left-to-right on hover */
.ozk-step { transition: transform var(--dur-base) var(--ease-out); }
.ozk-step::before {
  content: ''; position: absolute; top: -2px; left: 0; height: 2px; width: 0;
  background: var(--oz-amber-500); transition: width var(--dur-slow) var(--ease-out);
}
.ozk-step:hover { transform: translateY(-4px); }
.ozk-step:hover::before { width: 100%; }

/* Value cards lift with amber icon spin */
.ozk-value { transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), border-color var(--dur-base); }
.ozk-value:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: transparent; }
.ozk-value__icon { transition: transform var(--dur-base) var(--ease-out); }
.ozk-value:hover .ozk-value__icon { transform: rotate(-8deg) scale(1.08); }

/* Portfolio result label slides up + underline grow on the title */
.ozk-pcard__foot h3 { position: relative; }
.ozk-pcard__result { display: inline-block; transition: transform var(--dur-base) var(--ease-out); }
.ozk-pcard:hover .ozk-pcard__result { transform: translateY(-2px); }

/* Include rows: icon fills amber + nudges right on hover */
.ozk-include { transition: background var(--dur-base); border-radius: var(--radius-md); }
.ozk-include:hover { background: var(--surface-brand-soft); }
.ozk-include__icon { transition: transform var(--dur-base) var(--ease-out), background var(--dur-base), color var(--dur-base); }
.ozk-include:hover .ozk-include__icon { background: var(--oz-amber-500); color: var(--oz-ink-900); transform: translateX(3px); }

/* Blog media zoom on hover */
.ozk-post__media, .ozk-feature-post__media { overflow: hidden; }
.ozk-post__media svg, .ozk-feature-post__media { transition: transform var(--dur-slow) var(--ease-out); }
.ozk-post:hover .ozk-post__media svg { transform: scale(1.15) rotate(-4deg); }

/* Social + logo micro-interactions */
.ozk-social__btn { transition: background var(--dur-base), color var(--dur-base), transform var(--dur-base) var(--ease-out); }
.ozk-social__btn:hover { transform: translateY(-3px); }
.ozk-header__logo img { transition: transform var(--dur-base) var(--ease-out); }
.ozk-header__logo:hover img { transform: scale(1.05); }

/* Skill badges on profile pop slightly */
.ozk-member-hero__skills .oz-badge { transition: transform var(--dur-fast) var(--ease-out), background var(--dur-fast), color var(--dur-fast); cursor: default; }
.ozk-member-hero__skills .oz-badge:hover { transform: translateY(-2px); background: var(--oz-amber-500); color: var(--oz-ink-900); box-shadow: inset 0 0 0 1.5px var(--oz-amber-500); }

/* Filter chips lift a touch */
.ozk-filters .ozk-chip, .ozk-postcats .ozk-chip { transition: all var(--dur-fast) var(--ease-out); }
.ozk-filters .ozk-chip:hover, .ozk-postcats .ozk-chip:hover { transform: translateY(-2px); }

/* Nav link count-in underline already exists; add subtle lift to CTA button group on hero */
.ozk-phero__actions .oz-btn, .ozk-hero__actions .oz-btn { transition: transform var(--dur-fast) var(--ease-out), background var(--dur-base), box-shadow var(--dur-base), border-color var(--dur-base), color var(--dur-base); }

/* Fact icon wobble already set in pages.css; add a gentle float-in emphasis handled by reveal */

/* ---------- Directional scroll reveals ---------- */
.oz-reveal.oz-rv-left { transform: translateX(-56px); }
.oz-reveal.oz-rv-right { transform: translateX(56px); }
.oz-reveal.oz-rv-zoom { transform: translateY(18px) scale(0.92); }
.oz-reveal.oz-rv-slide { transform: translateX(-24px); }
.oz-reveal.oz-rv-left, .oz-reveal.oz-rv-right, .oz-reveal.oz-rv-zoom {
  transition: opacity 0.8s var(--ease-out), transform 0.8s cubic-bezier(.2,.8,.2,1);
  transition-delay: var(--oz-delay, 0ms);
}
.oz-reveal.is-visible.oz-rv-left, .oz-reveal.is-visible.oz-rv-right,
.oz-reveal.is-visible.oz-rv-zoom, .oz-reveal.is-visible.oz-rv-slide { transform: none; }

/* ---------- Page-load entrances ---------- */
@keyframes oz-in-up { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }
@keyframes oz-in-right { from { opacity: 0; transform: translateX(70px) rotate(2deg); } to { opacity: 1; transform: none; } }
@keyframes oz-in-pop { 0% { opacity: 0; transform: scale(.6); } 70% { opacity: 1; transform: scale(1.06); } 100% { opacity: 1; transform: none; } }
@keyframes oz-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }

.ozk-hero__copy > *, .ozk-case-hero__copy > *, .ozk-member-hero__intro > * { opacity: 0; animation: oz-in-up 0.8s var(--ease-out) forwards; }
.ozk-hero__copy > :nth-child(1), .ozk-case-hero__copy > :nth-child(1), .ozk-member-hero__intro > :nth-child(1) { animation-delay: .05s; }
.ozk-hero__copy > :nth-child(2), .ozk-case-hero__copy > :nth-child(2), .ozk-member-hero__intro > :nth-child(2) { animation-delay: .15s; }
.ozk-hero__copy > :nth-child(3), .ozk-case-hero__copy > :nth-child(3), .ozk-member-hero__intro > :nth-child(3) { animation-delay: .25s; }
.ozk-hero__copy > :nth-child(4), .ozk-case-hero__copy > :nth-child(4), .ozk-member-hero__intro > :nth-child(4) { animation-delay: .35s; }
.ozk-hero__copy > :nth-child(5), .ozk-case-hero__copy > :nth-child(5), .ozk-member-hero__intro > :nth-child(5) { animation-delay: .45s; }
.ozk-hero__copy > :nth-child(n+6), .ozk-case-hero__copy > :nth-child(n+6), .ozk-member-hero__intro > :nth-child(n+6) { animation-delay: .55s; }

.ozk-hero__card { opacity: 0; animation: oz-in-right 1s cubic-bezier(.2,.8,.2,1) .25s forwards; }
.ozk-hero__float { opacity: 0; animation: oz-in-pop .6s var(--ease-out) forwards, oz-bob 4.5s ease-in-out infinite; }
.ozk-hero__float--a { animation-delay: .9s, 1.5s; }
.ozk-hero__float--b { animation-delay: 1.1s, 2.6s; }
.ozk-hero__badge { opacity: 0; animation: oz-in-pop .5s var(--ease-out) .8s forwards; }

/* Highlighted words sweep in when their heading appears */
.oz-reveal .ozk-hl, .ozk-hero__title .ozk-hl { display: inline-block; }
.oz-reveal:not(.is-visible) .ozk-hl { opacity: 0; transform: translateY(14px); }
.oz-reveal .ozk-hl { transition: opacity .6s var(--ease-out) .25s, transform .6s var(--ease-out) .25s; }

@media (prefers-reduced-motion: reduce) {
  .ozk-hero__copy > *, .ozk-case-hero__copy > *, .ozk-member-hero__intro > *,
  .ozk-hero__card, .ozk-hero__float, .ozk-hero__badge { opacity: 1 !important; animation: none !important; }
  .oz-reveal .ozk-hl { opacity: 1 !important; transform: none !important; }
}

/* While an element is revealing, the reveal transition wins over any card hover transition */
html body .oz-reveal:not(.oz-done) {
  transition: opacity 0.75s var(--ease-out), transform 0.8s cubic-bezier(.2,.8,.2,1) !important;
  transition-delay: var(--oz-delay, 0ms) !important;
}
