/* TELS Summit 2027 hallway display. Designed for 16:9 (1920x1080 through 4K). */

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: block;
  src: url('assets/fonts/inter-latin-opsz-normal.woff2') format('woff2');
}

:root {
  /* DSX color tokens */
  --blue-950: #000b19;
  --blue-900: #001530;
  --blue-800: #002454;
  --blue-700: #003478; /* DS Blue 700, primary */
  --blue-600: #004c9a;
  --blue-500: #0065bd;
  --blue-400: #0076dd; /* Bright Blue 400, accent */
  --blue-300: #0e8fff;
  --blue-200: #5db4ff;
  --blue-100: #bfe1ff;
  --blue-75:  #d7ecff;
  --gray-50:  #f7f8f9;
  --red-600:  #ad0b2a; /* TELS Brick Red */

  /* One layout unit = 1% of the largest 16:9 box that fits the screen. */
  --u: min(1vh, 0.5625vw);

  /* Brand pillar angle: 23 degrees off vertical. Never change.
     The axis vector (sin 23, cos 23) is used to move pillars along their own length. */
  --pillar-angle: -23deg;
  --ax: 0.3907;
  --ay: 0.9205;

  --ease-out: cubic-bezier(.2, .8, .2, 1);
}

*, *::before, *::after { box-sizing: border-box; cursor: none; }

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: var(--blue-700);
  color: var(--gray-50);
  font-family: 'Inter', system-ui, sans-serif;
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  user-select: none;
}

::-webkit-scrollbar { display: none; }

.stage {
  position: fixed;
  inset: 0;
  overflow: hidden;
  background: linear-gradient(113deg, var(--blue-700) 0%, var(--blue-700) 42%, var(--blue-800) 100%);
  background-size: 180% 100%;
  animation: tide 90s ease-in-out infinite alternate;
}

/* ---------- Pillars ---------- */

.field { position: absolute; inset: 0; }

.pillar {
  position: absolute;
  bottom: calc(var(--u) * -20);   /* clipped by the bottom edge; rounded ends stay out of frame */
  --amp: calc(var(--u) * 1.6);
  animation:
    rise 2.2s var(--ease-out) var(--delay, 0s) both,
    float var(--float, 24s) ease-in-out var(--delay, 0s) infinite alternate;
}

.pillar__body {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: var(--radius);
  transform: skewX(var(--pillar-angle));
  transform-origin: 50% 100%;
}

.pillar--deep {
  left: calc(50vw - var(--u) * 2);
  width: calc(var(--u) * 26);
  height: calc(var(--u) * 96);      /* top lands on the numeral's cap line */
  --radius: calc(var(--u) * 13);
  --delay: .15s;
  --float: 27s;
}
.pillar--deep .pillar__body { background: linear-gradient(180deg, #0157ad 0%, var(--blue-600) 60%); }

.pillar--bright {
  left: calc(50vw + var(--u) * 26);
  width: calc(var(--u) * 30);
  height: calc(var(--u) * 170);     /* runs cleanly past the top edge */
  --radius: calc(var(--u) * 15);
  --delay: 0s;
  --float: 33s;
  --amp: calc(var(--u) * 2.4);
}
.pillar--bright .pillar__body { background: linear-gradient(180deg, var(--blue-400) 0%, var(--blue-500) 100%); }

/* Outline pillars behind the solid ones give the field depth. */
.pillar--ghost-a {
  left: calc(50vw + var(--u) * 11);
  width: calc(var(--u) * 24);
  height: calc(var(--u) * 150);
  --radius: calc(var(--u) * 12);
  --delay: .45s;
  --float: 41s;
  --amp: calc(var(--u) * 3.2);
}
.pillar--ghost-b {
  left: calc(50vw + var(--u) * 60);
  width: calc(var(--u) * 16);
  height: calc(var(--u) * 118);
  --radius: calc(var(--u) * 8);
  --delay: .6s;
  --float: 37s;
  --amp: calc(var(--u) * 2.8);
}
.pillar--ghost-a .pillar__body,
.pillar--ghost-b .pillar__body {
  border: max(3px, calc(var(--u) * 0.4)) solid rgba(93, 180, 255, .30);
}

/* The one TELS Brick Red moment: a third pillar in the rhythm, shown only while the event is live. */
.pillar--tels {
  display: none;
  left: calc(50vw + var(--u) * 59);
  width: calc(var(--u) * 16);
  height: calc(var(--u) * 170);
  --radius: calc(var(--u) * 8);
  --delay: .5s;
  --float: 29s;
}
.pillar--tels .pillar__body { background: linear-gradient(180deg, #c60c30 0%, var(--red-600) 70%); }
[data-phase="live"] .pillar--tels { display: block; }
[data-phase="live"] .pillar--ghost-b { display: none; }

/* A soft band of light that travels up the pillars now and then. */
.sheen {
  position: absolute;
  left: -30%;
  right: -30%;
  top: 0;
  height: 42%;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .14) 50%, rgba(255, 255, 255, 0) 100%);
  transform: translateY(260%);
  animation: sheen 19s ease-in-out infinite;
}
.pillar--bright .sheen { animation-delay: 3s; }
.pillar--deep .sheen   { animation-delay: 4.4s; height: 60%; }

/* ---------- Curve ---------- */

.curve {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  animation: fade-in 2s ease-out 1.2s both;
}
.curve__line,
.curve__spark { fill: none; stroke-linecap: round; }
.curve__line  { stroke: rgba(191, 225, 255, .30); stroke-width: 2.2; }
.curve__spark {
  stroke: var(--blue-75);
  stroke-width: 3.4;
  stroke-dasharray: 9 300;
  stroke-dashoffset: 9;
  animation: spark 13s cubic-bezier(.45, 0, .25, 1) 2.5s infinite;
}

/* ---------- Content ---------- */

.content {
  position: absolute;
  inset: 0;
  padding: calc(var(--u) * 8) 0 calc(var(--u) * 9) calc(50vw - var(--u) * 78);
  display: flex;
  flex-direction: column;
  animation: shift 1500s ease-in-out infinite alternate;
}

.logo {
  display: block;
  height: calc(var(--u) * 5.2);
  width: auto;
  flex: none;
  align-self: flex-start;
  animation: enter 1.2s var(--ease-out) .2s both;
}

.state {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;     /* every state sits on the same baseline above the dates */
  margin: 0 0 calc(var(--u) * 6);
  animation: enter 1.4s var(--ease-out) .35s both;
}
.state[hidden] { display: none; }

.hero { margin: 0; line-height: 1; }

.hero__num {
  display: block;
  font-size: calc(var(--u) * 48);
  font-weight: 640;
  line-height: 0.73;             /* line box hugs the cap height */
  letter-spacing: -0.03em;
  white-space: nowrap;
  /* margin-left is set in JS so the first digit's ink aligns with the logo edge */
}

/* Rolling digits: each character lives in a clipped slot. */
.slot {
  display: inline-block;
  position: relative;
  clip-path: inset(-0.01em -0.4em -0.04em -0.4em);
}
.glyph { display: inline-block; }
.glyph--leaving { position: absolute; left: 0; top: 0; }

.label {
  margin: calc(var(--u) * 4.2) 0 0;
  font-size: calc(var(--u) * 7.2);
  font-weight: 450;
  line-height: 1.1;
  letter-spacing: -0.022em;
  color: var(--blue-100);
}
.label strong { font-weight: 640; color: var(--gray-50); }

.clock {
  margin: calc(var(--u) * 4.6) 0 0;
  display: flex;
  align-items: baseline;
  white-space: nowrap;
}
.clock [hidden] { display: none; }

.clock__num {
  font-size: calc(var(--u) * 9.4);
  font-weight: 600;
  line-height: 0.78;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.clock__name {
  margin-left: calc(var(--u) * 1.3);
  font-size: calc(var(--u) * 3.5);
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--blue-100);
}
.clock__sep {
  display: inline-block;
  align-self: center;
  width: calc(var(--u) * 1);
  height: calc(var(--u) * 6.4);
  margin: 0 calc(var(--u) * 3.6);
  border-radius: calc(var(--u) * .5);
  background: var(--blue-400);
  transform: skewX(var(--pillar-angle));
}

.headline {
  margin: 0;
  font-size: calc(var(--u) * 10.5);
  font-weight: 640;
  line-height: 1.04;
  letter-spacing: -0.03em;
  /* margin-left is set in JS for optical alignment, as with the number */
}

.dates {
  margin: 0;
  flex: none;
  font-size: calc(var(--u) * 4.4);
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--blue-100);
  animation: enter 1.2s var(--ease-out) .5s both;
}

/* ---------- Motion ---------- */

@keyframes tide {
  from { background-position: 0% 50%; }
  to   { background-position: 100% 50%; }
}

/* Pillars rise into place along their own 23-degree axis... */
@keyframes rise {
  from { transform: translate(calc(var(--u) * -40 * var(--ax)), calc(var(--u) * 40 * var(--ay))); opacity: 0; }
  to   { transform: none; opacity: 1; }
}

/* ...then keep floating gently along it, each at its own pace. */
@keyframes float {
  from { translate: calc(var(--amp) * var(--ax)) calc(var(--amp) * var(--ay) * -1); }
  to   { translate: calc(var(--amp) * var(--ax) * -1) calc(var(--amp) * var(--ay)); }
}

@keyframes sheen {
  0%   { transform: translateY(260%); }
  42%  { transform: translateY(-140%); }
  100% { transform: translateY(-140%); }
}

@keyframes spark {
  0%   { stroke-dashoffset: 9; opacity: 0; }
  6%   { opacity: 1; }
  52%  { opacity: 1; }
  60%  { stroke-dashoffset: -102; opacity: 0; }
  100% { stroke-dashoffset: -102; opacity: 0; }
}

@keyframes enter {
  from { transform: translateY(calc(var(--u) * 3)); opacity: 0; }
  to   { transform: none; opacity: 1; }
}

@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }

/* A few pixels of travel for the type keeps static white edges from burning in. */
@keyframes shift {
  0%   { transform: translate(0, 0); }
  50%  { transform: translate(calc(var(--u) * 0.8), calc(var(--u) * -0.5)); }
  100% { transform: translate(calc(var(--u) * -0.4), calc(var(--u) * 0.6)); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; }
  .sheen, .curve__spark { display: none; }
}