/* =====================================================================
   SITE MOTION (assets/components/site-motion.js): page change, first-visit intro, DDT petal cursor.
   ===================================================================== */

/* ---------- 1) page change: the new page rises from below, the nav held still ---------- */
@view-transition { navigation: auto; }
html.sm-on .nav { view-transition-name: ddt-nav; }
/* the new page rises from below over the old one (top corners softly rounded, flattening as it lands),
   the old page drifts up and dims a little underneath; nothing fades to white, so nothing flickers */
::view-transition-old(root) { animation: smUp .72s cubic-bezier(.65, 0, .25, 1) both; }
::view-transition-new(root) { animation: smRise .72s cubic-bezier(.65, 0, .25, 1) both; }
::view-transition-group(ddt-nav) { animation-duration: .5s; }
html.sm-vt-in .nav { animation: none !important; }
@keyframes smUp { to { transform: translateY(-16vh); filter: brightness(.82); } }
@keyframes smRise { from { transform: translateY(100vh); clip-path: inset(0 round 36px 36px 0 0); } 70% { clip-path: inset(0 round 14px 14px 0 0); } to { transform: none; clip-path: inset(0 round 0); } }
@keyframes smIn { from { opacity: 0; transform: translateY(14px); } }
/* fallback (no View Transitions) */
html.sm-pt-out body { opacity: 0; transform: translateY(-8px); transition: opacity .25s ease, transform .25s ease; }
html.sm-pt-in body { animation: smIn .5s cubic-bezier(.2, .8, .2, 1) both; }

/* ---------- 2) intro ---------- */
html.sm-intro::after { content: ""; position: fixed; inset: 0; z-index: 2147483000; background: #0e1020; }
html.sm-intro-built::after { content: none; }
html.sm-intro body { overflow: hidden; }
.smIntro { position: fixed; inset: 0; z-index: 2147483001; background: #0e1020; color: #fff; overflow: hidden; clip-path: inset(0 0 0 0); transition: clip-path .85s cubic-bezier(.76, 0, .24, 1); cursor: progress; }
.smIntro.is-out { clip-path: inset(0 0 100% 0); }
/* the site's frame lines, so the intro already sits on the same grid */
.smIntro__frame { position: absolute; top: 0; bottom: 0; left: var(--pad-x, 96px); right: var(--pad-x, 96px); border-left: 1px solid rgba(255, 255, 255, .08); border-right: 1px solid rgba(255, 255, 255, .08); pointer-events: none; }
.smIntro__stage { position: absolute; inset: 0; transition: transform .85s cubic-bezier(.76, 0, .24, 1), opacity .5s; }
.smIntro.is-out .smIntro__stage { transform: translateY(-60px); opacity: 0; }
.smIntro__logo { position: absolute; left: 50%; top: 50%; width: clamp(220px, 28vw, 380px); height: auto; transform: translate(-50%, -50%); overflow: visible; }
.smIntro__word { fill: #fff; opacity: .14; transition: opacity .5s ease; }
.smIntro.is-landed .smIntro__word { opacity: 1; }
.smIntro.is-landed .smIntro__word:nth-child(2) { transition-delay: .08s; }
.smIntro.is-landed .smIntro__word:nth-child(3) { transition-delay: .16s; }
.smIntro__teal { fill: #29ccb2; opacity: 0; transform-box: fill-box; transform-origin: center; transform: scale(0); transition: transform .5s cubic-bezier(.34, 1.56, .64, 1) .3s, opacity .3s .3s; }
.smIntro.is-landed .smIntro__teal { opacity: 1; transform: none; }
.smIntro__slot { fill: none; stroke: rgba(255, 255, 255, .22); stroke-width: .25; stroke-dasharray: .6 .6; transition: opacity .3s; }
.smIntro.is-landed .smIntro__slot { opacity: 0; }
/* the wandering pointer (the logo's own petal) */
.smIntro__petal { position: absolute; left: 50%; top: 50%; opacity: 0; will-change: transform; overflow: visible; }
.smIntro__petal path { fill: #4a3dcc; stroke: #fff; stroke-width: .35; stroke-linejoin: round; transition: stroke-width .3s; }
.smIntro.is-landed .smIntro__petal path { stroke-width: 0; }
/* the click as it lands */
.smIntro__ring { position: absolute; width: 18px; height: 18px; margin: -9px 0 0 -9px; border-radius: 50%; border: 1.5px solid #29ccb2; opacity: 0; pointer-events: none; }
.smIntro.is-landed .smIntro__ring { animation: smClick .7s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes smClick { 0% { opacity: .9; transform: scale(.4); } 100% { opacity: 0; transform: scale(4); } }
/* corners: name bottom-left, the counter bottom-right */
.smIntro__name, .smIntro__count { position: absolute; bottom: clamp(24px, 4vw, 48px); margin: 0; font-family: "Geologica", sans-serif; }
.smIntro__name { left: calc(var(--pad-x, 96px) + 24px); font-size: 13px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: rgba(255, 255, 255, .45); }
.smIntro__count { right: calc(var(--pad-x, 96px) + 24px); display: flex; align-items: flex-start; gap: 6px; line-height: .85; font-weight: 500; letter-spacing: -.04em; font-size: clamp(64px, 9vw, 136px); font-variant-numeric: tabular-nums; color: #fff; }
.smIntro__pct { font-size: .32em; letter-spacing: 0; color: #29ccb2; margin-top: .12em; }
@media (max-width: 900px) {
  /* phones: the frame lines sit where the page's own lines are; the name moves to the top corner so it never meets the counter */
  .smIntro__frame { left: var(--pad-x, 20px); right: var(--pad-x, 20px); }
  .smIntro__name { left: calc(var(--pad-x, 20px) + 16px); bottom: auto; top: calc(env(safe-area-inset-top, 0px) + 28px); font-size: 11px; }
  .smIntro__count { right: calc(var(--pad-x, 20px) + 16px); bottom: calc(env(safe-area-inset-bottom, 0px) + 32px); font-size: clamp(64px, 20vw, 96px); }
  .smIntro__logo { width: min(64vw, 280px); }
}

/* ---------- 3) cursor: the DDT petal (fine pointers only) ---------- */
@media (hover: hover) and (pointer: fine) {
  html.sm-on, html.sm-on body { cursor: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2228%22%20height%3D%2228%22%20viewBox%3D%220%200%2028%2028%22%3E%3Cpath%20d%3D%22M2%202H14A12%2012%200%201%201%202%2014Z%22%20fill%3D%22%234a3dcc%22%20stroke%3D%22%23fff%22%20stroke-width%3D%221.6%22%20stroke-linejoin%3D%22round%22/%3E%3C/svg%3E") 2 2, auto; }
  html.sm-on body * { cursor: inherit; }   /* one pointer everywhere, even where a component set its own */
  /* over anything clickable: a round white hand with an ink edge and three teal tap marks; wins over components that set their own pointer */
  html.sm-on body :is(a[href], button, [role="button"], summary, label[for], select, [onclick], .btn, [class*="sbx"], [tabindex]:not([tabindex="-1"])),
  html.sm-on body :is(a[href], button, [role="button"], .btn) * { cursor: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2232%22%20height%3D%2232%22%20viewBox%3D%220%200%2032%2032%22%3E%3Cpath%20d%3D%22M10.5%204.8a3%203%200%200%201%206%200v6.4a2.6%202.6%200%200%201%205%20.9%202.6%202.6%200%200%201%204.6%201.6v6.8c0%204.9-3.6%208.5-8.4%208.5h-1.6c-2.7%200-4.6-1.1-6.2-3.3l-3.8-5.3a2.5%202.5%200%200%201%204.1-2.9l.3.4Z%22%20fill%3D%22%23fff%22%20stroke%3D%22%2311131f%22%20stroke-width%3D%221.7%22%20stroke-linejoin%3D%22round%22/%3E%3Cpath%20d%3D%22M16.5%2011.2v3.6M21.5%2012.1v3%22%20stroke%3D%22%2311131f%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22/%3E%3Cpath%20d%3D%22M4.6%205.4%206.8%207M3.6%209.6h2.6M7.6%202.4l.9%202.4%22%20stroke%3D%22%2329ccb2%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22/%3E%3C/svg%3E") 13 2, pointer !important; }
  html.sm-on body input:not([type="button"]):not([type="submit"]):not([type="checkbox"]):not([type="radio"]), html.sm-on body textarea, html.sm-on body [contenteditable="true"] { cursor: text !important; }
}

/* over anything clickable a teal ring blooms around the fingertip and follows it; it tightens on press (replaces the text tag) */
.smTag { position: fixed; left: 0; top: 0; z-index: 2147482000; pointer-events: none; width: 44px; height: 44px; margin: -22px 0 0 -22px; border-radius: 50%; border: 1.5px solid rgba(41, 204, 178, .85); background: radial-gradient(circle, rgba(41, 204, 178, .14) 0 55%, transparent 56%); opacity: 0; scale: .3; transition: opacity .25s ease, scale .35s cubic-bezier(.34, 1.56, .64, 1); will-change: transform; }
.smTag.is-on { opacity: 1; scale: 1; }
.smTag.is-press { scale: .7; transition-duration: .12s; }
@media (hover: none), (pointer: coarse) { .smTag { display: none; } }

@media (prefers-reduced-motion: reduce) {
  .smTag { transition: none; }
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
}