/* Sixty Seconds, About page. Builds on ../css/home.css?v=e4aa017aba (tokens, type, nav, buttons, windows, footer).
   Static frames first: nothing here animates. Home keeps the only big background object; this page uses a quiet glow. */

/* ---------- 01 hero: Orizon "start" stage. The brand wave is the object, quieter than Home's and with its focal point on the horizon:
   the canvas is centred on the bottom edge of the hero, so the rings rise as a dome behind the stack instead of opening from its middle. ---------- */
.phero{position:relative;min-height:max(80svh,640px);display:flex;align-items:center;justify-content:center;text-align:center;overflow:hidden;isolation:isolate;padding:calc(var(--nav) + 40px) 0 120px}
.phero .hero-field{position:absolute;inset:0;z-index:-2;pointer-events:none}
.phero .hero-lift{position:absolute;left:50%;top:50%;width:min(1500px,130vw);height:min(760px,100%);transform:translate(-50%,-50%);border-radius:50%;
  background:radial-gradient(closest-side,rgb(34 52 98/.5),rgb(20 30 62/.22) 55%,rgb(var(--bg)/0))}
/* A1 (27 Oct): the wave is centred on the hero and fills its full height; no clipping band. The canvas box is the hero (wide, never taller), and an elliptical
   mask dissolves its edges softly into the page, top, bottom and sides, so the expanding rings are never cut into a strip. */
.phero .hero-wave{position:absolute;left:50%;top:50%;width:min(2000px,160vw);height:100%;transform:translate(-50%,-50%);
  -webkit-mask-image:radial-gradient(closest-side,#000 52%,rgb(0 0 0/.5) 78%,transparent 100%);mask-image:radial-gradient(closest-side,#000 52%,rgb(0 0 0/.5) 78%,transparent 100%)}
.phero #ssbg{width:100%;height:100%;pointer-events:none}
.phero::after{content:"";position:absolute;inset:auto 0 0 0;height:160px;z-index:-1;background:linear-gradient(rgb(var(--bg)/0),rgb(var(--bg)));pointer-events:none}
.phero .hero-scrim{position:absolute;left:50%;top:48%;width:min(1100px,100%);height:min(640px,100%);transform:translate(-50%,-50%);z-index:-1;pointer-events:none;
  background:radial-gradient(closest-side,rgb(var(--bg)/.88),rgb(var(--bg)/.72) 38%,rgb(var(--bg)/.4) 66%,rgb(var(--bg)/0))}
.phero .hero-stack{display:flex;flex-direction:column;align-items:center}
.phero .eyebrow{margin-bottom:24px}
.phero h1{max-width:980px}
.phero h1 .grad{display:block;width:fit-content;margin-inline:auto}
.phero .sub{margin-top:24px;max-width:644px;font-size:clamp(16px,1.223vw,18px);line-height:1.55;color:rgb(var(--muted))}

/* ---------- 02 the journey: interactive stepper (spec 6.2). Five circles on one rail, one active; the rail draws in, fills to the active step with a travelling spark;
   panels cross-fade and their copy rises in a stack. Only transform / opacity / filter animate. Panel chrome is static; each panel carries its own colour glow. ---------- */
.journey{padding-top:48px}
.jr{--fill:0;--c:var(--a1);--jr-blur:4px;max-width:1248px;margin-inline:auto}
.jr-top{position:relative}
.jr-steps{position:relative;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:0}
.jr-steps li{position:relative;min-width:0;transition:opacity .6s var(--ease) calc(var(--i,0)*80ms),transform .6s var(--ease) calc(var(--i,0)*80ms)}
.jr-steps li:nth-child(2){--i:1}.jr-steps li:nth-child(3){--i:2}.jr-steps li:nth-child(4){--i:3}.jr-steps li:nth-child(5){--i:4}
/* before the section enters view the circles wait dim and low; they light left to right, 80ms apart */
.jr.jr-pre .jr-steps li{opacity:.35;transform:translate3d(0,12px,0)}
/* the rail: dot 1 centre to dot 5 centre. Track draws in (P16), the fill follows --fill, the spark rides its leading edge */
.jr-rail{position:absolute;left:20px;width:80%;top:19px;height:2px;pointer-events:none}
.jr-rail .track{position:absolute;inset:0;border-radius:2px;background:rgb(var(--line-br)/.7);transform-origin:0 50%;transition:transform .9s var(--ease) .1s}
.jr.jr-pre .jr-rail .track{transform:scaleX(0)}
.jr-rail .fw{position:absolute;inset:0;overflow:hidden;border-radius:2px;transform:translate3d(calc((var(--fill) - 1)*100%),0,0);transition:transform .6s var(--ease)}
.jr-rail .fill{display:block;width:100%;height:100%;background:linear-gradient(90deg,rgb(var(--a1)),rgb(var(--a2)) 25%,rgb(var(--a4)) 50%,rgb(var(--a5)) 75%,rgb(var(--a7)));transform:translate3d(calc((1 - var(--fill))*100%),0,0);transition:transform .6s var(--ease)}
.jr-rail .sp{position:absolute;inset:0;transform:translate3d(calc((var(--fill) - 1)*100%),0,0);transition:transform .6s var(--ease)}
.jr-rail .sp::after{content:"";position:absolute;right:-14px;top:-13px;width:28px;height:28px;border-radius:50%;background:radial-gradient(closest-side,rgb(var(--c)/.85),rgb(var(--c)/.3) 45%,transparent);opacity:.9}
.jr.jr-pre .jr-rail .sp{opacity:0}
.jr-steps button{all:unset;box-sizing:border-box;display:flex;flex-direction:column;align-items:flex-start;gap:16px;width:100%;cursor:pointer;padding-bottom:8px;border-radius:12px}
.jr-steps button:focus-visible{outline:2px solid rgb(var(--a4));outline-offset:6px}
.dot{position:relative;z-index:1;display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:rgb(var(--s2));border:1px solid rgb(var(--line-br));
  transition:background-color .4s var(--ease) var(--ld,0ms),border-color .4s var(--ease) var(--ld,0ms),box-shadow .4s var(--ease) var(--ld,0ms),transform .4s var(--ease) var(--ld,0ms),opacity .4s var(--ease) var(--ld,0ms)}
.dot b{font:700 14px/1 Inter,sans-serif;color:rgb(var(--muted));transition:color .4s var(--ease) var(--ld,0ms)}
.dot .ring{position:absolute;inset:-2px;border-radius:50%;border:2px solid rgb(var(--c));opacity:0;pointer-events:none}
.jr-steps li.done .dot{border-color:rgb(var(--c)/.7);box-shadow:inset 0 0 0 40px rgb(var(--c)/.14)}
.jr-steps li.done .dot b{color:rgb(var(--ink))}
.jr-steps li.on .dot{background:rgb(var(--c));border-color:rgb(var(--c));box-shadow:0 0 0 6px rgb(var(--c)/.18),0 0 32px rgb(var(--c)/.5);transform:scale(1.04)}
.jr-steps li.on .dot b{color:#07101c}
/* A2: the dwell progress on the active step. A 3px bar under the chapter that fills over its dwell (--dwell, set by the script); animationend advances the chapter.
   .jr-hold (hover, keyboard focus inside, tab hidden, scrolled off) pauses it in place; resuming continues from where it stopped. transform only. */
.jr-steps .pg{position:absolute;left:0;right:12px;bottom:0;height:3px;border-radius:3px;background:rgb(var(--line-br)/.45);overflow:hidden;opacity:0;transition:opacity .3s var(--ease);pointer-events:none}
.jr-steps .pg::after{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(90deg,rgb(var(--c)/.55),rgb(var(--c)));transform:scaleX(0);transform-origin:0 50%}
.jr.jr-auto .jr-steps li.on .pg{opacity:1}
.jr.jr-auto .jr-steps li.on .pg.r::after{animation:jrPg var(--dwell,8s) linear forwards}
.jr.jr-hold .jr-steps li.on .pg.r::after{animation-play-state:paused}
@keyframes jrPg{to{transform:scaleX(1)}}
.lab{display:flex;flex-direction:column;gap:5px;padding-right:12px;text-align:left}
.lab b{font:600 15px/1.25 Inter,sans-serif;color:rgb(var(--muted));transition:color .2s var(--ease)}
.lab small{font:500 12px/1.3 Inter,sans-serif;letter-spacing:.06em;color:rgb(var(--faint))}
.jr-steps li.on .lab b,.jr-steps li.done .lab b{color:rgb(var(--ink))}
@media (hover:hover) and (pointer:fine){
  .jr-steps button:hover .dot{border-color:rgb(var(--c));transform:translate3d(0,-2px,0)}
  .jr-steps li.on button:hover .dot{transform:translate3d(0,-2px,0) scale(1.04)}
  .jr-steps button:hover .lab b{color:rgb(var(--ink))}
}

/* panels share one card; each panel is a transparent layer in the same grid cell, so the height is the tallest panel and never jumps */
.jr-panels{display:grid;margin-top:32px;position:relative;overflow:hidden;border-radius:var(--r2);border:1px solid rgb(var(--line-br)/.7);background:linear-gradient(180deg,rgb(var(--s2)/.88),rgb(var(--s1)/.9));box-shadow:0 40px 90px -50px rgb(0 0 0/.85)}
.jr-panel{grid-area:1/1;min-width:0;visibility:hidden;opacity:0;transform:translate3d(0,8px,0);position:relative;overflow:hidden;
  display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:48px;align-items:start;padding:48px 56px;
  transition:opacity .25s var(--m-ease-leave),transform .25s var(--m-ease-leave),visibility 0s linear .25s}
.jr-panel:focus-visible{outline:2px solid rgb(var(--a4));outline-offset:-4px;border-radius:var(--r2)}
.jr-panel::before{content:"";position:absolute;inset:0 0 auto 0;height:2px;background:linear-gradient(90deg,rgb(var(--c)),rgb(var(--c)/0) 70%)}
.jr-panel::after{content:"";position:absolute;left:-10%;top:-40%;width:60%;height:120%;pointer-events:none;background:radial-gradient(closest-side,rgb(var(--c)/.16),transparent)}
.jr-panel.on{visibility:visible;opacity:1;transform:none;transition:opacity .5s var(--ease) .12s,transform .5s var(--ease) .12s,visibility 0s}
.jp-side{position:relative;z-index:1;display:flex;flex-direction:column;gap:16px}
.jp-n{font:800 clamp(72px,8vw,120px)/.9 Cabinet,system-ui,sans-serif;letter-spacing:-.05em;color:transparent;-webkit-text-stroke:1.5px rgb(var(--c)/.75)}
.jp-side h3{font-size:clamp(28px,2.7vw,40px);line-height:1.08}
.jp-body{position:relative;z-index:1;display:flex;flex-direction:column;gap:20px;padding-top:6px}
.ch-k{display:flex;align-items:center;gap:12px;font:600 11px/1.3 Inter,system-ui,sans-serif;letter-spacing:.16em;text-transform:uppercase;color:rgb(var(--faint))}
.ch-k b{font:800 15px/1 Cabinet,system-ui,sans-serif;letter-spacing:0;color:rgb(var(--c));border:1px solid rgb(var(--c)/.45);background:rgb(var(--c)/.08);border-radius:8px;padding:7px 9px}
.jp-body p:not(.src){font-size:clamp(16px,1.3vw,19px);line-height:1.62;color:rgb(var(--body))}
.jp-side .ch-k b{display:none}
.ch-q{position:relative;margin:6px 0 0;padding:4px 0 4px 20px;font:800 clamp(22px,2vw,28px)/1.2 Cabinet,system-ui,sans-serif;letter-spacing:-.015em;color:rgb(var(--ink))}
.ch-q::before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:rgb(var(--c));transform-origin:50% 0;transition:transform .9s var(--ease) .55s}
.jr-panel:not(.on) .ch-q::before{transform:scaleY(0);transition:none}
.ch-q cite{display:block;margin-top:10px;font:500 13px/1.4 Inter,system-ui,sans-serif;font-style:normal;letter-spacing:0;color:rgb(var(--muted))}
.shapes{display:flex;flex-wrap:wrap;gap:8px}
.shapes li{display:inline-flex;align-items:center;height:34px;padding:0 14px;border-radius:999px;border:1px solid rgb(var(--line-br)/.8);background:rgb(var(--bg)/.45);font:600 13px/1 Inter,sans-serif;color:rgb(var(--body))}
.shapes li:last-child{border-color:rgb(var(--a7)/.6);color:rgb(var(--ink));background:rgb(var(--a7)/.12)}

/* copy stack (P2 without the heavy blur): numeral, heading, first paragraph, then the quote / chips / source. Off-state resets only after the panel has faded out. */
.jr-panel :is(.jp-n,.ch-k,.jp-side h3,.jp-body>:not(.shapes),.shapes li){opacity:0;transform:translate3d(0,14px,0);filter:blur(var(--jr-blur));
  transition:opacity 0s linear .27s,transform 0s linear .27s,filter 0s linear .27s}
.jr-panel.on :is(.jp-n,.ch-k,.jp-side h3,.jp-body>:not(.shapes),.shapes li){opacity:1;transform:none;filter:none;
  transition:opacity .6s var(--ease) calc(120ms + var(--d,0ms)),transform .7s var(--ease) calc(120ms + var(--d,0ms)),filter .6s var(--ease) calc(120ms + var(--d,0ms))}
.jr-panel .jp-n{--d:0ms}
.jr-panel .ch-k{--d:40ms}
.jr-panel .jp-side h3{--d:80ms}
.jr-panel .jp-body>:first-child{--d:200ms}
.jr-panel .jp-body>:nth-child(2){--d:320ms}
.jr-panel .jp-body>:nth-child(n+3){--d:420ms}
.jr-panel .shapes li:nth-child(1){--d:320ms}.jr-panel .shapes li:nth-child(2){--d:380ms}.jr-panel .shapes li:nth-child(3){--d:440ms}.jr-panel .shapes li:nth-child(4){--d:500ms}

.jr-nav{display:flex;align-items:center;justify-content:center;gap:24px;margin-top:28px}
.jr-count{display:flex;align-items:baseline;justify-content:center;gap:.4em;font:600 14px/1 Inter,sans-serif;letter-spacing:.14em;color:rgb(var(--muted));min-width:64px;text-align:center}
.jr-count b{color:rgb(var(--ink));font-weight:700;display:inline-block}
.jr-nav .btn:disabled{opacity:.35;cursor:default;transform:none}

/* hero: the lift behind the wave breathes very slowly (P15 spirit, opacity + scale only). Paused off screen by the script; off on phones and under reduced motion */
.phero .hero-lift{animation:heroBreathe 9s ease-in-out infinite alternate;animation-play-state:paused}
.phero.live .hero-lift{animation-play-state:running}
@keyframes heroBreathe{from{opacity:.82;scale:1}to{opacity:1;scale:1.05}}

/* ---------- 04 how we work ---------- */
.val-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
.val-grid li{position:relative;min-width:0;padding:30px 26px 28px;border-radius:var(--r1);border:1px solid rgb(var(--line-br)/.6);background:rgb(var(--s1)/.8);display:grid;grid-template-rows:subgrid;grid-row:span 3;row-gap:12px;overflow:hidden}
.val-grid li::before{content:"";position:absolute;inset:0 0 auto 0;height:2px;background:linear-gradient(90deg,rgb(var(--c)),rgb(var(--c)/0))}
.val-grid .n{font:800 14px/1 Cabinet,sans-serif;color:rgb(var(--c))}
.val-grid h3{font-size:clamp(19px,1.5vw,22px)}
.val-grid p{font-size:15px;line-height:1.55;color:rgb(var(--muted))}

/* ---------- 05 the team: the game's frame (static fallback) ---------- */
.stagewin{max-width:1040px;margin-inline:auto;box-shadow:0 40px 100px -40px rgb(0 0 0/.85),0 0 90px -30px rgb(var(--a4)/.35)}
.stagewin .tag{font-variant-numeric:tabular-nums;color:rgb(var(--ink));border-color:rgb(var(--line-br))}
.roster{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:16px;padding:40px 36px 8px;
  background:radial-gradient(120% 90% at 50% 0%,rgb(var(--s3)/.55),transparent 70%)}
.roster li{min-width:0;display:flex;flex-direction:column;align-items:center;gap:6px;padding:22px 10px 20px;border-radius:var(--r1);border:1px solid rgb(var(--line-br)/.6);background:rgb(var(--bg)/.5);text-align:center}
.roster li:first-child{border-color:rgb(var(--c)/.8);box-shadow:inset 0 0 0 1px rgb(var(--c)/.35),0 0 40px -12px rgb(var(--c)/.6)}
.sprite{display:grid;place-items:center;width:84px;height:104px;margin-bottom:10px;border-radius:10px;font:800 40px/1 Cabinet,sans-serif;color:rgb(var(--ink));
  background:linear-gradient(180deg,rgb(var(--c)/.85),rgb(var(--c)/.35));box-shadow:inset 0 -10px 0 rgb(0 0 0/.25);image-rendering:pixelated}
.roster b{font:800 19px/1.1 Cabinet,sans-serif;color:rgb(var(--ink))}
.roster small{font:600 11px/1.3 Inter,sans-serif;letter-spacing:.08em;text-transform:uppercase;color:rgb(var(--muted))}
.stage-foot{display:flex;flex-direction:column;align-items:center;gap:14px;padding:28px 24px 32px}
.stage-foot .ic{width:16px;height:16px}


/* no stranded words */
.ch-q,.jp-body p,.val-grid p,.phero .sub,.sec-head p,.stage-foot .cap{text-wrap:pretty}
.stage-foot .cap{text-align:center;text-wrap:balance;max-width:34ch}

.nav ul a[aria-current="page"]{color:rgb(var(--ink))}

/* ---------- responsive ---------- */
@media (max-width:1100px){
  .val-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .roster{grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;padding:32px 20px 8px}
  .sprite{width:64px;height:80px;font-size:30px}
  .jr-panel{padding:40px 36px;gap:32px}
}
@media (max-width:760px){
  .phero{min-height:560px;padding:calc(var(--nav) + 32px) 0 96px}
  .phero .hero-wave{width:230vw;height:100%}
  .phero .hero-scrim{width:120%;height:70%;background:radial-gradient(closest-side,rgb(var(--bg)/.94),rgb(var(--bg)/.86) 58%,rgb(var(--bg)/0))}
  .stagewin .fig.in>span{display:none}
  .stagewin .win-bar .tag{display:block}
  /* stepper on a phone: five circles on one rail, the panel carries the title; labels fold away */
  .jr-steps button{align-items:flex-start;gap:0}
  .lab{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .jr-panel{grid-template-columns:minmax(0,1fr);gap:20px;padding:28px 22px 26px}
  .jp-n{font-size:64px}
  .jr-nav{gap:12px}
  .jr-nav .btn{padding:0 14px}
  .val-grid{grid-template-columns:1fr}
  .roster{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:420px){
  .roster{grid-template-columns:repeat(2,minmax(0,1fr))}
  .roster li:last-child{grid-column:1/-1;justify-self:center;width:calc(50% - 5px)}
}
@media (max-width:760px){
  .phero .hero-lift{animation:none}
  .jr-nav .btn{min-height:48px}
  .jr-panels{margin-top:24px}
}
@media (prefers-reduced-motion:reduce){
  .jr,.jr *,.jr *::before,.jr *::after{transition-duration:.01ms!important;transition-delay:0s!important;animation:none!important}
  .jr{--jr-blur:0px}
  .phero .hero-lift{animation:none}
}

/* ================= TEAM SECTION =================
   Live character select + game, framed from about/team/team.html?embed=1.
   The frame reports its own height; these heights only hold the space until it does. */
.team-frame{max-width:1248px;margin-inline:auto}
.team-frame iframe{display:block;width:100%;height:836px;border:0;background:transparent;color-scheme:normal}
/* the site root is dark; the framed page declares no color-scheme, and a mismatch makes the browser paint an opaque white backdrop */
@media (max-width:768px){.team-frame iframe{height:844px}}   /* SSWEB-5352: the team list only, no game on phones */
.team-frame iframe.is-fs{position:fixed;inset:0;width:100vw;height:100vh!important;height:100dvh!important;z-index:2147483000;background:#060A14}
html.team-fs,html.team-fs body{overflow:hidden}