/* ECHIVO — passes.css · "Your city, your perks" · OWNED BY: web agent 6 (section #passes) */

#passes {
  --pw: clamp(240px, 25vw, 372px);         /* pass width */
  --ph: calc(var(--pw) / 1.586);           /* pass height (card ratio) */
  --pr: calc(var(--pw) * 0.062);           /* pass radius */
  overflow: clip;
  isolation: isolate;
  padding-bottom: clamp(80px, 12vh, 150px);
}
@media (max-width: 899px) {
  #passes { --pw: min(86vw, 350px); }
}

/* ---------- ambient background ---------- */
#passes .passes__bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
#passes .passes__glow {
  position: absolute; border-radius: 50%; filter: blur(80px); opacity: .5;
}
#passes .passes__glow--gold {
  width: 46vw; height: 46vw; max-width: 720px; max-height: 720px;
  left: 50%; top: 30%; transform: translate(-80%, -10%);
  background: radial-gradient(circle, rgba(245,200,130,.32), rgba(245,200,130,0) 65%);
}
#passes .passes__glow--sky {
  width: 40vw; height: 40vw; max-width: 640px; max-height: 640px;
  left: 50%; top: 34%; transform: translate(-10%, -5%);
  background: radial-gradient(circle, rgba(79,179,255,.26), rgba(157,123,255,.08) 45%, rgba(79,179,255,0) 68%);
}

/* ---------- header ---------- */
#passes .passes__pin { position: relative; }
#passes .passes__head { margin-bottom: clamp(36px, 6vh, 72px); }
#passes .passes__eyebrow { margin: 0 0 18px; }
#passes .passes__title { margin: 0; }
#passes .passes__br { display: none; }
@media (max-width: 599px) { #passes .passes__br { display: inline; } }
#passes .passes__gold {
  color: var(--gold);
}

/* ---------- stage (no-JS fallback = simple wrapped row) ---------- */
#passes .passes__stage {
  position: relative;
  display: flex; flex-wrap: wrap; justify-content: center; gap: 40px 32px;
  perspective: 1600px;
}
#passes.is-live .passes__stage {
  display: block;
  height: var(--stage-h, calc(var(--ph) + 80px));
}
#passes.is-live .pass {
  position: absolute; left: 50%; top: 50%;
  margin-left: calc(var(--pw) / -2);
  margin-top: calc((var(--ph) + 44px) / -2);
}

/* ---------- pass ---------- */
#passes .pass {
  width: var(--pw);
  margin: 0;
  transform-style: preserve-3d;
}
#passes .pass--student { z-index: 3; }
#passes .pass--explorer { z-index: 1; }
#passes .pass--exclusive { z-index: 2; }

#passes .pass__tilt {
  position: relative;
  transform-style: preserve-3d;
  will-change: transform;
}
#passes .pass__card {
  position: relative;
  width: var(--pw); height: var(--ph);
  border-radius: var(--pr);
  overflow: hidden;
  isolation: isolate;
  box-shadow:
    0 1px 0 rgba(255,255,255,.18) inset,
    0 30px 60px -18px rgba(0,0,0,.7),
    0 12px 24px -12px rgba(0,0,0,.55);
  transform: translateZ(0);
}
#passes .pass__card::after { /* hairline rim */
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 5;
  border: 1px solid var(--rim, rgba(255,255,255,.18));
}

#passes .pass__face {
  position: absolute; inset: 0; z-index: 2;
  display: flex; flex-direction: column; justify-content: space-between;
  padding: calc(var(--pw) * 0.062) calc(var(--pw) * 0.066);
  font-family: var(--font);
  text-transform: uppercase;
  color: #fff;
}
#passes .pass__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
#passes .pass__row--foot { align-items: flex-end; }
#passes .pass__brand {
  display: inline-flex; align-items: center; gap: calc(var(--pw) * 0.026);
  font-weight: 800; letter-spacing: .34em;
  font-size: calc(var(--pw) * 0.036);
}
#passes .pass__brand img { width: calc(var(--pw) * 0.072); height: auto; filter: drop-shadow(0 3px 6px rgba(0,0,0,.35)); }
#passes .pass__badge {
  font-size: calc(var(--pw) * 0.03); font-weight: 750; letter-spacing: .24em;
  padding: .55em 1.05em; border-radius: 999px;
  border: 1px solid rgba(245,200,130,.6); color: var(--gold);
}
#passes .pass__tier {
  display: block;
  font-weight: 850; letter-spacing: .01em; line-height: .95;
  font-size: calc(var(--pw) * 0.1);
}
#passes .pass__field {
  display: flex; flex-direction: column; gap: .3em;
  font-weight: 700; font-size: calc(var(--pw) * 0.04); letter-spacing: .04em;
}
#passes .pass__field small {
  font-size: calc(var(--pw) * 0.024); letter-spacing: .26em; font-weight: 650; opacity: .62;
}
#passes .pass__field--r { text-align: right; }
#passes .pass__mono { font-family: var(--mono); font-weight: 600; letter-spacing: .04em; }

/* Explorer — night blue + gold */
#passes .pass--explorer .pass__card { --rim: rgba(245,200,130,.38); }
#passes .pass--explorer .pass__card {
  background:
    radial-gradient(120% 140% at 0% 0%, #2c4274 0%, #1a2850 38%, #0d1530 72%, #080d1f 100%);
}
#passes .pass--explorer .pass__brand { color: var(--gold); }
#passes .pass__arcs {
  position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none;
  fill: none; stroke: rgba(245,200,130,.09); stroke-width: 1;
}

/* Student — sky/gold holographic */
#passes .pass--student .pass__card { --rim: rgba(255,240,210,.55); }
#passes .pass--student .pass__card {
  background:
    radial-gradient(80% 90% at 85% 10%, rgba(255,255,255,.28), rgba(255,255,255,0) 60%),
    linear-gradient(118deg, #8c7fdc 0%, #6a9ce8 24%, #3d9fdc 46%, #3fb0b4 66%, #b9b06a 86%, #e6b866 100%);
}
#passes .pass--student .pass__face { text-shadow: 0 1px 3px rgba(16, 30, 70, .35); }
#passes .pass__brand--student { color: #fffaf2; letter-spacing: .28em; }
#passes .pass__ico {
  width: calc(var(--pw) * 0.066); height: auto;
  fill: none; stroke: #ff9b6a; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round;
  filter: drop-shadow(0 1px 1px rgba(24,44,92,.25));
}
#passes .pass__pin-logo { width: calc(var(--pw) * 0.08); height: auto; filter: drop-shadow(0 3px 6px rgba(20,40,80,.35)); }
#passes .pass__main--student { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
#passes .pass__uni {
  display: block; font-weight: 900; line-height: .9;
  font-size: calc(var(--pw) * 0.13); color: #fff3f6;
}
#passes .pass__uni-name {
  display: block; margin-top: .55em;
  font-size: calc(var(--pw) * 0.03); font-weight: 700; letter-spacing: .14em; color: rgba(255,255,255,.88);
}
#passes .pass__qr {
  width: calc(var(--pw) * 0.2); height: auto; flex: none;
  fill: #10213f; shape-rendering: crispEdges;
  border-radius: 8px;
  box-shadow: 0 6px 18px rgba(20,40,90,.28);
}
#passes .pass__qr-bg { fill: rgba(255,255,255,.92); }

/* Exclusive — black + gold */
#passes .pass--exclusive .pass__card { --rim: rgba(245,200,130,.5); }
#passes .pass--exclusive .pass__card {
  background:
    radial-gradient(90% 120% at 18% 0%, #33271a 0%, #16110a 40%, #090705 75%, #040302 100%);
}
#passes .pass--exclusive .pass__face { color: #f6e3bf; }
#passes .pass__brand--gold { color: var(--gold); }
#passes .pass__crown {
  display: grid; place-items: center;
  width: calc(var(--pw) * 0.12); aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle at 50% 35%, #2a2012, #0b0906);
  border: 1px solid rgba(245,200,130,.7);
  box-shadow: 0 0 0 4px rgba(245,200,130,.08), 0 0 24px rgba(245,200,130,.25);
}
#passes .pass__crown svg {
  width: 56%; height: auto;
  fill: var(--gold); stroke: var(--gold); stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round;
}
#passes .pass__tier--gold {
  background: linear-gradient(100deg, #fbe2b0 0%, #f5c882 35%, #b98a46 60%, #f8dca6 85%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
#passes .pass--exclusive .pass__field { color: #f1d9ad; }

/* ---------- holographic foil ---------- */
#passes .pass__holo {
  position: absolute; inset: -35%; z-index: 1; pointer-events: none;
  mix-blend-mode: color-dodge;
  opacity: var(--holo-o, .2);
  will-change: transform;
}
#passes .pass__holo::before {
  content: ""; position: absolute; inset: -25%;
  background: linear-gradient(115deg,
    #ff7a8a 0%, #f5c882 9%, #c9f27a 17%, #5ee6b5 25%, #4fb3ff 33%, #9d7bff 41%, #ff7ad9 50%,
    #ff7a8a 50%, #f5c882 59%, #c9f27a 67%, #5ee6b5 75%, #4fb3ff 83%, #9d7bff 91%, #ff7ad9 100%);
  animation: passes-drift 7s ease-in-out infinite alternate;
}
#passes .pass__holo::after { /* fine diffraction lines */
  content: ""; position: absolute; inset: 0;
  background: repeating-linear-gradient(115deg,
    rgba(255,255,255,0) 0px, rgba(255,255,255,0) 7px,
    rgba(255,255,255,.55) 9px, rgba(255,255,255,0) 11px);
  mix-blend-mode: overlay;
  opacity: .5;
}
#passes .pass--student  { --holo-o: .5; }
#passes .pass--student .pass__holo { mix-blend-mode: overlay; opacity: .9; }
#passes .pass--student .pass__holo::after { opacity: .5; }
#passes .pass--explorer { --holo-o: .14; }
#passes .pass--exclusive { --holo-o: .22; }
#passes .pass--exclusive .pass__holo::before {
  background: linear-gradient(115deg,
    #2a1d0c 0%, #f5c882 12%, #3a2a12 24%, #ffe6b5 36%, #2a1d0c 50%,
    #f5c882 62%, #3a2a12 74%, #ffe6b5 86%, #2a1d0c 100%);
}

@keyframes passes-drift {
  from { transform: translate3d(-18%, -10%, 0); }
  to   { transform: translate3d(18%, 10%, 0); }
}

/* specular highlight (moved by JS) */
#passes .pass__glare {
  position: absolute; z-index: 3; pointer-events: none;
  width: 200%; height: 200%; left: -50%; top: -50%;
  background: radial-gradient(circle at 50% 50%,
    rgba(255,255,255,.62) 0%, rgba(255,255,255,.22) 12%, rgba(255,255,255,.06) 24%, rgba(255,255,255,0) 38%);
  mix-blend-mode: soft-light;
  will-change: transform;
}
#passes .pass--student .pass__glare { mix-blend-mode: overlay; }

/* sparkles */
#passes .pass__sparkles { position: absolute; inset: 0; z-index: 4; pointer-events: none; mix-blend-mode: screen; }
#passes .pass__spark {
  position: absolute; width: 10px; height: 10px;
  background: #fff;
  clip-path: polygon(50% 0, 58% 42%, 100% 50%, 58% 58%, 50% 100%, 42% 58%, 0 50%, 42% 42%);
  opacity: 0; transform: scale(.2);
  animation: passes-twinkle var(--d, 3.2s) ease-in-out var(--delay, 0s) infinite;
}
#passes .pass--exclusive .pass__spark { background: #ffe3ac; }
@keyframes passes-twinkle {
  0%, 62%, 100% { opacity: 0; transform: scale(.2) rotate(0deg); }
  76% { opacity: .95; transform: scale(1) rotate(45deg); }
  88% { opacity: 0; transform: scale(.3) rotate(90deg); }
}

/* caption under each pass */
#passes .pass__caption {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  margin: 20px 0 0; height: 24px;
  font-size: .8rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
  color: var(--text-2); white-space: nowrap;
}
#passes .pass__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 12px var(--gold); }
#passes .pass--student .pass__dot { background: var(--sky); box-shadow: 0 0 12px var(--sky); }
#passes .pass--student .pass__caption { color: var(--text); }

/* ---------- how it works ---------- */
#passes .passes__how { margin-top: clamp(64px, 10vh, 120px); }
#passes .passes__steps {
  list-style: none; margin: 0 auto; padding: 0;
  max-width: 1080px;
  display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; align-items: stretch; gap: 14px;
}
#passes .passes-step {
  display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center;
  padding: 28px 20px 26px;
  border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.025));
  border: 1px solid var(--hairline);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.1);
}
#passes .passes-step__icon {
  display: grid; place-items: center;
  width: 56px; height: 56px; border-radius: 18px;
  background: radial-gradient(circle at 50% 30%, rgba(245,200,130,.22), rgba(245,200,130,.06));
  border: 1px solid rgba(245,200,130,.28);
}
#passes .passes-step[data-step="2"] .passes-step__icon {
  background: radial-gradient(circle at 50% 30%, rgba(79,179,255,.25), rgba(79,179,255,.06));
  border-color: rgba(79,179,255,.32);
}
#passes .passes-step[data-step="2"] .passes-step__icon svg { stroke: var(--sky); }
#passes .passes-step__icon svg, #passes .passes-step__arrow svg, #passes .passes-perk svg, #passes .passes-uni__check {
  fill: none; stroke: var(--gold); stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round;
}
#passes .passes-step__icon svg { width: 26px; height: 26px; overflow: visible; }
#passes .passes-step__label { font-size: 1.02rem; line-height: 1.1; letter-spacing: .04em; max-width: 16ch; }
#passes .passes-step__demo { margin-top: auto; }

#passes .passes-step__arrow {
  position: relative; display: grid; place-items: center; width: 40px;
}
#passes .passes-step__arrow svg { width: 22px; height: 22px; stroke: var(--text-3); }
#passes .passes-step__arrow i {
  position: absolute; left: 4px; top: 50%; width: 6px; height: 6px; margin-top: -3px; border-radius: 50%;
  background: var(--gold); box-shadow: 0 0 10px var(--gold); opacity: 0;
}

/* step 1 demo: university pill */
#passes .passes-uni {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 10px 7px 7px; border-radius: 999px;
  background: rgba(255,255,255,.06); border: 1px solid var(--hairline);
  font-size: .78rem; font-weight: 600; color: var(--text-2); white-space: nowrap;
}
#passes .passes-uni b {
  display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%;
  background: linear-gradient(135deg, #93bdf2, #f5c882); color: #10213f; font-size: .66rem; font-weight: 900;
}
#passes .passes-uni__check { width: 16px; height: 16px; stroke: var(--mint); stroke-width: 2.4; }

/* step 2 demo: 6-digit code */
#passes .passes-code { display: inline-flex; gap: 6px; }
#passes .passes-code__box {
  position: relative; display: grid; place-items: center;
  width: 30px; height: 38px; border-radius: 9px;
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.14);
  font-family: var(--mono); font-weight: 700; font-size: 1.05rem; color: #fff;
}
#passes .passes-code__box i { font-style: normal; display: block; }
#passes .passes-code__box::after { /* caret */
  content: ""; position: absolute; left: 50%; top: 9px; bottom: 9px; width: 1.5px; margin-left: -.75px;
  background: var(--sky); opacity: 0;
}
#passes .passes-code__box.is-caret::after { animation: passes-caret 1s steps(1) infinite; }
#passes .passes-code__box.is-ok { border-color: rgba(94,230,181,.6); color: var(--mint); }
@keyframes passes-caret { 50% { opacity: 1; } }

/* step 3 demo: active pill */
#passes .passes-active {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px; border-radius: 999px;
  background: rgba(94,230,181,.1); border: 1px solid rgba(94,230,181,.3);
  font-size: .74rem; font-weight: 750; letter-spacing: .16em; text-transform: uppercase; color: var(--mint);
}
#passes .passes-active__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 10px var(--mint); }
#passes .passes-lock__shackle { transform-box: fill-box; transform-origin: 100% 100%; }

/* perks */
#passes .passes__perks {
  list-style: none; margin: clamp(36px, 6vh, 56px) 0 0; padding: 0;
  display: flex; flex-wrap: wrap; justify-content: center; gap: 12px;
}
#passes .passes-perk {
  padding: .8em 1.25em .8em 1em;
  background: rgba(255,255,255,.06); border: 1px solid var(--hairline);
  font-size: .95rem; font-weight: 650; color: var(--text);
  transition: transform .5s var(--ease-spring), border-color .3s, background .3s;
}
#passes .passes-perk:hover { transform: translateY(-3px); border-color: rgba(245,200,130,.45); background: rgba(245,200,130,.08); }
#passes .passes-perk svg { width: 20px; height: 20px; flex: none; }

@media (max-width: 899px) {
  #passes .passes__steps { grid-template-columns: 1fr; max-width: 420px; gap: 10px; }
  #passes .passes-step { flex-direction: row; flex-wrap: wrap; text-align: left; padding: 18px; gap: 14px; }
  #passes .passes-step__label { flex: 1; font-size: .98rem; max-width: none; }
  #passes .passes-step__demo { margin: 0 0 0 70px; }
  #passes .passes-step__arrow { width: auto; height: 22px; }
  #passes .passes-step__arrow svg { transform: rotate(90deg); width: 18px; }
  #passes .passes-step__arrow i { display: none; }
  #passes .passes-perk { font-size: .88rem; }
}

/* ---------- lowPower (phones / touch / low memory; .is-lite / .is-sway set by passes.js) ----------
   The foil, glare and rim are baked into ONE card texture (no separately composited blend layers, no drifting
   color-dodge), and the card sways on the compositor with a CSS keyframe instead of a per-frame JS loop. */
#passes.is-lite .passes__glow { filter: none; opacity: .62; }
#passes.is-lite .passes__glow--gold { background: radial-gradient(circle, rgba(245,200,130,.22), rgba(245,200,130,.08) 42%, rgba(245,200,130,0) 70%); }
#passes.is-lite .passes__glow--sky { background: radial-gradient(circle, rgba(79,179,255,.18), rgba(157,123,255,.06) 45%, rgba(79,179,255,0) 70%); }
#passes.is-lite .pass__holo,
#passes.is-lite .pass__glare { will-change: auto; }
#passes.is-lite .pass__holo::before { animation: none; transform: translate(10%, 5%); } /* 2D: stays in the card's raster */
#passes.is-lite .pass__glare { transform: translate(14%, -16%); }
#passes.is-lite .pass__sparkles { mix-blend-mode: normal; }
#passes.is-sway .pass__tilt { animation: passes-sway 8.4s ease-in-out infinite; }
#passes.is-sway .pass--student .pass__tilt { animation-delay: -2.8s; }
#passes.is-sway .pass--exclusive .pass__tilt { animation-delay: -5.6s; }
@keyframes passes-sway {
  0%, 100% { transform: rotateX(5deg) rotateY(0deg); }
  25% { transform: rotateX(0deg) rotateY(9deg); }
  50% { transform: rotateX(-5deg) rotateY(0deg); }
  75% { transform: rotateX(0deg) rotateY(-9deg); }
}

@media (prefers-reduced-motion: reduce) {
  #passes .pass__holo::before, #passes .pass__spark, #passes .passes-code__box.is-caret::after,
  #passes.is-sway .pass__tilt { animation: none; }
}