/* Home, version 2. The hero is the intro film's last frame (the title card) in the page itself: one 16:9 box fitted to the viewport exactly as the film is
   fitted, so at every size the card sits where the film's last frame sits. Below it: four number tiles, six discipline links, six page cards, the team.
   Patterns this page adds beyond base: the hero box and its art, the power-on gate (ported to literal values), the discipline beads, the page cards. */

main { display: block; }

@keyframes run { to { stroke-dashoffset: -100; } }
@keyframes blink { 50% { opacity: 0.25; } }
@keyframes pulse { 0%, 100% { transform: scale(0.94); } 50% { transform: scale(1.08); } }
@keyframes ride { to { offset-distance: 100%; } }
@keyframes shrink30 { 0%, 18% { transform: scaleX(1); } 58%, 100% { transform: scaleX(0.7); } }
@keyframes shrink50 { 0%, 18% { transform: scaleX(1); } 58%, 100% { transform: scaleX(0.5); } }
@keyframes drift { to { transform: translateX(-480px); } }
@keyframes lit { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }
@keyframes cue { 0%, 100% { transform: translate(-50%, 0); } 50% { transform: translate(-50%, 9px); } }
@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes gate-open { to { background-color: transparent; } }

/* the header floats over the hero so the hero starts at the top of the page, where the film's frame starts */
.site-header { position: fixed; top: 0; left: 0; right: 0; }

/* ================= 1. HERO ================= */
.hero { position: relative; height: 100vh; height: 100svh; overflow: hidden; background: #123c63; }
.hero-box { position: absolute; left: 50%; top: 50%; width: min(100%, calc(100svh * 16 / 9)); aspect-ratio: 16 / 9; transform: translate(-50%, -50%); container-type: inline-size; --u: calc(100cqw / 1920); }
/* every layer is the same 1920 by 1080 drawing; what lies outside the box is overscan, so any viewport is filled by the same picture */
.hero-art { position: absolute; left: 0; top: 0; width: 100%; height: 100%; max-width: none; overflow: visible; display: block; }
.hero-box h1 { position: absolute; inset: 0; margin: 0; font-size: 0; line-height: 0; }
.hero-box h1:focus-visible { outline: none; box-shadow: none; }
.art-title { pointer-events: none; } /* the title is never a target; its cream letters sit inside a 24 px ink outline (13.3:1), which the shell contrast test cannot see through the sun behind it */
.art-title text { font-family: var(--font-display); font-weight: 700; font-size: 330px; letter-spacing: -6.6px; fill: #FFF6E0; stroke: #0B1220; stroke-width: 24px; stroke-linejoin: round; paint-order: stroke fill; }
.hero-sub { position: absolute; left: 50%; top: calc(590 * var(--u)); transform: translateX(-50%); margin: 0; width: max-content; max-width: none; padding: 0.36em 0.55em; background: #0B1220; color: #FFF6E0; border-radius: 0.32em; box-shadow: 0.0556em 0.0972em 0 rgba(11, 18, 32, 0.28); font: 600 max(14px, calc(72 * var(--u)))/1.18 var(--font-body); white-space: nowrap; }
.ridges { animation: drift 46s linear infinite; }
/* the cue sits in the middle of the dune band under the 16:9 box when there is one (tall viewports), else at the bottom edge */
.hero-cue { position: absolute; left: 50%; top: min(calc(75svh + min(56.25vw, 100svh) / 4 - 20px), calc(100svh - 58px)); width: 40px; height: 40px; transform: translateX(-50%); filter: drop-shadow(0 3px 0 var(--ink)); animation: cue 2.2s ease-in-out 1.4s infinite; pointer-events: none; }
/* the six beads are the six discipline links; a bead is a link only where its 44 px target fits between its neighbours (the six links below always work) */
.bead-link { cursor: pointer; }
.bead-link:focus-visible { outline: none; box-shadow: none; }
.bead-link:focus-visible .bead-hit { stroke: #FFE36E; stroke-width: 9; }
@media (hover: hover) { .bead-link:hover .bead-hit { stroke: #FFF6E0; stroke-width: 6; } }
@container (max-width: 800px) { .bead-hit { r: 82px; } }
@container (max-width: 519px) { .bead-link { display: none; } }

/* ================= power-on gate (shown only by intro.js; the markup stays hidden without JS). Frame 0 of the film, in literal values. ================= */
/* while the head script has armed the gate, nothing behind it paints until intro.js takes over or the fail-open timer fires; the hero shows once the film plays */
html.intro-pending { overflow: hidden; }
html.intro-pending .skip, html.intro-pending .site-header, html.intro-pending .site-footer, html.intro-pending main > :not(.gate) { visibility: hidden; }
html.intro-pending .gate.gate-playing ~ .hero { visibility: visible; }
.gate { position: fixed; inset: 0; z-index: 100; display: grid; place-content: center; justify-items: center; gap: 24px; padding: 24px; background: #0B1220; color: #F2EFE7; text-align: center; }
.gate[hidden] { display: none; }
.gate-switch { display: flex; flex-direction: column; align-items: center; gap: 24px; min-height: 44px; padding: 24px; background: none; border: 0; color: #F2EFE7; font: 700 clamp(36px, 5vw, 56px)/1 var(--font-display); letter-spacing: -0.02em; cursor: pointer; }
.gate-switch:focus-visible { outline-offset: 2px; }
.gate-track { position: relative; display: block; width: 176px; height: 88px; border: 4px solid #F5A524; border-radius: 44px; }
.gate-track::after { content: ""; position: absolute; left: 8px; top: 8px; width: 64px; height: 64px; border-radius: 50%; background: #F5A524; transition: transform 200ms cubic-bezier(0.2, 1, 0.3, 1); }
@media (hover: hover) { .gate-switch:hover .gate-track::after { transform: translateX(12px); } }
.gate-switch:active .gate-track::after, .gate-on .gate-track::after { transform: translateX(88px); }
.gate-hint { order: 1; max-width: 36ch; margin: 0; color: #AAB5CB; font-size: 16px; line-height: 1.6; text-wrap: balance; }
.gate-skip { order: 2; display: inline-flex; align-items: center; justify-content: center; height: 44px; padding: 0 28px; border-radius: 999px; background: #F5A524; color: #0B1220; font: 700 17px/1 var(--font-body); text-decoration: none; }
.gate video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: transparent; visibility: hidden; }
.gate-playing video { visibility: visible; }
.gate-playing .gate-switch, .gate-playing .gate-hint { display: none; }
.gate-playing .gate-skip { position: absolute; top: 24px; right: 24px; z-index: 1; }
/* hand-over: the film's title card opens at 26.5 s, and from then the letterbox shows the hero itself; the gate leaves by a 260 ms fade */
.gate-playing { animation: gate-open 0.8s linear 26.5s forwards; }
.gate-leaving { opacity: 0; transition: opacity 260ms ease-out; pointer-events: none; }

/* ================= 1b. WHAT IT IS ================= */
.what-is { background: var(--panel); color: var(--cream); overflow: clip; }
.what-is h2 { font-size: clamp(40px, 6vw, 88px); margin-bottom: var(--s7); }
.what-is .say { max-width: 22ch; font: 800 clamp(30px, 4.6vw, 64px)/1.04 var(--font-display); letter-spacing: -0.03em; text-wrap: balance; }
.what-is .say .hl { color: var(--sun); }
.what-is .wire { display: block; width: min(100%, 520px); height: auto; margin-block: var(--s6); overflow: visible; }
.what-is .wire .run { stroke-dasharray: 8 92; animation: run 3.4s linear infinite; }
.what-is .why { display: inline-block; max-width: 34rem; padding: var(--s6) var(--s7); border-radius: var(--r-lg); background: var(--sun); color: var(--ink); box-shadow: 0 8px 0 var(--ink); transform: rotate(-1deg); }
.what-is .why .what { max-width: 28ch; font: 800 clamp(22px, 2.4vw, 32px)/1.12 var(--font-display); letter-spacing: -0.02em; }
.what-is .why .meta { margin-top: var(--s4); font: 600 16px/1.3 var(--font-body); }
@media (min-width: 1000px) {
  .what-is .wrap { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); column-gap: var(--s8); align-items: center; }
  .what-is h2 { grid-column: 1 / -1; justify-self: start; }
  .what-is .say { grid-column: 1; grid-row: 2; }
  .what-is .wire { grid-column: 1; grid-row: 3; }
  .what-is .why { grid-column: 2; grid-row: 2 / 4; justify-self: start; }
}
@media (max-width: 640px) { .what-is .why { padding: var(--s5); } }

/* ================= 2. NUMBERS ================= */
.numbers { background: var(--cream); color: var(--ink); overflow: clip; }
.numbers h2 { font-size: clamp(40px, 6vw, 88px); margin-bottom: var(--s7); }
.numbers .bento { align-items: stretch; }
.t-cap { grid-column: span 7; background: var(--deep); color: var(--cream); }
.t-nuc { grid-column: span 5; background: var(--sun); color: var(--ink); }
.t-out { grid-column: span 5; background: var(--coral); color: var(--ink); }
.t-dc { grid-column: span 7; background: var(--teal-dark); color: var(--cream); }
.tile .art { display: block; width: 100%; height: auto; max-height: 132px; margin-bottom: var(--s5); }
.tile .big .plus { letter-spacing: -0.02em; }
/* 1: power lines with current running along them */
.art-lines .wires { stroke: #FFF3D6; opacity: 0.55; }
.art-lines .run { stroke-dasharray: 5 95; animation: run 3.4s linear infinite; }
.art-lines .run.r2 { animation-delay: -0.9s; }
.art-lines .run.r3 { animation-delay: -1.7s; }
.art-lines .run.r4 { animation-delay: -2.5s; }
.art-lines .glow { animation: blink 2.6s ease-in-out infinite; }
/* 2: an atom, electrons riding their orbits */
.t-nuc .art { width: 132px; margin-bottom: var(--s4); }
.art-atom .el { offset-path: path("M14 80a66 24 0 1 0 132 0a66 24 0 1 0 -132 0"); offset-rotate: 0deg; animation: ride 3.6s linear infinite; }
.art-atom .e2 { animation-duration: 4.6s; animation-delay: -1.2s; }
.art-atom .e3 { animation-duration: 5.4s; animation-delay: -2.4s; }
.art-atom .nucleus { transform-box: fill-box; transform-origin: center; animation: pulse 2.4s ease-in-out infinite; }
/* 3: the outage gets shorter */
.t-out .art { max-height: none; margin-bottom: var(--s6); }
.t-out .big { font-size: clamp(48px, 6vw, 96px); white-space: nowrap; }
.art-bars .short { transform-box: fill-box; transform-origin: left center; }
.art-bars .s30 { transform: scaleX(0.7); animation: shrink30 4.4s ease-in-out infinite; }
.art-bars .s50 { transform: scaleX(0.5); animation: shrink50 4.4s ease-in-out infinite; }
/* 4: two stacks, the second twice the height */
.t-dc { display: flex; flex-direction: column; }
.t-dc .what { margin-top: 0; max-width: 20ch; }
.dc { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s6); align-items: end; margin-top: var(--s5); }
.stack { display: flex; flex-direction: column-reverse; gap: 6px; margin-bottom: var(--s3); }
.stack i { display: block; height: 16px; border-radius: 7px; background: var(--cream); }
.stack i.n { background: var(--sun); animation: lit 2.2s ease-in-out infinite; }
.stack i.n:nth-child(7) { animation-delay: -0.5s; }
.stack i.n:nth-child(8) { animation-delay: -1s; }
.stack i.n:nth-child(9) { animation-delay: -1.5s; }
.stack i.n:nth-child(10) { animation-delay: -0.3s; }
.dc .v { font: 800 clamp(28px, 3vw, 44px)/1 var(--font-display); letter-spacing: -0.02em; max-width: none; }
.dc .yr { margin-top: var(--s2); font: 600 16px/1.3 var(--font-body); }
.t-dc .meta { margin-top: auto; padding-top: var(--s4); }

/* ================= 3. SIX WAYS IN ================= */
.ways-field { background: var(--deep); color: var(--cream); overflow: clip; }
.ways-field h2 { font-size: clamp(40px, 6vw, 88px); margin-bottom: var(--s8); }
.ways { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--s5); }
.ways li { position: relative; }
/* the bus bar: one amber line behind the six beads, running through each cell */
.ways li::before { content: ""; position: absolute; top: 68px; left: calc(var(--s5) / -2); right: calc(var(--s5) / -2); height: 10px; border-radius: 5px; background: #FFB020; box-shadow: 0 0 0 5px var(--ink); }
.ways li:first-child::before { left: 50%; }
.ways li:last-child::before { right: 50%; }
.way { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: var(--s4); min-height: 44px; padding: var(--s2) var(--s1) var(--s3); color: var(--cream); font: 700 clamp(18px, 1.6vw, 22px)/1.15 var(--font-display); letter-spacing: -0.01em; text-align: center; text-decoration: none; transition: transform 200ms var(--spring); }
.way .dot { display: grid; place-items: center; width: 112px; height: 112px; border-radius: 50%; background: var(--disc); color: var(--disc-ink); box-shadow: 0 0 0 7px var(--ink); transition: transform 200ms var(--spring); }
.way svg { width: 52px; height: 52px; }
@media (hover: hover) { .way:hover .dot { transform: scale(1.1) rotate(-4deg); } }
.way:focus-visible { border-radius: var(--r); } /* the ring follows a rounded shape, not the global 6 px corner */
.way:active .dot { transform: scale(0.96); }
.w-power { --disc: var(--disc-power); --disc-ink: var(--disc-power-ink); }
.w-renew { --disc: var(--disc-renewable); --disc-ink: var(--disc-renewable-ink); }
.w-elec { --disc: var(--disc-electronics); --disc-ink: var(--disc-electronics-ink); }
.w-ctrl { --disc: var(--disc-control); --disc-ink: var(--disc-control-ink); }
.w-comm { --disc: var(--disc-comms); --disc-ink: var(--disc-comms-ink); }
.w-comp { --disc: var(--disc-computing); --disc-ink: var(--disc-computing-ink); }
.ways li:nth-child(even) .dot { animation: bob 3.4s ease-in-out infinite; }
.ways li:nth-child(3n) .dot { animation: bob 4.2s ease-in-out -1.1s infinite; }

/* ================= 4. THE REST OF THE SITE ================= */
.pages { background: var(--sand); color: var(--ink); overflow: clip; }
.pages h2 { font-size: clamp(40px, 6vw, 88px); margin-bottom: var(--s7); }
.pgrid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--s6) var(--s5); }
.pcard { position: relative; overflow: hidden; display: flex; flex-direction: column; gap: var(--s2); min-height: 260px; padding: var(--s6); border-radius: var(--r-lg); box-shadow: 0 8px 0 var(--ink); color: var(--ink); text-decoration: none; transition: transform 200ms var(--spring), box-shadow 200ms var(--spring); }
@media (hover: hover) { .pcard:hover { transform: translateY(-5px); box-shadow: 0 13px 0 var(--ink); } }
.pcard:focus-visible { transform: translateY(-5px); box-shadow: 0 13px 0 var(--ink); }
.pcard:active { transform: translateY(5px); box-shadow: 0 3px 0 var(--ink); }
.pcard .art { display: block; width: min(100%, 230px); height: auto; max-height: 120px; margin-bottom: auto; padding-bottom: var(--s4); }
.pcard h3 { font-size: clamp(34px, 3.6vw, 52px); }
.pcard .what { max-width: 26ch; font: 600 clamp(18px, 1.6vw, 22px)/1.25 var(--font-body); }
.p-exp { grid-column: span 7; background: var(--panel); color: var(--cream); }
.p-sol { grid-column: span 5; background: var(--sun); }
.p-ai { grid-column: span 5; background: var(--coral); }
.p-uae { grid-column: span 4; background: var(--teal-3); }
.p-car { grid-column: span 3; background: var(--cream); } /* 5, 4 and 3 of 12: three cards of different widths, not three equal boxes (900 px and below set their own spans) */
.p-src { grid-column: span 12; min-height: 0; flex-direction: row; align-items: center; gap: var(--s6); background: var(--ink); color: var(--cream); box-shadow: 0 8px 0 var(--teal-dark); }
@media (hover: hover) { .p-src:hover { box-shadow: 0 13px 0 var(--teal-dark); } }
.p-src:focus-visible { box-shadow: 0 13px 0 var(--teal-dark); }
.p-src .art { width: 110px; max-height: none; margin: 0; padding: 0; flex: none; }
.p-src h3 { margin: 0; }
.p-src .what { margin-left: auto; max-width: 28ch; }
.p-sol .art .rays { transform-box: fill-box; transform-origin: center; animation: spin 18s linear infinite; }
.p-ai .art .spark { transform-box: fill-box; transform-origin: center; animation: pulse 1.8s ease-in-out infinite; }
.p-exp .art circle { animation: bob 3.2s ease-in-out infinite; }
.p-exp .art circle:nth-child(2n) { animation-delay: -1.1s; }
.p-exp .art circle:nth-child(3n) { animation-delay: -2.2s; }

/* ================= 5. TEAM ================= */
.team { background: var(--teal-dark); color: var(--cream); overflow: clip; }
.team h2 { font-size: clamp(40px, 6vw, 88px); margin-bottom: var(--s7); }
.team-list { display: flex; flex-wrap: wrap; gap: var(--s6) var(--s5); }
.team-list li { padding: 0.32em 0.8em 0.42em; border-radius: 999px; background: var(--disc); color: var(--disc-ink); font: 800 clamp(22px, 2.6vw, 34px)/1 var(--font-display); letter-spacing: -0.01em; box-shadow: 0 6px 0 var(--ink); transform: rotate(var(--r)); }
.team-list .nm, .team-list .sid { display: block; }
.team-list .sid { margin-top: 0.3em; font: 700 clamp(14px, 1.5vw, 18px)/1 var(--font-body); letter-spacing: 0.04em; }
.team-list .t1 { --disc: var(--disc-power); --disc-ink: var(--disc-power-ink); --r: -2deg; }
.team-list .t2 { --disc: var(--disc-renewable); --disc-ink: var(--disc-renewable-ink); --r: 1.5deg; }
.team-list .t3 { --disc: var(--disc-electronics); --disc-ink: var(--disc-electronics-ink); --r: -1deg; }
.team-list .t4 { --disc: var(--disc-control); --disc-ink: var(--disc-control-ink); --r: 2deg; }
.team-list .t5 { --disc: var(--disc-comms); --disc-ink: var(--disc-comms-ink); --r: -1.5deg; }
.team-list .t6 { --disc: var(--disc-computing); --disc-ink: var(--disc-computing-ink); --r: 1deg; }

/* ================= smaller screens ================= */
@media (max-width: 1100px) {
  .ways { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: var(--s7); }
  .ways li:nth-child(3n + 1)::before { left: 50%; }
  .ways li:nth-child(3n)::before { right: 50%; }
  .ways li:first-child::before { left: 50%; }
}
@media (max-width: 900px) {
  .t-cap, .t-nuc, .t-out, .t-dc { grid-column: 1 / -1; }
  .p-exp, .p-sol, .p-ai, .p-uae, .p-car, .p-src { grid-column: span 12; }
  .p-ai, .p-uae, .p-car { grid-column: span 12; }
}
@media (min-width: 640px) and (max-width: 900px) {
  .p-ai, .p-uae { grid-column: span 6; }
  .p-car { grid-column: span 12; }
}
@media (max-width: 640px) {
  .ways { grid-template-columns: minmax(0, 1fr); row-gap: var(--s5); }
  .way { flex-direction: row; gap: var(--s5); text-align: left; padding: var(--s2) 0; }
  .way .dot { flex: none; width: 76px; height: 76px; }
  .way svg { width: 38px; height: 38px; }
  .ways li::before { top: 0; bottom: calc(var(--s5) * -1); left: 38px; right: auto; width: 10px; height: auto; }
  .ways li:first-child::before { top: 50%; left: 38px; right: auto; }
  .ways li:last-child::before { bottom: 50%; right: auto; }
  .ways li:nth-child(n)::before { right: auto; }
  .ways li:nth-child(3n + 1)::before, .ways li:nth-child(3n)::before { left: 38px; right: auto; }
  .p-src { flex-direction: column; align-items: flex-start; gap: var(--s4); }
  .p-src .what { margin-left: 0; }
  .pcard { min-height: 0; }
  .dc { gap: var(--s5); }
}