/* Motion and interaction layer, loaded after site.css.
   Rule: text never fades, moves on its own or loses contrast. Only surfaces,
   images, borders and small accents animate, and all of it switches off
   under prefers-reduced-motion. */

:root {
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
  --grad: linear-gradient(90deg, var(--accent), #ff8a7a 45%, var(--cyan));
}

/* Scroll progress bar under the header */
.progress {
  position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 60;
  background: var(--grad); transform-origin: 0 50%; transform: scaleX(var(--progress, 0));
  pointer-events: none;
}

/* Header: flat at the top, lifted once you scroll */
.site-header { transition: box-shadow .3s var(--ease-out), background-color .3s; }
.site-header.scrolled { box-shadow: 0 8px 30px -18px rgba(19, 35, 58, .35); background: rgba(245, 250, 250, .94); }

/* Brand bars dance on hover */
.brand-mark i { transition: transform .4s var(--ease-spring); transform-origin: 50% 100%; }
.brand:hover .brand-mark i:nth-child(odd) { transform: scaleY(.55); }
.brand:hover .brand-mark i:nth-child(even) { transform: scaleY(1.25); }

/* Nav: underline grows from the centre */
.nav a { position: relative; }
@media (min-width: 721px) {
  .nav a::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 2px; border-radius: 2px;
    background: var(--accent); transform: scaleX(0); transition: transform .35s var(--ease-out);
  }
  .nav a:hover::after { transform: scaleX(1); }
  .nav a[aria-current="page"] { box-shadow: none; }
  .nav a[aria-current="page"]::after { transform: scaleX(1); }
}

/* Hero: two soft colour blobs drifting behind the content */
.hero::before, .hero::after {
  content: ""; position: absolute; z-index: -1; border-radius: 50%; filter: blur(70px); pointer-events: none;
}
.hero::before { width: 520px; height: 520px; left: -160px; top: -180px; background: var(--pink); opacity: .7; animation: drift-a 18s ease-in-out infinite alternate; }
.hero::after { width: 460px; height: 460px; right: -140px; top: 20%; background: var(--cyan-soft); opacity: .9; animation: drift-b 22s ease-in-out infinite alternate; }
.hero { isolation: isolate; }
@keyframes drift-a { to { transform: translate(120px, 80px) scale(1.15); } }
@keyframes drift-b { to { transform: translate(-100px, -60px) scale(1.1); } }

/* Wave bars near the pointer light up (motion.js adds .hot) */
.wave i { transition: filter .4s; }
.wave i.hot { filter: hue-rotate(160deg) saturate(1.6); }

/* Eyebrow dot breathes */
.eyebrow::before { animation: breathe 2.6s ease-in-out infinite; }
@keyframes breathe { 50% { box-shadow: 0 0 0 8px rgba(63, 230, 221, .18); } }

/* The coral full stop after the name gently bounces in once */
.hero h1 .accent, .page-head h1 .accent { display: inline-block; animation: drop .9s var(--ease-spring) .2s both; }
@keyframes drop { from { transform: translateY(-40%) scale(.4); } }

/* Buttons: lift, glow, sliding arrow, shine sweep on the primary */
.btn { position: relative; overflow: hidden; transition: transform .3s var(--ease-spring), box-shadow .3s, border-color .2s, background-color .2s; }
.btn:hover { transform: translateY(-3px); box-shadow: 0 12px 24px -14px rgba(19, 35, 58, .45); }
.btn:active { transform: translateY(0) scale(.97); }
.btn [aria-hidden="true"] { display: inline-block; transition: transform .3s var(--ease-spring); }
.btn:hover [aria-hidden="true"] { transform: translateX(4px); }
.btn.primary::after {
  content: ""; position: absolute; inset: 0; transform: translateX(-120%);
  background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .35) 50%, transparent 70%);
}
.btn.primary:hover::after { transform: translateX(120%); transition: transform .7s var(--ease-out); }
.btn.primary:hover { box-shadow: 0 14px 28px -12px rgba(196, 52, 59, .6); }

/* Videos: play button ripples, thumbnail eases in */
.video { transition: transform .4s var(--ease-out), box-shadow .4s; background-size: cover; }
.video .play::before {
  content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--accent);
  animation: ripple 2.2s var(--ease-out) infinite;
}
@keyframes ripple { from { transform: scale(1); opacity: .8; } to { transform: scale(1.7); opacity: 0; } }
.video.loaded .play::before { display: none; }
.hero-video:hover { transform: translateY(-4px); box-shadow: 0 40px 80px -30px rgba(10, 118, 114, .55); }

/* Cards: pointer-follow spotlight, lift, image zoom */
.card, .path, .panel, .featured { position: relative; }
.card::before, .path::before, .featured::before {
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; border-radius: inherit; opacity: 0;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 0%), rgba(63, 230, 221, .14), transparent 60%);
  transition: opacity .35s;
}
.card:hover::before, .path:hover::before, .featured:hover::before { opacity: 1; }
.card { transition: transform .45s var(--ease-out), border-color .3s, box-shadow .45s var(--ease-out); }
.card:hover { transform: translateY(-6px); }
.card .thumb, .card .video, .path img, .featured-media img { transition: transform .8s var(--ease-out); }
.card:hover .thumb, .path:hover img, .featured:hover .featured-media img { transform: scale(1.05); }
.card:hover .video:not(.loaded) { transform: scale(1.03); }
.card > .thumb, .card > .video, .path img { will-change: transform; }
.card, .path { isolation: isolate; }
.card > .thumb, .card > .video { position: relative; z-index: 0; }
.card-body, .path-body { position: relative; z-index: 1; background: var(--surface); }
.featured { transition: box-shadow .45s var(--ease-out), border-color .3s; }
.featured:hover { border-color: var(--line-strong); box-shadow: 0 30px 60px -36px rgba(19, 35, 58, .45); }
.featured-media { overflow: hidden; }

/* Path CTA arrow slides */
.path-cta { display: inline-block; transition: transform .35s var(--ease-spring); }
.path:hover .path-cta { transform: translateX(6px); }

/* Tags become chips that react */
.tag { transition: background-color .25s, border-color .25s, color .25s, transform .25s var(--ease-spring); }
.tag:hover { background: var(--cyan-soft); border-color: var(--cyan-ink); color: var(--cyan-ink); transform: translateY(-2px); }

/* Text links: animated underline (colour stays the same) */
.links a, .cert-list a, .quote figcaption a, .back {
  background-image: linear-gradient(currentColor, currentColor); background-repeat: no-repeat;
  background-size: 0% 2px; background-position: 0 100%; transition: background-size .35s var(--ease-out), color .2s;
}
.links a:hover, .cert-list a:hover, .quote figcaption a:hover, .back:hover { background-size: 100% 2px; text-decoration: none; }

/* Section kicker grows a short gradient line */
.kicker { display: inline-flex; align-items: center; gap: 10px; }
.section-head .kicker::before, .about-copy > .kicker::before, .contact .kicker::before {
  content: ""; width: 0; height: 2px; border-radius: 2px; background: var(--grad); transition: width .8s var(--ease-out) .1s;
}
.section-head.in .kicker::before, .about-copy.in > .kicker::before, .contact .wrap.in .kicker::before { width: 28px; }
.contact .kicker { justify-content: center; }

/* Timeline: dots fill and the rail draws in */
.timeline { border-left-color: transparent; background: linear-gradient(var(--line), var(--line)) 0 0 / 1px 0 no-repeat; transition: background-size 1.2s var(--ease-out); }
.timeline:has(.job.in) { background-size: 1px 100%; }
.job::before { transition: background-color .5s var(--ease-out) .2s, transform .5s var(--ease-spring) .2s; }
.job.in::before { background: var(--accent); transform: scale(1.15); }

/* Panels and certification cards lift slightly */
.panel { transition: transform .45s var(--ease-out), box-shadow .45s var(--ease-out), border-color .3s; }
.panel:hover { transform: translateY(-3px); border-color: var(--line-strong); box-shadow: 0 20px 40px -30px rgba(19, 35, 58, .4); }
.cert-main { transition: transform .45s var(--ease-out), box-shadow .45s; }
.cert-main:hover { transform: translateY(-4px) rotate(-.4deg); box-shadow: 0 24px 48px -30px rgba(196, 52, 59, .5); }
.cert-main .level { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.soft li::before { transition: transform .4s var(--ease-spring), background-color .3s; }
.soft li:hover::before { transform: rotate(-8deg) scale(1.12); background-color: var(--pink); }

/* Quote: slow gradient shimmer behind the (static) text */
.quote { background-size: 200% 200%; animation: shimmer 14s ease-in-out infinite alternate; }
@keyframes shimmer { to { background-position: 100% 100%; } }

/* Email: gradient underline that fills on hover */
.email-big {
  border-bottom: 0; padding: 2px 6px 6px; border-radius: 8px;
  background: linear-gradient(90deg, var(--pink), var(--cyan-soft)) 0 100% / 100% 0 no-repeat, var(--grad) 0 100% / 100% 2px no-repeat;
  transition: background-size .45s var(--ease-out);
}
.email-big:hover { background-size: 100% 100%, 100% 2px; }

/* Reveal: gentle rise with a stagger; text is always fully opaque */
.js .reveal { transform: translateY(18px); transition: transform .8s var(--ease-out); transition-delay: calc(var(--i, 0) * 70ms); }
.js .reveal.in { transform: none; }

/* Language switch slides */
.lang button { transition: background-color .3s var(--ease-out), color .3s; }

/* Focus stays obvious everywhere */
.btn:focus-visible, .path:focus-visible, .card a:focus-visible { outline: 3px solid var(--cyan-ink); outline-offset: 3px; }

@media (hover: none) {
  .card:hover, .panel:hover, .cert-main:hover, .hero-video:hover { transform: none; }
  .card:hover .thumb, .path:hover img, .featured:hover .featured-media img { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js .reveal { transform: none; }
  .progress { display: none; }
}

/* Portrait: tilted card that straightens on hover */
.portrait { transform: rotate(-2.5deg); transition: transform .5s var(--ease-spring), box-shadow .5s var(--ease-out); box-shadow: 0 24px 48px -28px rgba(19, 35, 58, .45); }
.portrait:hover { transform: rotate(0) scale(1.02); }
@media (prefers-reduced-motion: reduce) { .portrait { transform: none; } }
/* Tabs: the underline effect is for plain links only */
.nav .nav-pages a::after, .nav .nav-cta::after { display: none; }
.nav .nav-pages a, .nav .nav-cta { transition: background-color .25s var(--ease-out), color .25s, box-shadow .25s; }

/* Smooth cross-page navigation (supported browsers); the header stays put */
@view-transition { navigation: auto; }
.site-header { view-transition-name: site-header; }
::view-transition-old(root) { animation: vt-out .22s ease-in both; }
::view-transition-new(root) { animation: vt-in .32s var(--ease-out) both; }
@keyframes vt-out { to { opacity: 0; } }
@keyframes vt-in { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
}
/* Liquid nav pill (motion.js). Without JS the static aria-current pill in site.css stays. */
.nav-pages { position: relative; isolation: isolate; }
.nav-pages a { position: relative; z-index: 2; }
.nav-pill, .nav-ghost {
  position: absolute; top: 4px; bottom: 4px; left: 0; z-index: 0; border-radius: 999px;
  width: var(--w, 0); transform: translateX(var(--x, 0)); pointer-events: none;
  transition: transform .55s var(--ease-spring), width .55s var(--ease-spring), opacity .3s ease;
}
.nav-pill { z-index: 1; background: var(--surface); box-shadow: 0 2px 10px -3px rgba(19, 35, 58, .3); opacity: 0; }
.nav-pill.on { opacity: 1; }
.nav-pill.stretching { transition: transform .17s var(--ease-out), width .17s var(--ease-out); }
.nav-ghost { background: rgba(255, 255, 255, .6); opacity: 0; transition: transform .35s var(--ease-out), width .35s var(--ease-out), opacity .25s ease; }
.nav-ghost.on { opacity: 1; }
.nav-pill.no-anim, .nav-ghost.no-anim { transition: none; }
.has-nav-pill .nav .nav-pages a[aria-current="page"], .has-nav-pill .nav .nav-pages a:hover { background: transparent; box-shadow: none; }
.nav .nav-pages a { transition: color .3s ease; }
@media (max-width: 720px) { .nav-pill, .nav-ghost { display: none; } }

/* ES/EN: the dark pill slides between the two options */
.lang { position: relative; isolation: isolate; }
.lang button { position: relative; z-index: 1; width: 38px; transition: color .35s ease; }
.lang button[aria-pressed="true"] { background: transparent; color: var(--bg); }
.lang::before {
  content: ""; position: absolute; z-index: 0; top: 3px; left: 3px; width: 38px; bottom: 3px; border-radius: 999px;
  background: var(--text); transition: transform .5s cubic-bezier(.34, 1.25, .64, 1);
}
html[data-lang="en"] .lang::before { transform: translateX(38px); }

/* After a language switch the new text settles in quickly (no movement) */
html.lang-swap main, html.lang-swap .nav-pages a, html.lang-swap footer { animation: lang-in .38s ease-out; }
@keyframes lang-in { from { opacity: .25; } to { opacity: 1; } }

/* Page changes: header stays put (the pill animates live), content rises in softly */
::view-transition-old(site-header) { display: none; }
::view-transition-new(site-header) { animation: none; }
::view-transition-new(root) { animation: vt-rise .38s var(--ease-out) both; }
@keyframes vt-rise { from { opacity: 0; transform: translateY(10px); } }

@media (prefers-reduced-motion: reduce) {
  .nav-pill, .nav-ghost, .lang::before { transition: none; }
  html.lang-swap main, html.lang-swap .nav-pages a, html.lang-swap footer { animation: none; }
}