/* Tari Electra homepage intro. Only transform and opacity animate. */
#tx {
  --tx-green: #0b5f2a;
  --tx-green-2: #16a34a;
  --tx-lime: #a3e635;
  --tx-cream: #f5f0e8;
  --tx-room: #101c14;
  --tx-ink: #101828;
  --tx-paper: #f7f8f4;
  position: fixed;
  inset: 0;
  z-index: 99999;
  overflow: hidden;
  font-family: Inter, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  touch-action: none;
  user-select: none;
}
html.tx-lock, html.tx-lock body { overflow: hidden !important; }

.tx-bg { position: absolute; inset: 0; will-change: opacity; }
.tx-bg--cream { background: var(--tx-cream); }
.tx-bg--white { background: #fff; }
.tx-bg--room { background: radial-gradient(120% 90% at 50% 45%, #1b2c20 0%, var(--tx-room) 70%); opacity: 0; }

.tx-float {
  position: absolute; left: 50%; top: 50%;
  width: 420px; height: 176px; margin: -88px 0 0 -210px;
  transform-origin: center; will-change: transform, opacity;
}

/* Stage: its centre is the screen centre, later the hero's centre. */
.tx-stage { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.tx-glow, .tx-shadow, .tx-pos { position: absolute; left: 50%; top: 50%; }
.tx-glow, .tx-shadow { will-change: transform, opacity; }
.tx-pos.is-moving { will-change: transform, opacity; }
.tx-glow {
  width: 1000px; height: 1000px; margin: -500px 0 0 -500px;
  background: radial-gradient(closest-side, rgba(163,230,53,.34), rgba(22,163,74,.13) 48%, transparent 72%);
  opacity: 0;
}
.tx-shadow {
  width: 600px; height: 70px; margin: -35px 0 0 -300px;
  background: radial-gradient(closest-side, rgba(40,35,25,.42), transparent);
}
.tx-pos { width: 520px; height: 720px; margin: -360px 0 0 -260px; }
.tx-persp { width: 520px; height: 720px; perspective: 4000px; }
.tx-box { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; }

.tx-face, .tx-side { position: absolute; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.tx-face { inset: 0; border-radius: 34px; overflow: hidden; background: #e9eae6; }
.tx-face svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.tx-face--front { transform: translateZ(116px); }
.tx-face--back { transform: rotateY(180deg) translateZ(116px); background: #d6d7d1; }
.tx-side { background: #c9cac4; }
.tx-side-shade { position: absolute; inset: 0; background: #3b2f18; opacity: .4; }
.tx-warm { background: #d8ccb2; mix-blend-mode: multiply; opacity: 0; display: none; }

.tx-layer { position: absolute; inset: 0; pointer-events: none; }
.tx-dimmer { background: #06100a; opacity: 0; will-change: opacity; }
.tx-shade { background: #15170f; opacity: 0; will-change: opacity; }
.tx-gloss {
  inset: 0 -60%; will-change: transform;
  background: linear-gradient(104deg, transparent 38%, rgba(255,255,255,.62) 49%, rgba(255,255,255,.1) 56%, transparent 62%);
  opacity: .9;
}
.tx-lcd-lit { will-change: opacity; opacity: 0; }
.tx-spill {
  background: radial-gradient(330px 170px at 197px 119px, rgba(190,245,110,.5), transparent 75%);
  opacity: 0; will-change: opacity;
}

.tx-key { position: absolute; width: 50px; height: 33px; margin: -17px 0 0 -25px; opacity: 0; will-change: transform, opacity; border-radius: 17px;
  background: linear-gradient(#34d36c, #12923f); color: #fff; font: 800 18px/33px Inter, Arial, sans-serif; text-align: center;
  box-shadow: 0 0 0 3px rgba(163,230,53,.95), 0 0 26px 8px rgba(163,230,53,.75); }

/* Captions */
.tx-cap {
  position: absolute; left: clamp(28px, 8vw, 150px); top: 50%; width: min(36vw, 480px);
  transform: translateY(-50%); color: #fff; opacity: 0; will-change: opacity;
}
.tx-cap h2 { font-size: clamp(2.1rem, 4vw, 3.7rem); line-height: 1.02; font-weight: 800; letter-spacing: -.035em; margin: 0 0 14px; color: #fff; }
.tx-cap p { font-size: clamp(1rem, 1.25vw, 1.2rem); line-height: 1.45; color: rgba(255,255,255,.72); margin: 0; }
.tx-chips { display: flex; align-items: center; gap: 12px; margin-top: 30px; min-height: 72px; }
.tx-chip {
  width: 62px; height: 70px; border-radius: 13px; background: var(--tx-green-2); color: #fff;
  font: 800 2.15rem/66px Inter, Arial, sans-serif; text-align: center; border-bottom: 4px solid var(--tx-lime);
  opacity: 0; will-change: transform, opacity;
}
.tx-tick {
  width: 38px; height: 38px; border-radius: 50%; background: var(--tx-lime); color: #123012; margin-left: 2px;
  display: grid; place-items: center; opacity: 0; will-change: transform, opacity;
}
.tx-note { margin-top: 14px !important; font-size: clamp(1.05rem, 1.4vw, 1.3rem) !important; font-weight: 700; color: var(--tx-lime) !important; opacity: 0; will-change: opacity; }

.tx-motto {
  position: absolute; left: clamp(28px, 8vw, 150px); top: 50%; transform: translateY(-50%);
  color: #fff; font-size: clamp(1.7rem, 3vw, 2.8rem); line-height: 1.12; font-weight: 800; letter-spacing: -.03em;
  opacity: 0; will-change: opacity;
}
.tx-motto span { display: block; }
.tx-motto span:last-child { color: var(--tx-lime); }

.tx-hint {
  position: absolute; left: 50%; bottom: clamp(20px, 5vh, 46px); transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 6px; white-space: nowrap;
  font-size: .78rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--tx-green);
  opacity: 0; will-change: opacity;
}
.tx-hint svg { animation: tx-nudge 1.5s cubic-bezier(.45,0,.55,1) infinite; }
@keyframes tx-nudge { 50% { transform: translateY(7px); } }

.tx-skip {
  position: absolute; right: clamp(14px, 2.5vw, 34px); top: clamp(14px, 2.5vw, 28px);
  appearance: none; cursor: pointer; border: 1.5px solid currentColor; background: transparent;
  color: var(--tx-green); font: 700 .78rem/1 Inter, Arial, sans-serif; letter-spacing: .08em; text-transform: uppercase;
  padding: 11px 15px; border-radius: 2px; transition: background-color .15s, color .15s, transform .15s;
}
.tx-skip:hover { background: var(--tx-green); color: #fff; }
.tx-skip:active { transform: translateY(1px); }
.tx-skip:focus-visible { outline: 3px solid var(--tx-lime); outline-offset: 2px; }
#tx.is-dark .tx-skip { color: #fff; }
#tx.is-dark .tx-skip:hover { background: #fff; color: var(--tx-room); }

@media (max-width: 759px) {
  .tx-cap { left: 20px; right: 20px; width: auto; top: auto; bottom: 22px; transform: none; text-align: center; }
  .tx-cap h2 { font-size: 1.85rem; margin-bottom: 6px; }
  .tx-cap p { font-size: .95rem; }
  .tx-chips { justify-content: center; margin-top: 12px; min-height: 52px; gap: 9px; }
  .tx-chip { width: 44px; height: 50px; font-size: 1.5rem; line-height: 47px; border-radius: 10px; }
  .tx-tick { width: 30px; height: 30px; }
  .tx-note { margin-top: 8px !important; }
  .tx-motto { left: 0; right: 0; top: auto; bottom: 24px; transform: none; text-align: center; font-size: 1.15rem; }
  .tx-motto span { display: inline; }
}

/* Very large screens: the words grow with the meter. */
@media (min-width: 2200px) {
  .tx-cap, .tx-motto, .tx-hint, .tx-skip { zoom: 1.7; }
}
@media (min-width: 5000px) {
  .tx-cap, .tx-motto, .tx-hint, .tx-skip { zoom: 3.2; }
}