/* =============================================================
   transitions.css — View Transitions API definitions
   A Love Letter to the Web
   ============================================================= */

/* ── Cross-document opt-in ──────────────────────────────────── */
@view-transition {
  navigation: auto;
}

/* ── Default Root Transition: Crossfade ─────────────────────── */
::view-transition-old(root) {
  animation: vt-fade-out var(--duration-slow) var(--ease-in-out) both;
}

::view-transition-new(root) {
  animation: vt-fade-in var(--duration-slow) var(--ease-in-out) both;
}

@keyframes vt-fade-out {
  from { opacity: 1; }
  to   { opacity: 0; }
}

@keyframes vt-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ── Named: zone-hero — Shrink out / Expand in ──────────────── */
::view-transition-old(zone-hero) {
  animation: vt-shrink-out var(--duration-xslow) var(--ease-in-out) both;
}

::view-transition-new(zone-hero) {
  animation: vt-expand-in var(--duration-xslow) var(--ease-in-out) both;
}

@keyframes vt-shrink-out {
  from { transform: scale(1);    opacity: 1; }
  to   { transform: scale(0.85); opacity: 0; }
}

@keyframes vt-expand-in {
  from { transform: scale(1.1); opacity: 0; }
  to   { transform: scale(1);   opacity: 1; }
}

/* ── Named: zone-content — Slide out left / Slide in right ─── */
::view-transition-old(zone-content) {
  animation: vt-slide-out-left var(--duration-slow) var(--ease-in-out) both;
}

::view-transition-new(zone-content) {
  animation: vt-slide-in-right var(--duration-slow) var(--ease-in-out) both;
}

@keyframes vt-slide-out-left {
  from { transform: translateX(0);     opacity: 1; }
  to   { transform: translateX(-3rem); opacity: 0; }
}

@keyframes vt-slide-in-right {
  from { transform: translateX(3rem); opacity: 0; }
  to   { transform: translateX(0);    opacity: 1; }
}

/* ── Named: hub-node — Zoom out / Zoom in ──────────────────── */
::view-transition-old(hub-node) {
  animation: vt-zoom-out var(--duration-xslow) var(--ease-in-out) both;
}

::view-transition-new(hub-node) {
  animation: vt-zoom-in var(--duration-xslow) var(--ease-in-out) both;
}

@keyframes vt-zoom-out {
  from {
    transform: scale(1);
    filter: blur(0);
    opacity: 1;
  }
  to {
    transform: scale(2);
    filter: blur(8px);
    opacity: 0;
  }
}

@keyframes vt-zoom-in {
  from {
    transform: scale(0.5);
    filter: blur(8px);
    opacity: 0;
  }
  to {
    transform: scale(1);
    filter: blur(0);
    opacity: 1;
  }
}

/* ── Reduced Motion — kill all named transitions ────────────── */
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(zone-hero),
  ::view-transition-new(zone-hero),
  ::view-transition-old(zone-content),
  ::view-transition-new(zone-content),
  ::view-transition-old(hub-node),
  ::view-transition-new(hub-node) {
    animation: none !important;
  }
}

/* ── Layer 1 / Task 6 — View Transition Upgrades ────────── */

.page-header { view-transition-name: site-header; }
.page-header__logo { view-transition-name: site-logo; }

.zone-node { view-transition-name: none; }
.zone-node[data-zone="scroll"]     { view-transition-name: node-scroll; }
.zone-node[data-zone="popover"]    { view-transition-name: node-popover; }
.zone-node[data-zone="art"]        { view-transition-name: node-art; }
.zone-node[data-zone="container"]  { view-transition-name: node-container; }
.zone-node[data-zone="transitions"]{ view-transition-name: node-transitions; }
.zone-node[data-zone="houdini"]    { view-transition-name: node-houdini; }
.zone-node[data-zone="has"]        { view-transition-name: node-has; }
.zone-node[data-zone="layers"]     { view-transition-name: node-layers; }

/* matching target on each zone page — paired by data-zone */
.zone-hero[data-zone="scroll"]      { view-transition-name: node-scroll; }
.zone-hero[data-zone="popover"]     { view-transition-name: node-popover; }
.zone-hero[data-zone="art"]         { view-transition-name: node-art; }
.zone-hero[data-zone="container"]   { view-transition-name: node-container; }
.zone-hero[data-zone="transitions"] { view-transition-name: node-transitions; }
.zone-hero[data-zone="houdini"]     { view-transition-name: node-houdini; }
.zone-hero[data-zone="has"]         { view-transition-name: node-has; }
.zone-hero[data-zone="layers"]      { view-transition-name: node-layers; }

/* Dark-mode circular reveal */
html.theme-transition::view-transition-old(root),
html.theme-transition::view-transition-new(root) { animation-duration: 500ms; }

html.theme-transition::view-transition-new(root) {
  clip-path: circle(0% at var(--theme-x, 50%) var(--theme-y, 50%));
  animation: theme-reveal 500ms ease-out forwards;
}
@keyframes theme-reveal { to { clip-path: circle(150% at var(--theme-x, 50%) var(--theme-y, 50%)); } }