/*
  Extracted verbatim from the original static index.html.
  Loaded after tailwind.css so these rules win over Tailwind's preflight.
*/
:root{
  --duration: 24s;
  --dx: 50.91px;
  --dy: -50.91px;
  --bg-top:#fbfbfc;
  --bg-bottom:#efeff2;
}

*{box-sizing:border-box}

html,body{
  width:100%;
  height:100%;
  margin:0;
  background:#f2f2f4;
  /* Was `overflow:hidden`. The index page still never overflows (.content is
     exactly 100dvh), but /events needs to scroll, so only the X axis is locked. */
  overflow-x:hidden;
  overflow-y:auto;
}

body{
  font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}

.scene{
  position:fixed;
  inset:0;
  overflow:hidden;
  isolation:isolate;
  background:
    radial-gradient(55% 30% at 18% 5%, rgba(255,255,255,.98), transparent 76%),
    radial-gradient(48% 34% at 85% 78%, rgba(255,255,255,.60), transparent 76%),
    linear-gradient(180deg, var(--bg-top) 0%, var(--bg-bottom) 100%);
}

.scene svg{
  position:absolute;
  inset:-5%;
  width:110%;
  height:110%;
  display:block;
  overflow:visible;
  shape-rendering:geometricPrecision;
  text-rendering:geometricPrecision;
}

.free-lane,
.free-pill{
  transform-box:fill-box;
  transform-origin:center;
  will-change:transform;
  animation-timing-function:linear;
  animation-iteration-count:infinite;
  animation-direction:alternate;
}

/*
  Every major lane has its OWN phase, travel distance and turnaround time.
  The travel is still only on the same 45° axis.
  Speed is kept approximately equal; different path lengths create
  different return times instead of synchronized movement.
*/
.free-lane{
  animation-name:freeLane45;
  animation-duration:var(--time);
  animation-delay:var(--delay,0s);
}

@keyframes freeLane45{
  from{
    transform:translate3d(
      var(--from-x),
      var(--from-y),
      0
    );
  }
  to{
    transform:translate3d(
      var(--to-x),
      var(--to-y),
      0
    );
  }
}

/*
  Small red pills are independent from each other.
  Each pill moves only along the local long axis of its white plate.
  Each one reaches the edge of its own safe zone, then reverses.
  The three zones do not overlap, so the layout stays organized.
*/
.free-pill{
  animation-name:freePill;
  animation-duration:var(--pill-time);
  animation-delay:var(--pill-delay,0s);
}

@keyframes freePill{
  from{transform:translate3d(var(--pill-from),0,0)}
  to{transform:translate3d(var(--pill-to),0,0)}
}

/*
  Device-tilt parallax.

  JS writes four variables on :root and nothing else:
    --lane-x / --lane-y        tilt offset in SVG user units (viewBox space)
    --tilt-local-x / -local-y  the same vector pre-rotated by +45deg

  Each wrapper multiplies by its own --depth, so the lanes travel at different
  rates and read as separate layers instead of one sliding sheet.

  .pill-tilt sits inside a rotate(-45) group, so it uses the pre-rotated pair —
  otherwise the pills would slide along the plate's diagonal rather than
  following the direction the phone is actually tilted.

  Neither wrapper carries a transform attribute: a CSS transform would override
  it, and .free-lane / .free-pill need their transform left to the animation.
*/
.lane-tilt,
.pill-tilt{
  will-change:transform;
}

.lane-tilt{
  transform:translate3d(
    calc(var(--lane-x, 0px) * var(--depth, 1)),
    calc(var(--lane-y, 0px) * var(--depth, 1)),
    0
  );
}

.pill-tilt{
  transform:translate3d(
    calc(var(--tilt-local-x, 0px) * var(--depth, 1)),
    calc(var(--tilt-local-y, 0px) * var(--depth, 1)),
    0
  );
}

.tilt-stage{
  position:absolute;
  inset:0;
  will-change:transform;
  transform:translate3d(var(--tilt-x, 0px), var(--tilt-y, 0px), 0);
}

.motion-toggle{
  position:fixed;
  right:14px;
  top:14px;
  z-index:20;
  border:0;
  border-radius:999px;
  padding:10px 14px;
  font:600 13px/1 Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  color:#fff;
  background:linear-gradient(180deg,#f84a54 0%, #d71722 100%);
  box-shadow:
    0 10px 20px rgba(128,0,10,.18),
    inset 0 1px 0 rgba(255,255,255,.22);
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}

/* scene.js adds .is-hidden to the button AND to the hint, so both need it. */
.motion-toggle,
.motion-hint{
  transition:opacity .35s ease;
}

.motion-toggle.is-hidden,
.motion-hint.is-hidden{
  opacity:0;
  pointer-events:none;
}

.motion-hint{
  position:fixed;
  left:14px;
  bottom:14px;
  z-index:20;
  padding:8px 12px;
  border-radius:999px;
  background:rgba(255,255,255,.7);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  color:#4e535c;
  font:500 12px/1.2 Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  box-shadow:0 8px 18px rgba(0,0,0,.06);
}

@media (hover:none) and (pointer:coarse){
  .motion-hint{
    display:none;
  }
}

.sheen{
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(145deg, rgba(255,255,255,.22), transparent 28%),
    radial-gradient(circle at 78% 18%, rgba(255,255,255,.16), transparent 25%);
  mix-blend-mode:screen;
  z-index:3;
}

.content{
  position:relative;
  z-index:10;
  min-height:100dvh;
}

@media (prefers-reduced-motion:reduce){
  .free-lane,
  .free-pill{
    animation:none !important;
  }
  .tilt-stage,
  .lane-tilt,
  .pill-tilt{
    transform:none !important;
  }
}