/* Shared by index.html and about.html: ink-brush cursor + in-page video player */

/* ---------- Small black pointer (mouse / pen only) ---------- */
@media (pointer: fine) {
  *, *::before, *::after {
    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='20' viewBox='0 0 22 28'%3E%3Cpath d='M2 2v20l5.2-4.8 3.6 8.2 3.4-1.5-3.6-8H18z' fill='%23111' stroke='%23e9dfcf' stroke-width='1.4' stroke-linejoin='round'/%3E%3C/svg%3E") 1 1, auto !important;
  }
}

/* ---------- In-page video player ---------- */
.video-dialog {
  padding: 0; border: 0; margin: auto;
  width: min(1040px, calc(100% - 2rem));
  max-width: none; max-height: calc(100vh - 2rem);
  background: #111; color: #e9dfcf;
  box-shadow: 0 30px 80px -20px rgba(0,0,0,.6);
  overflow: hidden;
}
.video-dialog::backdrop { background: rgba(17,17,17,.72); }
.video-dialog[open] { display: block; animation: vd-rise .25s ease; }
@keyframes vd-rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

.vd-bar {
  display: flex; justify-content: space-between; align-items: center;
  padding: .6rem .6rem .6rem 1.1rem;
  font-family: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: .7rem; font-weight: 500; letter-spacing: .22em; text-transform: uppercase;
}
.vd-close {
  display: grid; place-items: center; width: 38px; height: 38px;
  border: 1px solid #e9dfcf; border-radius: 50%;
  background: transparent; color: #e9dfcf; cursor: pointer;
  transition: background .2s, color .2s;
}
.vd-close:hover, .vd-close:focus-visible { background: #e9dfcf; color: #111; }
.vd-frame { aspect-ratio: 16 / 9; width: 100%; background: #000; }
.vd-frame iframe { display: block; width: 100%; height: 100%; border: 0; }
.vd-foot {
  padding: .7rem 1.1rem .9rem;
  font-family: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: .68rem; letter-spacing: .16em; text-transform: uppercase;
}
.vd-foot a { color: #e9dfcf; text-underline-offset: 3px; }
.video-dialog :focus-visible { outline: 2px solid #c8342b; outline-offset: 3px; }

@media (max-width: 720px) {
  .video-dialog { width: calc(100% - 1rem); }
  .vd-foot { letter-spacing: .1em; }
}

@media (prefers-reduced-motion: reduce) {
  .video-dialog[open] { animation: none; }
}


/* ---------- Smooth page-to-page transitions ---------- */
/* Cross-document View Transitions (Chrome, Edge, Safari 18.2+) */
@view-transition { navigation: auto; }

/* Keep the paper background identical during the swap so nothing flashes or shifts */
html { background: #e9dfcf; }

/* Shared elements that stay on screen and morph/slide between the two pages */
.links { view-transition-name: links; }
/* .figure on both pages carries view-transition-name: human (smart-animate) */

/* Page content: a quick, plain crossfade (no sliding, so no "jump") */
::view-transition-old(root) { animation: pt-out .28s ease both; }
::view-transition-new(root) { animation: pt-in .4s ease both; }

/* The human glides from its spot on one page to its spot on the other */
::view-transition-group(human) {
  animation-duration: .8s;
  animation-timing-function: cubic-bezier(.65, 0, .25, 1);
}
::view-transition-group(links) { animation-duration: .4s; }

@keyframes pt-out { to { opacity: 0; } }
@keyframes pt-in  { from { opacity: 0; } to { opacity: 1; } }

/* Fallback for browsers without View Transitions: fade the page in/out */
.no-vt body { animation: pt-in .45s ease; }
.no-vt.leaving body { opacity: 0; transition: opacity .25s ease; }

@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  .no-vt body { animation: none; }
  .no-vt.leaving body { transition: none; opacity: 1; }
}


/* ======================================================================
   Smart-animate: shared elements that travel between pages
   ====================================================================== */
.dot, .hero .badge { view-transition-name: brand-dot; }   /* red circle: Home badge <-> logo dot */
.vertical { view-transition-name: brand-text; }            /* vertical wordmark */

::view-transition-group(human),
::view-transition-group(brand-dot),
::view-transition-group(brand-text) {
  animation-duration: .8s;
  animation-timing-function: cubic-bezier(.65, 0, .25, 1);
}
::view-transition-group(links) {
  animation-duration: .5s;
  animation-timing-function: cubic-bezier(.65, 0, .25, 1);
}
/* shared elements cross-dissolve gently while they travel */
::view-transition-old(human), ::view-transition-new(human),
::view-transition-old(brand-dot), ::view-transition-new(brand-dot) {
  animation-duration: .8s;
}

/* ======================================================================
   Micro-interactions
   ====================================================================== */
:root { --ease-out: cubic-bezier(.16, 1, .3, 1); }

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

/* Staggered reveal — JS tags elements with .rv and adds .in when they scroll into view */
.js .rv {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .9s var(--ease-out), transform 1s var(--ease-out);
  transition-delay: calc(var(--i, 0) * 80ms + .12s);
}
.js .rv.in { opacity: 1; transform: none; }

/* Links column: gentle nudge on hover */
.links a { transition: color .25s ease, transform .35s var(--ease-out); }
.links a:hover { transform: translateX(-3px); }

/* Underline that draws itself on hover */
.text-link {
  border-bottom: 0; padding-bottom: 3px;
  background:
    linear-gradient(var(--red, #c8342b), var(--red, #c8342b)) 0 100% / 0 1px no-repeat,
    linear-gradient(#111, #111) 0 100% / 100% 1px no-repeat;
  transition: background-size .5s var(--ease-out), color .25s ease;
}
.text-link:hover { background-size: 100% 1px, 100% 1px; color: var(--red, #c8342b); }

/* Pressed states feel physical */
.more { transition: background .25s ease, color .25s ease, transform .3s var(--ease-out); }
.more:active { transform: scale(.97); }
.card:active { transform: translateY(-2px) scale(.99); }
.back:active .back-icon { transform: translateX(-5px) scale(.94); }
.step:active, .close:active, .vd-close:active { transform: scale(.9); }
.step, .close, .vd-close { transition: background .25s ease, color .25s ease, transform .3s var(--ease-out); }

/* Lists respond to the pointer */
.numbered span { display: inline-block; transition: transform .35s var(--ease-out); }
.numbered li:hover span { transform: translateX(4px); }
.dots li::before, .steps li::before { transition: transform .35s var(--ease-out); }
.dots li:hover::before, .steps li:hover::before { transform: scale(1.5); }
.actions dt { transition: transform .4s var(--ease-out); }
.actions > div:hover dt { transform: translateX(6px); }
.card .open i { transition: background .25s ease, color .25s ease, transform .35s var(--ease-out); }
.card:hover .open i { transform: rotate(90deg); }

/* Play button breathes so the demo feels alive */
@media (prefers-reduced-motion: no-preference) {
  .play::after {
    content: ""; position: absolute; inset: -6px; border-radius: 50%;
    border: 1px solid #c8342b; opacity: 0;
    animation: pulse 2.6s ease-out infinite;
  }
  @keyframes pulse {
    0% { transform: scale(.85); opacity: .7; }
    70%, 100% { transform: scale(1.5); opacity: 0; }
  }
}

@media (max-width: 900px) {
  .links a:hover { transform: translateY(-2px); }
}

@media (prefers-reduced-motion: reduce) {
  .js .rv { opacity: 1; transform: none; transition: none; }
  .links a, .text-link, .more, .card, .step, .close { transition: none; }
}