/* ==========================================================================
   TSG Trip CRM - launch intro "Topographic Reveal" (concept B)
   Timeline (matches INTRO_DURATION_MS = 8400 and the startup sound):
     0.0s  route  - map lines + rings fade in, marker starts its climb
     2.3s  climb  - caption changes, lines intensify
     4.6s  final  - summit reached: pulse, logo reveal, title, hashtags
   Everything is sized in --u (1u = 1px on a 1440x810 stage) so it scales.
   ========================================================================== */
.tsgi {
  --u: min(.069444vw, .123457vh);
  --lime: #c8f31d;
  --orange: #e8692a;
  background: #062631;
  color: #fff;
  font-family: "Montserrat", ui-sans-serif, system-ui, sans-serif;
  inset: 0;
  overflow: hidden;
  position: fixed;
  z-index: 50;
}
.tsgi *, .tsgi *::before, .tsgi *::after { box-sizing: border-box; }
.tsgi-glow {
  background: radial-gradient(circle at 50% 50%, rgba(2, 73, 69, .62), transparent 66%);
  inset: 0;
  position: absolute;
}
.tsgi-topo {
  -webkit-mask-image: radial-gradient(ellipse at center, #000 8%, transparent 72%);
          mask-image: radial-gradient(ellipse at center, #000 8%, transparent 72%);
  animation: tsgiDrift 60s linear infinite;
  background: url("textures/topo-lime.svg") center / calc(var(--u) * 1000) calc(var(--u) * 1000) repeat;
  inset: -6%;
  filter: brightness(2.1) contrast(1.15);
  opacity: 0;
  position: absolute;
  transition: opacity 2.2s ease;
}
.tsgi.is-ready .tsgi-topo { opacity: .8; }
.tsgi[data-phase="climb"] .tsgi-topo { opacity: 1; transition-duration: 2s; }
.tsgi[data-phase="final"] .tsgi-topo { opacity: .5; transition-duration: 2.4s; }
@keyframes tsgiDrift { to { background-position: calc(var(--u) * 1000) calc(var(--u) * -500); } }

/* rings + climbing marker */
.tsgi-ring {
  border: 1px solid rgba(200, 243, 29, .26);
  border-radius: 50%;
  left: 50%;
  opacity: 0;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%) scale(.82);
  transition: opacity 2s ease .3s, transform 3s cubic-bezier(.22, .75, .18, 1) .3s;
}
.tsgi-ring.r1 { height: calc(var(--u) * 620); width: calc(var(--u) * 620); }
.tsgi-ring.r2 { height: calc(var(--u) * 900); width: calc(var(--u) * 900); border-color: rgba(200, 243, 29, .14); }
.tsgi.is-ready .tsgi-ring { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.tsgi-orbit {
  height: calc(var(--u) * 620);
  left: 50%;
  margin: calc(var(--u) * -310) 0 0 calc(var(--u) * -310);
  position: absolute;
  top: 50%;
  transform: rotate(-150deg);
  transition: transform 4.4s cubic-bezier(.45, 0, .2, 1) .2s;
  width: calc(var(--u) * 620);
}
.tsgi.is-ready .tsgi-orbit { transform: rotate(0deg); }
.tsgi-marker {
  background: var(--orange);
  box-shadow: 0 0 calc(var(--u) * 18) rgba(232, 105, 42, .8);
  height: calc(var(--u) * 9);
  left: 50%;
  position: absolute;
  top: 0;
  transform: translate(-50%, -50%) rotate(45deg);
  width: calc(var(--u) * 9);
}
.tsgi[data-phase="final"] .tsgi-marker { animation: tsgiMarker 1.4s ease-out forwards; }
@keyframes tsgiMarker { 0% { transform: translate(-50%, -50%) rotate(45deg) scale(1); } 40% { transform: translate(-50%, -50%) rotate(45deg) scale(2.4); } 100% { transform: translate(-50%, -50%) rotate(45deg) scale(1); } }

/* corner marks + readouts */
.tsgi-corner {
  border: 1px solid rgba(200, 243, 29, .75);
  height: calc(var(--u) * 26);
  opacity: 0;
  position: absolute;
  transition: opacity 1s ease .5s, transform 1.2s cubic-bezier(.22, .75, .18, 1) .5s;
  width: calc(var(--u) * 26);
}
.tsgi-corner.c1 { border-bottom: 0; border-right: 0; left: calc(var(--u) * 56); top: calc(var(--u) * 48); transform: translate(calc(var(--u) * 14), calc(var(--u) * 14)); }
.tsgi-corner.c2 { border-bottom: 0; border-left: 0; right: calc(var(--u) * 56); top: calc(var(--u) * 48); transform: translate(calc(var(--u) * -14), calc(var(--u) * 14)); }
.tsgi-corner.c3 { border-right: 0; border-top: 0; bottom: calc(var(--u) * 48); left: calc(var(--u) * 56); transform: translate(calc(var(--u) * 14), calc(var(--u) * -14)); }
.tsgi-corner.c4 { border-left: 0; border-top: 0; bottom: calc(var(--u) * 48); right: calc(var(--u) * 56); transform: translate(calc(var(--u) * -14), calc(var(--u) * -14)); }
.tsgi.is-ready .tsgi-corner { opacity: 1; transform: none; }
.tsgi-read {
  color: rgba(255, 255, 255, .72);
  font-size: calc(var(--u) * 10.5);
  font-weight: 600;
  letter-spacing: .28em;
  line-height: 1.7;
  opacity: 0;
  position: absolute;
  text-transform: uppercase;
  transition: opacity 1.1s ease .9s;
}
.tsgi.is-ready .tsgi-read { opacity: 1; }
.tsgi-read b { color: var(--lime); font-weight: 700; }
.tsgi-read.tl { left: calc(var(--u) * 96); top: calc(var(--u) * 52); }
.tsgi-read.tr { right: calc(var(--u) * 96); text-align: right; top: calc(var(--u) * 52); }
.tsgi-read.bl { bottom: calc(var(--u) * 52); left: calc(var(--u) * 96); }
.tsgi-read.br { bottom: calc(var(--u) * 52); right: calc(var(--u) * 96); text-align: right; }
.tsgi-elev { font-variant-numeric: tabular-nums; }

/* centre captions (route / climb) */
.tsgi-route {
  align-items: center;
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 16);
  inset: 0;
  justify-content: center;
  position: absolute;
  transition: opacity .6s ease;
}
.tsgi[data-phase="final"] .tsgi-route { opacity: 0; }
.tsgi-cap {
  color: var(--lime);
  font-size: calc(var(--u) * 13);
  font-weight: 700;
  letter-spacing: .55em;
  opacity: 0;
  padding-left: .55em;
  position: absolute;
  text-transform: uppercase;
  transform: translateY(calc(var(--u) * 8));
  transition: opacity .8s ease, transform .8s cubic-bezier(.22, .75, .18, 1);
  white-space: nowrap;
}
.tsgi.is-ready[data-phase="route"] .tsgi-cap.a,
.tsgi[data-phase="climb"] .tsgi-cap.b { opacity: .95; transform: none; transition-delay: .5s; }
.tsgi-route-rule {
  background: linear-gradient(90deg, transparent, var(--lime), transparent);
  height: 1px;
  margin-top: calc(var(--u) * 44);
  transform: scaleX(0);
  transition: transform 1.6s cubic-bezier(.22, .75, .18, 1) .8s;
  width: calc(var(--u) * 220);
}
.tsgi.is-ready .tsgi-route-rule { transform: scaleX(1); }

/* final reveal */
.tsgi-pulse {
  border: 1px solid rgba(200, 243, 29, .8);
  border-radius: 50%;
  height: calc(var(--u) * 620);
  left: 50%;
  opacity: 0;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%) scale(1);
  width: calc(var(--u) * 620);
}
.tsgi[data-phase="final"] .tsgi-pulse { animation: tsgiPulse 1.8s cubic-bezier(.2, .7, .2, 1) forwards; }
.tsgi-pulse.p2 { animation-delay: .18s !important; }
@keyframes tsgiPulse { 0% { opacity: .85; transform: translate(-50%, -50%) scale(1); } 100% { opacity: 0; transform: translate(-50%, -50%) scale(2.1); } }
.tsgi-flash {
  background: radial-gradient(circle at 50% 50%, rgba(235, 255, 150, .34), rgba(200, 243, 29, .07) 26%, transparent 46%);
  inset: 0;
  opacity: 0;
  position: absolute;
}
.tsgi[data-phase="final"] .tsgi-flash { animation: tsgiFlash 1.4s ease-out forwards; }
@keyframes tsgiFlash { 0% { opacity: 0; } 12% { opacity: 1; } 100% { opacity: 0; } }
.tsgi-final {
  align-items: center;
  display: flex;
  flex-direction: column;
  inset: 0;
  justify-content: center;
  padding-bottom: calc(var(--u) * 28);
  position: absolute;
}
.tsgi-logo {
  filter: blur(calc(var(--u) * 16));
  opacity: 0;
  position: relative;
  transform: scale(.93);
  transition: opacity 1.1s ease, transform 1.5s cubic-bezier(.22, .75, .18, 1), filter 1.2s ease;
  width: calc(var(--u) * 520);
}
.tsgi-logo img { display: block; filter: drop-shadow(0 0 calc(var(--u) * 50) rgba(200, 243, 29, .22)); width: 100%; }
.tsgi-sweep {
  -webkit-mask: url("tsg-logo-white-horizontal.png") center / contain no-repeat;
          mask: url("tsg-logo-white-horizontal.png") center / contain no-repeat;
  background: linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, .95) 50%, transparent 62%) 160% 0 / 260% 100% no-repeat;
  inset: 0;
  position: absolute;
}
.tsgi[data-phase="final"] .tsgi-logo { filter: blur(0); opacity: 1; transform: none; transition-delay: .1s; }
.tsgi[data-phase="final"] .tsgi-sweep { animation: tsgiSweep 1.5s cubic-bezier(.4, 0, .2, 1) .9s forwards; }
@keyframes tsgiSweep { to { background-position: -60% 0; } }
.tsgi-final-rule {
  background: linear-gradient(90deg, transparent, var(--lime), transparent);
  height: 1px;
  margin-top: calc(var(--u) * 26);
  transform: scaleX(0);
  transition: transform 1.3s cubic-bezier(.22, .75, .18, 1) .7s;
  width: calc(var(--u) * 300);
}
.tsgi[data-phase="final"] .tsgi-final-rule { transform: scaleX(1); }
.tsgi-title {
  color: var(--lime);
  font-size: calc(var(--u) * 13);
  font-weight: 700;
  letter-spacing: .9em;
  margin-top: calc(var(--u) * 18);
  opacity: 0;
  padding-left: .9em;
  text-transform: uppercase;
  transition: opacity 1s ease .9s, letter-spacing 1.6s cubic-bezier(.22, .75, .18, 1) .9s;
  white-space: nowrap;
}
.tsgi[data-phase="final"] .tsgi-title { letter-spacing: .55em; opacity: 1; }
.tsgi-tags {
  bottom: calc(var(--u) * 62);
  color: rgba(255, 255, 255, .62);
  font-size: calc(var(--u) * 10.5);
  font-weight: 600;
  left: 0;
  letter-spacing: .32em;
  opacity: 0;
  position: absolute;
  right: 0;
  text-align: center;
  text-transform: uppercase;
  transform: translateY(calc(var(--u) * 8));
  transition: opacity 1s ease 1.5s, transform 1s cubic-bezier(.22, .75, .18, 1) 1.5s;
}
.tsgi-tags b { color: var(--lime); font-weight: 700; }
.tsgi-tags i { color: var(--orange); font-style: normal; font-weight: 700; }
.tsgi[data-phase="final"] .tsgi-tags { opacity: 1; transform: none; }
/* the bottom-left/right readouts settle into "summit" language at the end */
.tsgi[data-phase="final"] .tsgi-elev-label::after { content: " - Summit"; }

@media (prefers-reduced-motion: reduce) {
  .tsgi-topo { animation: none; }
  .tsgi-orbit { transition-duration: .01s; transform: rotate(0deg); }
}