/* CHIKARA Navigator 1.7.3 — motion.css
   Palette: Vellum, Gold, Ivory and the rotor's pastel green.
   Motion family: Living Motion Bible v2.0 tokens. Only transform and opacity animate.
   No backdrop-filter on shelves (cost). Reduced motion is a rendering mode, not a downgrade. */

:root {
  /* Rotor green family (from the owner's Blender Rotor) */
  --rotor-soft: #D8F0E4;
  --rotor-light: #C5E6D6;
  --rotor: #A8D5C2;
  --rotor-mid: #6FA890;
  --rotor-deep: #355F4F;

  /* "State" colour used to be teal. It now follows the rotor.
     Vellum: text 6.2:1 (#355F4F), graphics 3.5:1 (#4F8A74). Obsidian: #A8D5C2 11.8:1. */
  --teal: #4F8A74;
  --teal-hi: #A8D5C2;
  --teal-deep: #355F4F;

  /* Motion tokens (Living Motion Bible v2.0) */
  --m-d1: 120ms; --m-d2: 200ms; --m-d3: 320ms; --m-d4: 480ms; --m-d5: 700ms;
  --m-ease: cubic-bezier(.2, .7, .3, 1);
  --m-ease-out: cubic-bezier(.05, .72, .12, 1);
  --m-ease-emph: cubic-bezier(.2, .9, .08, 1);
  --m-spring: cubic-bezier(.22, 1.18, .36, 1);
  --m-stagger: 56ms;
}

/* ───────────── Glass frame (3.5D): frosted vellum plate, gold bezel, light sweep ───────────── */
.gframe {
  --fs: 52px;
  position: relative; display: inline-grid; place-items: center; flex: none;
  width: var(--fs); height: var(--fs); padding: 3px; box-sizing: border-box;
  border: 1.5px solid transparent; border-radius: calc(var(--fs) * .3); overflow: hidden;
  background:
    linear-gradient(155deg, rgba(255, 252, 243, .96), rgba(235, 225, 206, .8)) padding-box,
    var(--gold-band) border-box;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .75),
    inset 0 -2px 4px rgba(118, 86, 25, .16),
    0 7px 12px -7px rgba(45, 31, 16, .5),
    0 1px 2px rgba(45, 31, 16, .22);
  transition: transform var(--m-d2) var(--m-spring), box-shadow var(--m-d2) var(--m-ease);
  isolation: isolate;
}
.gframe > img, .gframe > svg {
  width: 100%; height: 100%; display: block; object-fit: contain;
  border-radius: calc(var(--fs) * .22);
}
/* specular highlight, top-left light on every icon */
.gframe::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  border-radius: inherit;
  background: linear-gradient(135deg, rgba(255, 255, 255, .5) 0, rgba(255, 255, 255, 0) 34%);
}
/* light sweep: plays once when the tile appears */
.gframe::after {
  content: ""; position: absolute; top: -10%; bottom: -10%; left: 0; width: 46%; z-index: 2;
  pointer-events: none; opacity: 0;
  background: linear-gradient(100deg, rgba(255, 246, 216, 0), rgba(255, 246, 216, .85), rgba(255, 246, 216, 0));
  transform: translateX(-130%) skewX(-18deg);
  animation: m-sweep 1.5s var(--m-ease-out) both;
  animation-delay: calc(var(--i, 8) * var(--m-stagger) + 350ms);
}
.app-grid > :nth-child(1) { --i: 0; } .app-grid > :nth-child(2) { --i: 1; }
.app-grid > :nth-child(3) { --i: 2; } .app-grid > :nth-child(4) { --i: 3; }
.app-grid > :nth-child(5) { --i: 4; } .app-grid > :nth-child(6) { --i: 5; }
.app-grid > :nth-child(7) { --i: 6; } .app-grid > :nth-child(8) { --i: 7; }
@keyframes m-sweep {
  0% { transform: translateX(-130%) skewX(-18deg); opacity: 0; }
  18% { opacity: 1; }
  100% { transform: translateX(330%) skewX(-18deg); opacity: 0; }
}

.app-card .gframe { --fs: 52px; margin-bottom: .1rem; }
.app-row .gframe { --fs: 44px; }
.crate-face .gframe { --fs: 52px; }
.detail-meta .gframe { --fs: 56px; }
.cc-recent__item .gframe { --fs: 34px; }

/* press: sinks and tilts, the same for every tile */
.app-card:active .gframe, .app-row:active .gframe {
  transform: perspective(260px) rotateX(9deg) translateY(2px) scale(.955);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), inset 0 -1px 2px rgba(118, 86, 25, .2), 0 2px 5px -3px rgba(45, 31, 16, .5);
}

/* the focused tile in the crate is the only one that idles: Float Idle (LM-09) + slow sweep + gold glow */
.crate-tile.is-focus .gframe {
  animation: m-float 3600ms ease-in-out infinite;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .75), inset 0 -2px 4px rgba(118, 86, 25, .16),
    0 12px 18px -9px rgba(45, 31, 16, .55),
    0 0 0 3px color-mix(in srgb, var(--gold) 20%, transparent),
    0 0 22px color-mix(in srgb, var(--gold-hi) 40%, transparent);
}
.crate-tile.is-focus .gframe::after { animation: m-sweep 5.4s var(--m-ease) 1.2s infinite; }
@keyframes m-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }

html[data-theme="obsidian"] .gframe {
  background:
    linear-gradient(155deg, rgba(74, 68, 56, .95), rgba(24, 26, 26, .88)) padding-box,
    var(--gold-band) border-box;
  box-shadow:
    inset 0 1px 0 rgba(255, 240, 200, .28), inset 0 -2px 4px rgba(0, 0, 0, .5),
    0 7px 12px -7px rgba(0, 0, 0, .8), 0 0 0 1px rgba(0, 0, 0, .35);
}
html[data-theme="obsidian"] .gframe::before {
  background: linear-gradient(135deg, rgba(255, 240, 200, .26) 0, rgba(255, 240, 200, 0) 34%);
}

/* ───────────── Rotor loader (Blender Rotor): em-scaled, blades + gold hub ───────────── */
.rotor { --rs: 64px; position: relative; display: inline-block; flex: none; width: var(--rs); height: var(--rs); font-size: var(--rs); }
.rotor__spin { position: absolute; inset: 0; transform-origin: 50% 50%; }
.rotor__b {
  position: absolute; left: 50%; top: 50%;
  width: var(--bl, .407em); height: var(--bt, .072em); margin-top: calc(var(--bt, .072em) / -2);
  transform-origin: 0 50%; transform: rotate(var(--a, 0deg)) translateX(var(--off, 0em));
  background: linear-gradient(90deg, var(--rotor) 0%, #8CC4AB 45%, var(--rotor-mid) 80%, #5C9680 100%);
  clip-path: polygon(0 16%, 66% 0, 100% 50%, 66% 100%, 0 84%);
}
/* soft contact shadow so the pastel blades hold on vellum; rasterised once because .rotor__spin is its own layer */
.rotor__spin { will-change: transform; }
.rotor__spin > .rotor__b { filter: drop-shadow(0 .008em .018em rgba(45, 31, 16, .28)); }
.rotor__hub {
  position: absolute; left: 50%; top: 50%; width: .237em; height: .237em; margin: -.1185em 0 0 -.1185em;
  border-radius: 50%;
  background: radial-gradient(circle at 38% 30%, #F0DFA0 0%, #E4C878 35%, #C9A84C 70%, #8A7029 100%);
  box-shadow: inset 0 -.01em .025em rgba(0, 0, 0, .2), 0 0 .07em rgba(201, 168, 76, .3);
}
.rotor__hub::before { content: ""; position: absolute; inset: .042em; border-radius: 50%; border: .01em solid rgba(42, 36, 32, .18); }
.rotor__hub::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: .05em; height: .05em; margin: -.025em 0 0 -.025em;
  border-radius: 50%; background: radial-gradient(circle at 35% 30%, #F8F0D8, #8A7029);
}
/* variants */
.rotor--burst .rotor__spin, .rotor.is-spinning .rotor__spin { animation: m-spin .75s linear infinite; }
.rotor--think .rotor__spin { animation: m-think 4s cubic-bezier(.4, 0, .2, 1) infinite; }
.rotor--pulse .rotor__spin { animation: m-spin .9s linear infinite; }
.rotor--pulse .rotor__hub { animation: m-hub 1.6s ease-in-out infinite; }
@keyframes m-spin { to { transform: rotate(360deg); } }
@keyframes m-think {
  0% { transform: rotate(0); } 34% { transform: rotate(700deg); } 50% { transform: rotate(760deg); }
  64% { transform: rotate(790deg); } 100% { transform: rotate(1440deg); }
}
@keyframes m-hub { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.12); } }
.rotor.is-ready .rotor__hub, .rotor.is-ready .rotor__logo { animation: m-ready .7s var(--m-ease-out) 1; }
@keyframes m-ready { 0% { transform: scale(1); } 45% { transform: scale(1.1); } 100% { transform: scale(1); } }

/* logo-as-hub variant used on the splash: blades orbit the lion */
.rotor--logo { --off: .215em; --bl: .29em; --bt: .07em; }
.rotor__logo {
  position: absolute; left: 50%; top: 50%; width: .39em; height: .39em; margin: -.195em 0 0 -.195em;
  border-radius: 50%; padding: .012em; box-sizing: border-box;
  background: var(--gold-band);
  box-shadow: 0 .03em .06em rgba(45, 31, 16, .35), 0 0 .12em color-mix(in srgb, var(--gold-hi) 45%, transparent);
}
.rotor__logo img { width: 100%; height: 100%; display: block; border-radius: 50%; object-fit: cover; }

/* ───────────── Splash ───────────── */
/* 1.10.0: the emerald lockup is silver on green, so the splash is emerald in both themes */
#boot { background: radial-gradient(120% 80% at 50% 38%, #124F42 0%, #0B3D33 55%, #07281F 100%); }
#boot .boot__word { color: #EDE3CB; }
#boot .boot__tag { color: #C9B27A; }
#boot .boot__credit { color: color-mix(in srgb, #EDE3CB 78%, transparent); }
#boot .boot__bar { display: none; }
#boot .boot__logo {
  display: block; width: min(66vw, 280px); height: auto; margin: 0 auto 1rem;
  animation: m-logo-breathe 3.2s ease-in-out infinite; /* opacity and transform only */
}
#boot .boot__word { font-size: 1.3rem; }
#boot .boot__rotor {
  position: absolute; left: 20px; bottom: calc(20px + env(safe-area-inset-bottom, 0px));
  --rs: 56px; margin: 0;
}
#boot .boot__credit {
  position: absolute; left: 0; right: 0; bottom: calc(24px + env(safe-area-inset-bottom, 0px));
  text-align: center; font-family: var(--font-mono); font-size: .56rem; letter-spacing: .1em; color: var(--muted);
  pointer-events: none;
}
@keyframes m-logo-breathe { 0%, 100% { opacity: .9; transform: scale(1); } 50% { opacity: 1; transform: scale(1.015); } }

/* ───────────── Wait chip: appears only after 300 ms, never blocks input ───────────── */
.wait-chip {
  position: fixed; left: 50%; top: calc(var(--status-h) + 10px); z-index: 8000; pointer-events: none;
  display: flex; align-items: center; gap: .6rem; padding: .4rem .85rem .4rem .5rem; border-radius: 999px;
  background: linear-gradient(155deg, rgba(255, 252, 243, .97), rgba(235, 225, 206, .92));
  border: 1px solid color-mix(in srgb, var(--gold) 45%, transparent);
  box-shadow: 0 10px 22px -10px rgba(45, 31, 16, .5);
  color: var(--vellum-ink, #1D1917); font: 600 .78rem/1 var(--font-ui);
  opacity: 0; transform: translate(-50%, -8px) scale(.96);
  transition: opacity var(--m-d3) var(--m-ease-out), transform var(--m-d3) var(--m-ease-out);
}
.wait-chip.is-in { opacity: 1; transform: translate(-50%, 0) scale(1); }
.wait-chip .rotor { --rs: 26px; }
html[data-theme="obsidian"] .wait-chip {
  background: linear-gradient(155deg, rgba(60, 56, 48, .97), rgba(24, 26, 26, .94)); color: #F2EDE2;
}

/* ───────────── Hold to remove (two stages) and Fracture ───────────── */
.m-armed { position: relative; z-index: 2; }
.m-armed .gframe {
  transform: translateY(-3px) scale(1.07);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .75), 0 14px 20px -10px rgba(45, 31, 16, .6),
    0 0 0 3px color-mix(in srgb, var(--gold) 28%, transparent), 0 0 24px color-mix(in srgb, var(--gold-hi) 50%, transparent);
}
.m-holdring { position: fixed; z-index: 9400; width: 64px; height: 64px; margin: -32px 0 0 -32px; pointer-events: none; }
.m-holdring svg { width: 100%; height: 100%; }
.m-holdring circle { fill: none; stroke-width: 3.2; }
.m-holdring .t { stroke: color-mix(in srgb, var(--gold) 28%, transparent); }
.m-holdring .p { stroke: var(--gold-hi); stroke-linecap: round; transform: rotate(-90deg); transform-origin: 50% 50%; }
.m-hint {
  position: fixed; z-index: 9400; left: 50%; transform: translateX(-50%); pointer-events: none;
  padding: .38rem .8rem; border-radius: 999px; font: 600 .74rem/1.2 var(--font-ui); white-space: nowrap;
  background: var(--obsidian, #0F1010); color: var(--obsidian-ink, #F2EDE2);
  border: 1px solid color-mix(in srgb, var(--gold) 55%, transparent);
  box-shadow: 0 10px 22px -10px rgba(0, 0, 0, .6);
}
#mFx { position: fixed; inset: 0; z-index: 9500; pointer-events: none; }
.m-shard { position: absolute; pointer-events: none; will-change: transform, opacity; }
.m-shard > * { pointer-events: none; }
.m-shard .bevel, .m-shard .edge { position: absolute; left: 0; top: 0; width: 100%; height: 100%; }
.m-shard .edge polygon { fill: none; stroke: rgba(255, 246, 216, .9); stroke-width: 1.4; stroke-linejoin: round; }
.m-cracks { position: absolute; pointer-events: none; overflow: hidden; }
.m-cracks path { fill: none; stroke-linejoin: round; stroke-linecap: butt; }
.m-cracks .c-dark path { stroke: rgba(26, 18, 8, .55); }
.m-cracks .c-light path { stroke: rgba(255, 255, 255, .95); }
.m-cracks.is-preview { left: 0; top: 0; width: 100%; height: 100%; border-radius: inherit; }

/* undo bar */
.undo-bar {
  position: fixed; left: 50%; z-index: 8100;
  bottom: calc(var(--dock-h, 72px) + env(safe-area-inset-bottom, 0px) + 16px);
  transform: translate(-50%, 12px); opacity: 0; pointer-events: none;
  display: flex; align-items: center; gap: .9rem; padding: .55rem .6rem .55rem 1rem; border-radius: 999px;
  background: var(--obsidian, #0F1010); color: var(--obsidian-ink, #F2EDE2);
  border: 1px solid color-mix(in srgb, var(--gold) 50%, transparent);
  box-shadow: 0 14px 28px -12px rgba(0, 0, 0, .65); font: 500 .82rem/1.2 var(--font-ui);
  transition: opacity var(--m-d3) var(--m-ease-out), transform var(--m-d3) var(--m-ease-out);
}
.undo-bar.is-in { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.undo-bar button {
  min-height: 36px; padding: 0 .95rem; border-radius: 999px; border: 0; cursor: pointer;
  background: var(--gold-band); color: #1A140C; font: 700 .8rem/1 var(--font-ui);
}
.mend-in { animation: m-mend 380ms var(--m-ease-out) both; }
@keyframes m-mend { from { opacity: 0; transform: scale(.94); } to { opacity: 1; transform: none; } }

/* Home: restore line + detail links */
.home-restore { margin: 1rem 0 0; font-size: .78rem; color: var(--muted); }
.home-restore button { background: none; border: 0; padding: .3rem .2rem; font: inherit; font-weight: 700; color: var(--teal-deep); text-decoration: underline; cursor: pointer; }
html[data-theme="obsidian"] .home-restore button { color: var(--teal-hi); }
.detail-links { display: flex; flex-wrap: wrap; gap: .5rem 1.1rem; align-items: center; margin: .2rem 0 .9rem; font-size: .84rem; }
.detail-links a, .detail-links button {
  background: none; border: 0; padding: .45rem 0; min-height: 40px; font: inherit; font-weight: 600; cursor: pointer;
  color: var(--teal-deep); text-decoration: underline; text-underline-offset: 3px;
}
html[data-theme="obsidian"] .detail-links a, html[data-theme="obsidian"] .detail-links button { color: var(--teal-hi); }
.detail-part { font-size: .78rem; color: var(--muted); margin: -.2rem 0 .6rem; }

/* ───────────── Touch: a long press is a gesture here, not a text selection or an image menu ───────────── */
.app-card, .app-row, .crate-tile, .cc-recent__item {
  -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent;
}
.gframe > img { pointer-events: none; -webkit-user-drag: none; }

/* ───────────── Reduced motion: state still lands, nothing travels ───────────── */
@media (prefers-reduced-motion: reduce) {
  .gframe::after { animation: none !important; opacity: 0; }
  .crate-tile.is-focus .gframe { animation: none !important; }
  .rotor__spin, .rotor__hub { animation: none !important; }
  .rotor { animation: m-breathe 3s ease-in-out infinite; }
  #boot .boot__logo { animation: none; }
  .gframe, .wait-chip, .undo-bar { transition: opacity var(--m-d2) linear; }
  .mend-in { animation: none; }
}
@keyframes m-breathe { 0%, 100% { opacity: .62; } 50% { opacity: 1; } }

/* Gamazine overlay: the shared stylesheet keys dark opacity to data-mode; Navigator's dark theme is obsidian. */
html[data-theme="obsidian"] { --gz-opacity: .2; }