/* transitions-dev: texts reveal + card hover tilt, with site integration below. */
:root {
  --stagger-dur: 500ms;
  --stagger-distance: 12px;
  --stagger-stagger: 40ms;
  --stagger-blur: 3px;
  --stagger-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* Lines start translated down + blurred + invisible; .is-shown
   on the parent flips them to their resting state. The second
   line's transition-delay holds it back by --stagger-stagger
   so the eye lands on the headline first. */
.t-stagger-line {
  display: block;
  opacity: 0;
  transform: translateY(var(--stagger-distance));
  filter: blur(var(--stagger-blur));
  transition:
    opacity   var(--stagger-dur) var(--stagger-ease),
    transform var(--stagger-dur) var(--stagger-ease),
    filter    var(--stagger-dur) var(--stagger-ease);
  will-change: transform, opacity, filter;
}
.t-stagger-line--2 { transition-delay: var(--stagger-stagger); }

.t-stagger.is-shown .t-stagger-line {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}
/* Exit decouples from the stagger: same fade for every line,
   no Y return, no blur — so the disappearance reads as a
   single quiet fade instead of a reverse reveal. */
.t-stagger.is-hiding .t-stagger-line {
  opacity: 0;
  transform: translateY(0);
  filter: blur(0);
  transition:
    opacity 200ms ease,
    transform 0s linear,
    filter 0s linear;
  transition-delay: 0s;
}

@media (prefers-reduced-motion: reduce) {
  .t-stagger-line { transition: none !important; }
}

:root {
  --tilt-perspective: 1000px;
  --tilt-return: 1000ms;
  --tilt-return-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --tilt-follow: 400ms;
  --tilt-follow-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* The outer wrapper is the flat hit area; touch-action:none
   lets a finger drag tilt the card instead of scrolling the
   page, so tap-hold-drag works on mobile. */
.t-tilt { touch-action: none; }
/* The card tilts toward the pointer via rotateX/rotateY fed
   from JS; on leave it eases back to flat. A separate
   .is-tilting class swaps in a short linear follow while the
   pointer moves so the tilt tracks the cursor 1:1. */
.t-tilt-card {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  transform:
    perspective(var(--tilt-perspective))
    rotateX(var(--tilt-rx, 0deg))
    rotateY(var(--tilt-ry, 0deg));
  transform-style: preserve-3d;
  transition: transform var(--tilt-return) var(--tilt-return-ease);
  will-change: transform;
}
.t-tilt-card.is-tilting {
  transition: transform var(--tilt-follow) var(--tilt-follow-ease);
}

@media (prefers-reduced-motion: reduce) {
  .t-tilt-card { transform: none !important; transition: none !important; }
}

/* Site tuning and integration. Original artwork, layout and native links stay intact. */
html {
  --stagger-dur: 760ms;
  --stagger-distance: 28px;
  --stagger-blur: 5px;
  --motion-reveal-duration: 760ms;
  --motion-ease: cubic-bezier(.22,1,.36,1);
  --motion-spring: cubic-bezier(.22,1.55,.42,1);
  --motion-tilt-range: 10;
  --tilt-follow: 110ms;
  --tilt-return: 650ms;
  --tilt-return-ease: var(--motion-spring);
}
.t-stagger-line { display: var(--motion-display,block); }
/* A browsing card must never capture a swipe intended to scroll the page. */
.t-tilt { touch-action: auto; }
.motion-card-host { display:flex; flex-direction:column; min-width:0; position:relative; isolation:isolate; }
.tt-archive-list .motion-card-host { height:100%; }
:is(#tools,#wip,#booth,main) .motion-card-host > .t-tilt-card { flex:1; min-width:0; }
:is(#tools,#wip,#booth,main) .motion-card-host > .t-tilt-card,
#worlds .world-preview > .t-tilt-card {
  border-radius:var(--motion-radius,20px);
  transform:perspective(var(--tilt-perspective)) translateY(var(--motion-lift,0px)) rotateX(var(--tilt-rx,0deg)) rotateY(var(--tilt-ry,0deg));
  transition:transform var(--tilt-return) var(--tilt-return-ease), box-shadow 420ms var(--motion-ease), border-color 320ms ease,scale 350ms var(--motion-spring);
  overflow:visible;
}
:is(#tools,#wip,#booth,main) .motion-card-host > .t-tilt-card.is-tilting,
#worlds .world-preview > .t-tilt-card.is-tilting { transition-duration:var(--tilt-follow),420ms,320ms; }
.motion-bubble { position:absolute; right:9%; top:8%; width:14px; aspect-ratio:1; border-radius:50%; border:1px solid rgba(45,164,227,.65); background:radial-gradient(circle at 30% 25%,#fff 0 12%,rgba(167,235,255,.35) 45%,rgba(27,166,234,.2)); box-shadow:inset -2px -3px 4px rgba(14,127,199,.15); opacity:0; }
.motion-bubble:nth-child(2) { right:17%; top:12%; width:8px; animation-delay:90ms; }
.motion-bubble:nth-child(3) { right:5%; top:19%; width:20px; animation-delay:160ms; }
.t-tilt.is-hover .motion-bubble { animation-name:motion-bubble-rise; animation-duration:850ms; animation-timing-function:var(--motion-ease); animation-fill-mode:both; }
@keyframes motion-bubble-rise { 0% { opacity:0; translate:0 20px; scale:.3; } 25% { opacity:1; } 100% { opacity:0; translate:4px -24px; scale:1.15; } }
#worlds .world-preview > .world-thumb { overflow:hidden; }
.world-list-card .world-preview { border-radius:inherit; overflow:hidden; }
.motion-card-host img { transition:scale 700ms var(--motion-ease),filter 500ms ease; }
.motion-button { position:relative; isolation:isolate; overflow:hidden; transition:translate 420ms var(--motion-spring),scale 240ms var(--motion-spring),box-shadow 320ms ease,background-color 240ms ease; }
.hdr-nav a { position:relative; transition:color 220ms ease,background-color 220ms ease,translate 320ms var(--motion-ease); }
.hdr-nav a::after { content:''; position:absolute; left:20%; right:20%; bottom:4px; height:2px; border-radius:2px; background:currentColor; scale:0 1; transform-origin:left; transition:scale 300ms var(--motion-ease); }
.hdr-nav a.current::after { scale:1 1; }
.sub-hero::before { animation:motion-light-arrival 1600ms var(--motion-ease) both; }
@keyframes motion-light-arrival { from { opacity:0; translate:-6% 0; } to { opacity:1; translate:0 0; } }
.motion-card-host:focus-within > .t-tilt-card { border-color:#61b6ed; box-shadow:0 14px 34px -12px rgba(31,111,169,.24); }
.motion-button:focus-visible,.hdr-nav a:focus-visible { outline:3px solid #1266a8; outline-offset:4px; }

/* Visible invitations: a raised edge, a substantial arrow and an immediate water response. */
a.world-preview { position:relative; }
.motion-image-cue { position:absolute; right:20px; bottom:20px; width:58px; height:58px; border-radius:50%; z-index:3; pointer-events:none; background:#fff; border:2px solid rgba(255,255,255,.8); box-shadow:0 6px 0 #0c75b7,0 12px 28px rgba(8,74,127,.28); transition:translate 500ms var(--motion-spring),rotate 500ms var(--motion-spring),background-color 240ms ease,box-shadow 240ms ease; }
.motion-image-cue::after { content:''; position:absolute; inset:17px; background:center/contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230c75b7' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 19 19 5M5 5h14v14'/%3E%3C/svg%3E"); transition:translate 400ms var(--motion-spring); }
.world-list { gap:36px; }
.world-list-card { border:2px solid #b0def7; box-shadow:0 7px 0 #bddff1,0 20px 40px -24px rgba(13,92,149,.3); }
.world-list-card .world-preview { border-radius:22px 22px 0 0; }
.world-list-card .world-body { background:linear-gradient(145deg,#fff 30%,#effaff); border-radius:0 0 22px 22px; }
.world-list-card .world-name { font-size:clamp(23px,2.5vw,29px); color:#164f74; }
.world-list-card .world-actions { align-items:center; gap:14px; }
.world-list-card .world-btn-intro { padding:12px 20px; border-radius:999px; color:#fff; background:#087bbd; text-decoration:none; box-shadow:0 5px 0 #085a90; }
.world-list-card .world-btn-open { font-size:14px; }
.world-list-card .world-name,.world-list-card .world-actions,.tool-article-arrow { transition:translate 450ms var(--motion-spring); }
.motion-link-row { position:relative; }
.motion-effects { position:absolute; inset:0; overflow:hidden; border-radius:inherit; pointer-events:none; z-index:4; }
.motion-ripple { position:absolute; width:28px; height:28px; margin:-14px; border:2px solid rgba(23,144,218,.7); border-radius:50%; background:rgba(111,220,255,.18); animation:motion-water-ring 800ms var(--motion-ease) both; }
.motion-ripple::after { content:''; position:absolute; inset:7px; border-radius:50%; border:1px solid rgba(255,255,255,.85); }
@keyframes motion-water-ring { from { scale:.3; opacity:1; } to { scale:13; opacity:0; } }

/* The upper surface carries the same water language before the first hover. */
.motion-hero { isolation:isolate; }
.motion-hero > .container { z-index:1; }
.motion-hero::before { background:radial-gradient(ellipse at 88% 45%,rgba(52,188,245,.25),transparent 50%),linear-gradient(120deg,rgba(139,221,255,.28),transparent 60%); }
.motion-hero .sub-kicker { display:inline-flex; padding:7px 16px; color:#086ba5; font-family:var(--font-ui,sans-serif); font-weight:700; border:1px solid #a8dbf7; border-radius:999px; background:rgba(255,255,255,.82); box-shadow:0 4px 0 rgba(122,192,230,.3); rotate:-3deg; }
.motion-hero .page-title { text-shadow:0 7px 0 rgba(26,130,204,.09); }

@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference) {
  .motion-card-host:hover,.world-preview.t-tilt:hover { --motion-lift:-13px; }
  .motion-card-host:hover > .t-tilt-card {
    border-color:#68b8eb;
    box-shadow:var(--motion-edge-glow);
  }
  .motion-card-host:hover :is(.world-preview img,.yt-card-image img) { scale:1.045; }
  .motion-card-host:hover :is(.content-cta,.tool-article-cta) { color:#075f9f; }
  #tools .motion-card-host:hover .tool-article-cta { color:#fff; background:#075d98; }
  .motion-button:hover { translate:0 -5px; scale:1.025; box-shadow:var(--motion-edge-glow); }
  .motion-button:active { translate:0 0; }
  .hdr-nav a:hover { translate:0 -3px; background-color:#dff3ff; }
  .hdr-nav a:hover::after,.hdr-nav a:focus-visible::after { scale:1 1; }
  :is(#links,#linkList) .motion-link-row { transition:background-color 300ms ease,box-shadow 350ms ease; }
  :is(#links,#linkList) .motion-link-row:hover { box-shadow:var(--motion-edge-glow); }
  :is(#links,#linkList) .motion-link-row :is(.link-arrow,.bl-arrow) { transition:translate 350ms var(--motion-ease),color 250ms ease; }
  :is(#links,#linkList) .motion-link-row:hover :is(.link-arrow,.bl-arrow) { translate:4px 0; }
  .motion-card-host:hover .motion-image-cue,a.world-preview:hover .motion-image-cue { translate:0 -6px; rotate:8deg; box-shadow:var(--motion-edge-glow); }
  .motion-card-host:hover .motion-image-cue::after,a.world-preview:hover .motion-image-cue::after { translate:2px -2px; }
  .motion-card-host:hover .world-name { translate:0 -3px; }
  .motion-card-host:hover .tool-article-arrow { translate:4px 0; }
}
@media (prefers-reduced-motion:no-preference) {
  .motion-card-host:active > .t-tilt-card { scale:.975; --motion-lift:-2px; }
  .motion-button:active { translate:0 2px; scale:.96; box-shadow:0 1px 0 rgba(13,104,165,.3); }
  a.world-preview:active .motion-image-cue { translate:0 4px; rotate:0deg; box-shadow:0 1px 0 #0c75b7; }
}
@media(max-width:700px) {
  .motion-image-cue { width:48px; height:48px; right:16px; bottom:16px; }
  .motion-image-cue::after { inset:13px; }
  .world-list { gap:32px; }
}
/* Keep long work names readable instead of letting a desktop minimum create stray syllables. */
@media(max-width:600px) {
  .sub-hero { padding-block:44px 36px; }
  .sub-hero .page-title { font-size:clamp(28px,7.5vw,40px);line-height:1.25;letter-spacing:.015em;text-wrap:balance; }
  .title-term { white-space:nowrap; }
}
@media (hover:none),(pointer:coarse) {
  :is(#tools,#wip,#booth,main) .motion-card-host > .t-tilt-card,
  #worlds .world-preview > .t-tilt-card { transform:none; will-change:auto; }
}
@media (prefers-reduced-motion:reduce) {
  .t-stagger-line { opacity:1 !important; transform:none !important; filter:none !important; }
  .motion-image-cue,.motion-image-cue::after,.world-name,.world-actions,.tool-article-arrow,.motion-ripple { animation:none !important; transition:none !important; translate:none !important; rotate:none !important; scale:none !important; }
  .motion-ripple,.motion-bubble { display:none !important; }
  .t-tilt-card,.motion-card-host img,.motion-button,.hdr-nav a,.hdr-nav a::after,.sub-hero::before,
  .avatar-blob,.avatar-glow,.hero-name span,.hero-name-en span { animation:none !important; transition:none !important; translate:none !important; scale:none !important; }
  .motion-card-host img { filter:none !important; }
  :is(#tools,#wip,#booth,main) .motion-card-host > .t-tilt-card,
  #worlds .world-preview > .t-tilt-card { transform:none !important; will-change:auto; }
}

/* A visible, native control belongs beside the page header, never over content. */
.motion-controls { position:relative; z-index:2; display:flex; justify-content:flex-end; width:min(calc(100% - 32px),1280px); margin:4px auto; }
.motion-toggle { min-height:44px; padding:8px 14px; border:1px solid #789dc4; border-radius:999px; color:#e8f4ff; background:#102c4c; font:600 13px/1.4 var(--font-ui,sans-serif); cursor:pointer; }
.motion-toggle:focus-visible { outline:3px solid #aadfff; outline-offset:3px; }
.motion-toggle:disabled { color:#d3e4f5; cursor:default; }
html[data-motion-paused] *,html[data-motion-paused] *::before,html[data-motion-paused] *::after { animation-play-state:paused !important; transition:none !important; scroll-behavior:auto !important; }
html[data-motion-paused] :is(.motion-image-cue,.motion-card-host,.motion-card-host img,.motion-button,.hdr-nav a,.hero-name span,.hero-name-en span) { translate:none !important; rotate:none !important; scale:none !important; }
html[data-motion-paused] :is(.t-tilt-card,.t-stagger-line) { transform:none !important; opacity:1 !important; filter:none !important; }
html[data-motion-paused] :is(.motion-ripple,.motion-bubble) { display:none !important; }

/* Hover feedback stays outside the surface; no sweeping or pointer-tracked light. */
html { --motion-edge-glow:0 0 14px rgba(94,170,255,.24),0 0 30px rgba(94,170,255,.16); }
@media (hover:hover) and (pointer:fine) {
  .motion-link-row { transition:box-shadow 320ms ease; }
  .motion-card-host:hover > .t-tilt-card,
  :is(.tool-article-card,.world-list-card,.project-index-card,.news-entry,.contact-card,.support-card,.featured-tool,.yt-card,.tt-archive-card,.motion-button,.bubble-link,.link-card,.booth-product-visual):hover,
  #worlds .world-preview:hover > .world-thumb { box-shadow:var(--motion-edge-glow); }
}

@media (prefers-reduced-motion:reduce) {
  :is(.motion-link-row,.booth-product-visual) { transition:none; }
}

/* Prepare only offscreen arrivals; visible content must never restart. */
.motion-reveal-pending { opacity:0 !important; }
@media(prefers-reduced-motion:reduce) { .motion-reveal-pending { opacity:1 !important; } }
html[data-motion-paused] .motion-reveal-pending { opacity:1 !important; }
.motion-effects.motion-effects-page { position:fixed; inset:0; z-index:1000; overflow:visible; pointer-events:none; }

/* Three soft wave fronts spread from the click without clipping to a card. */
.motion-effects-page .motion-ripple { width:0; height:0; margin:0; border:0; background:none; animation:none; }
.motion-ripple-ring {
  position:absolute; left:0; top:0; width:36px; height:36px; margin:-18px;
  border:0; border-radius:50%; fill:none; stroke:rgba(210,241,255,.8); stroke-width:.8;
  background:radial-gradient(circle,transparent 58%,rgba(163,222,255,.08) 75%,transparent 100%);
  box-shadow:none;
  opacity:0; animation:motion-soft-wave 1700ms cubic-bezier(.16,.7,.3,1) var(--ripple-delay,0ms) both;
  pointer-events:none;
}
@keyframes motion-soft-wave {
  0% { transform:scale(.25); opacity:0; }
  12% { opacity:.6; }
  55% { opacity:.2; }
  100% { transform:scale(9); opacity:0; }
}

@media(prefers-reduced-motion:reduce) { .motion-ripple-ring { animation:none; opacity:0; } }

.ripple-letter { display:inline-block; white-space:pre; }