/* =========================================================
   TIER — Grid Motion styles  (pairs with js/tier-grid-motion.js)
   Curves are approximations of the promo's measured easing:
     --tgm-card : cell opens from its node (fast start, long tail)
     --tgm-rise : words rise into place
   ========================================================= */
:root {
  --tgm-card: cubic-bezier(.08, .82, .17, 1);
  --tgm-rise: cubic-bezier(.16, 1, .3, 1);
  --tgm-pinch: cubic-bezier(.55, 0, .9, .4);
}

/* ---------- the living grid ---------- */
.tgm-canvas {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}
/* the canvas now paints the black base, so the page layers above it go clear */
html.tgm-grid main,
html.tgm-grid .mock-section { background-color: transparent !important; }
/* the social connector sits behind the cards; a solid plate keeps it in the gaps */
html.tgm-grid .social-card { background-color: #000; }
/* the existing rotating rings sit back so the grid reads clearly */
html.tgm-grid .mock-section::before { opacity: .22; }

/* ---------- hero: hold everything until the intro runs ---------- */
html.tgm:not(.tgm-ready) .hero-inner > * { opacity: 0; animation: tgm-failsafe 0s 3.2s forwards; }
@keyframes tgm-failsafe { to { opacity: 1; } }

html.tgm .hero-logo {
  opacity: 0;
  clip-path: inset(50% -10% 50% -10%);
  transform: scale(1.12);
  transition:
    opacity 900ms cubic-bezier(.19, 1, .22, 1),
    clip-path 760ms cubic-bezier(.2, .7, .2, 1),
    transform 1500ms var(--tgm-card),
    filter 1500ms ease;
}
html.tgm .hero-logo.tgm-logo-on {
  opacity: 1;
  clip-path: inset(-10% -10% -10% -10%);
  transform: none;
  animation: tgm-logo-breathe 6s ease-in-out 1.6s infinite;
}
@keyframes tgm-logo-breathe {
  0%, 100% { filter: drop-shadow(0 0 18px rgba(255, 255, 255, .14)); }
  50%      { filter: drop-shadow(0 0 30px rgba(255, 255, 255, .26)); }
}

/* ---------- words land one by one and rise into place ---------- */
.tgm-w {
  display: inline-block;
  clip-path: inset(-1em -1em -.12em -1em);
  vertical-align: baseline;
}
.tgm-wi { display: inline-block; }
.tgm-land .tgm-wi {
  opacity: 0;
  transform: translateY(46%);
}
.tgm-land.tgm-on .tgm-wi,
.tgm-land .tgm-in .tgm-wi {
  opacity: 1;
  transform: none;
  transition:
    opacity 240ms ease var(--d, 0ms),
    transform 950ms var(--tgm-rise) var(--d, 0ms);
}

/* ---------- letters fade in at shuffled times, tracking tightens ---------- */
.tgm-scr .tgm-c { opacity: 0; }
.tgm-scr:not(.tgm-on) { letter-spacing: .32em; }
.tgm-scr { transition: letter-spacing 1200ms var(--tgm-rise) var(--d0, 0ms); }
.tgm-scr.tgm-on .tgm-c {
  opacity: 1;
  transition: opacity 200ms ease var(--d, 0ms);
}

/* ---------- decode (closing line) ---------- */
.tgm-dec:not(.tgm-on) .tgm-c { opacity: 0; }
.tgm-dec .tgm-c.tgm-lock { animation: tgm-lock 520ms ease-out; }
@keyframes tgm-lock {
  0%   { text-shadow: 0 0 18px rgba(255, 255, 255, .9); }
  100% { text-shadow: none; }
}

.tgm-sr {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

/* ---------- cells: cards open from their centre node ---------- */
.tgm-cell:not(.tgm-open) {
  opacity: 0;
  clip-path: inset(48% 48% 48% 48%);
}
.tgm-cell.tgm-open {
  animation: tgm-cell-open 1250ms var(--tgm-card) var(--cd, 0ms) backwards;
}
@keyframes tgm-cell-open {
  0%   { opacity: 0; clip-path: inset(48% 48% 48% 48%); }
  8%   { opacity: 1; }
  100% { opacity: 1; clip-path: inset(-80px -80px -80px -80px); }
}

/* corner handles (the promo's grey squares) */
.tgm-handles {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 3;
}
.tgm-handles i {
  position: absolute;
  width: 7px; height: 7px;
  background: rgba(170, 170, 178, .9);
  opacity: 0;
  transition: opacity 400ms ease, transform 500ms var(--tgm-card);
  transform: scale(.4);
}
.tgm-handles i:nth-child(1) { left: -3px;  top: -3px; }
.tgm-handles i:nth-child(2) { right: -3px; top: -3px; }
.tgm-handles i:nth-child(3) { left: -3px;  bottom: -3px; }
.tgm-handles i:nth-child(4) { right: -3px; bottom: -3px; }
.tgm-cell.tgm-open > .tgm-handles i {
  animation: tgm-handle 1800ms ease var(--cd, 0ms) both;
}
@keyframes tgm-handle {
  0%   { opacity: 0; transform: scale(.4); }
  15%  { opacity: 1; transform: scale(1); }
  70%  { opacity: 1; }
  100% { opacity: .28; transform: scale(1); }
}
.tgm-cell.tgm-open:hover > .tgm-handles i,
.tgm-cell.tgm-open:focus-within > .tgm-handles i {
  opacity: 1;
  transform: scale(1);
  animation: none;
}
/* overflow:hidden on cards would hide the handles — inset them slightly */
.path-card > .tgm-handles,
.tier-card > .tgm-handles { inset: 4px; }
.path-card > .tgm-handles i,
.tier-card > .tgm-handles i { width: 6px; height: 6px; }

/* list items step in after their cell opens */
.tgm-li { opacity: 0; transform: translateX(-10px); }
.tgm-cell.tgm-open .tgm-li {
  opacity: 1;
  transform: none;
  transition: opacity 420ms ease var(--d, 0ms), transform 700ms var(--tgm-rise) var(--d, 0ms);
}

/* ---------- buttons: handles + glint on hover ---------- */
.button, .nav-cta { position: relative; }
.tgm-btn-handles { inset: -5px; }
.tgm-btn-handles i { width: 5px; height: 5px; background: rgba(255, 255, 255, .85); }
.button:hover > .tgm-btn-handles i,
.button:focus-visible > .tgm-btn-handles i,
.nav-cta:hover > .tgm-btn-handles i,
.nav-cta:focus-visible > .tgm-btn-handles i {
  opacity: 1;
  transform: scale(1);
}
.tgm-glint {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  overflow: hidden;
  pointer-events: none;
  z-index: 2;
}
.tgm-glint::before {
  content: "";
  position: absolute;
  top: -20%; bottom: -20%;
  width: 38%;
  left: -50%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .55), transparent);
  transform: skewX(-18deg);
  opacity: 0;
}
.button:hover > .tgm-glint::before,
.nav-cta:hover > .tgm-glint::before {
  animation: tgm-glint 720ms cubic-bezier(.45, 0, .2, 1);
}
@keyframes tgm-glint {
  0%   { left: -50%; opacity: 0; }
  20%  { opacity: 1; }
  100% { left: 120%; opacity: 0; }
}
.tgm-cta.tgm-cell:not(.tgm-open) { clip-path: inset(50% 50% 50% 50% round 999px); }

/* ---------- FAQ: a line sweeps across each row, then the question lands ---------- */
.tgm-row { position: relative; }
.tgm-row::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: -1px;
  height: 1px;
  background: rgba(255, 255, 255, .9);
  box-shadow: 0 0 10px rgba(255, 255, 255, .5);
  transform: scaleX(0);
  transform-origin: left;
  opacity: 0;
  pointer-events: none;
}
.tgm-row.tgm-on::before { animation: tgm-row-line 1300ms var(--tgm-card) var(--d, 0ms) both; }
@keyframes tgm-row-line {
  0%   { transform: scaleX(0); opacity: 1; }
  55%  { transform: scaleX(1); opacity: 1; }
  100% { transform: scaleX(1); opacity: 0; }
}
.tgm-row summary::after { transition: opacity 400ms ease; }
.tgm-row:not(.tgm-on) summary::after { opacity: 0; }

.tgm-grow { animation: tgm-grow 620ms var(--tgm-card); }
@keyframes tgm-grow {
  0%   { clip-path: inset(0 0 100% 0); opacity: 0; transform: translateY(-6px); }
  100% { clip-path: inset(0 0 0 0); opacity: 1; transform: none; }
}

/* ---------- closing ---------- */
.tgm-vmark { transform: scaleY(0); transform-origin: top; }
.tgm-vmark.tgm-on { transform: none; transition: transform 1100ms var(--tgm-card); }

/* ---------- reduced motion: show everything, no movement ---------- */
@media (prefers-reduced-motion: reduce) {
  .tgm-land .tgm-wi, .tgm-scr .tgm-c, .tgm-dec .tgm-c, .tgm-li, .tgm-cell:not(.tgm-open), .tgm-vmark, html.tgm .hero-logo {
    opacity: 1 !important; transform: none !important; clip-path: none !important; letter-spacing: inherit;
  }
}

/* ---------- card pop (path + tier cards) ---------- */
.tgm-pop:not(.tgm-popped) { opacity: 0; clip-path: inset(50% 50% 50% 50%); }
.tgm-pop.tgm-popped .tgm-li {
  opacity: 1;
  transform: none;
  transition: opacity 420ms ease var(--d, 0ms), transform 700ms var(--tgm-rise) var(--d, 0ms);
}
.tgm-pop.tgm-popped > .tgm-handles i { animation: tgm-handle 1800ms ease 200ms both; }
.tgm-pop.tgm-popped:hover > .tgm-handles i,
.tgm-pop.tgm-popped:focus-within > .tgm-handles i { opacity: 1; transform: scale(1); animation: none; }
.tgm-pop-node {
  position: absolute;
  width: 14px; height: 14px;
  background: #f4f5fa;
  box-shadow: 0 0 14px rgba(255, 255, 255, .85), 0 0 34px rgba(255, 255, 255, .35);
  pointer-events: none;
  z-index: 4;
}
.tgm-pop-ghost {
  position: absolute;
  border: 1px solid rgba(255, 255, 255, .55);
  background: rgba(255, 255, 255, .05);
  pointer-events: none;
  z-index: 0;
}
.tgm-pop-flash {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 2;
  background:
    radial-gradient(120% 90% at var(--fx, 100%) 0%, rgba(255, 255, 255, .22), rgba(255, 255, 255, .06) 55%, transparent 80%),
    rgba(200, 206, 230, .08);
  mix-blend-mode: screen;
}
.card-topline span.tgm-tick { text-shadow: 0 0 12px rgba(255, 255, 255, .9); }
@media (prefers-reduced-motion: reduce) {
  .tgm-pop:not(.tgm-popped) { opacity: 1 !important; clip-path: none !important; }
}

/* ---------- app page ---------- */
html.tgm .tgm-reveal {
  opacity: 0;
  clip-path: inset(50% -10% 50% -10%);
  transform: scale(1.06);
  transition: opacity 900ms cubic-bezier(.19, 1, .22, 1), clip-path 900ms cubic-bezier(.2, .7, .2, 1), transform 1600ms var(--tgm-card);
}
html.tgm .tgm-reveal.tgm-logo-on { opacity: 1; clip-path: inset(-10% -10% -10% -10%); transform: none; }
html.tgm-grid .app-page-main,
html.tgm-grid .app-page-main > section { background-color: transparent !important; }
html.tgm:not(.tgm-ready) .app-hero-text > * { opacity: 0; animation: tgm-failsafe 0s 3.2s forwards; }
@media (prefers-reduced-motion: reduce) {
  html.tgm .tgm-reveal { opacity: 1 !important; clip-path: none !important; transform: none !important; }
}

/* word splitting must not turn grid/flex copy into one-word-per-row */
.app-hero-copy.tgm-land, .app-skilltree-body.tgm-land, .app-quest-body.tgm-land, .app-life-system-copy.tgm-land, .app-life-header > p.tgm-land { display: block; text-align: center; }
.app-skilltree-body.tgm-land, .app-quest-body.tgm-land { text-align: inherit; }

/* the app page animates its hero children itself — keep cells closed until they open */
html.tgm .tgm-cell:not(.tgm-open) { opacity: 0 !important; clip-path: inset(48% 48% 48% 48%) !important; }
html.tgm .tgm-pop:not(.tgm-popped) { opacity: 0 !important; }
html.tgm .tgm-cell.tgm-open { animation: tgm-cell-open 1250ms var(--tgm-card) var(--cd, 0ms) both !important; }
/* app hero children start blurred/offset for the page's own intro; our cell replaces that intro */
html.tgm .app-page .tgm-cta.tgm-open { filter: none; transform: none; }