/* ============================================================
   Illustrated animated diagrams
   ============================================================ */

/* ---------- 01  A shift, hour by hour ---------- */
.shift__svg{width:100%;height:auto;overflow:visible;}
.sh-ruler line{stroke:rgba(255,255,255,.2);stroke-width:1;}
.sh-t{font-family:var(--font-mono);font-size:10px;fill:rgba(255,255,255,.78);}
.sh-t--dim{fill:rgba(255,255,255,.42);font-size:9px;}
.sh-t--ai{fill:var(--teal);}
.sh-bar{transition:width 1.1s cubic-bezier(.76,0,.24,1);}
.sh-bar--human{fill:rgba(255,255,255,.13);stroke:rgba(255,255,255,.24);stroke-width:1;}
.sh-bar--ai{fill:rgba(47,201,184,.34);stroke:var(--teal);stroke-width:1.2;}
.sh-lead{stroke:rgba(255,255,255,.26);stroke-width:1;stroke-dasharray:2 3;}
.sh-lead--ai{stroke:rgba(47,201,184,.6);}
.sh-brace{fill:none;stroke:var(--teal);stroke-width:1.4;opacity:0;transition:opacity .6s ease .9s;}
.shift.is-on .sh-brace{opacity:1;}
.sh-bracket text{opacity:0;transition:opacity .6s ease 1.05s;}
.shift.is-on .sh-bracket text{opacity:1;}
.sh-labels{opacity:0;transition:opacity .7s ease .55s;}
.shift.is-on .sh-labels{opacity:1;}

.shift__key{
  display:flex;flex-wrap:wrap;gap:1.25rem 2rem;margin-top:1.5rem;
  font-size:.86rem;color:rgba(255,255,255,.72);
}
.shift__key li{display:flex;align-items:center;gap:.55rem;}
.shift__sw{width:14px;height:14px;border-radius:3px;flex-shrink:0;}
.shift__sw--human{background:rgba(255,255,255,.13);border:1px solid rgba(255,255,255,.24);}
.shift__sw--ai{background:rgba(47,201,184,.34);border:1px solid var(--teal);}

/* ---------- 02  Decision tree ---------- */
.tree{width:100%;height:auto;overflow:visible;}
.tree [data-step]{opacity:0;transform:translateY(6px);transition:opacity .5s ease,transform .5s var(--ease);}
.tree.is-on [data-step]{opacity:1;transform:translateY(0);}
.tree.is-on [data-step="1"]{transition-delay:.12s;}
.tree.is-on [data-step="2"]{transition-delay:.24s;}
.tree.is-on [data-step="3"]{transition-delay:.36s;}
.tree.is-on [data-step="4"]{transition-delay:.48s;}
.tree.is-on [data-step="5"]{transition-delay:.62s;}
.tree.is-on [data-step="6"]{transition-delay:.76s;}
.tr-node rect{fill:rgba(255,255,255,.06);stroke:rgba(255,255,255,.26);stroke-width:1;}
.tr-node text{font-family:var(--font-body);font-size:11.5px;fill:rgba(255,255,255,.88);}
.tr-node--start rect{fill:rgba(255,255,255,.12);stroke:rgba(255,255,255,.4);}
.tr-node--q rect{fill:rgba(255,255,255,.05);}
.tr-node--yes rect{fill:rgba(255,122,69,.16);stroke:var(--amber);stroke-width:1.4;}
.tr-node--yes text{fill:#fff;font-weight:600;}
.tr-node--no rect{fill:rgba(47,201,184,.13);stroke:var(--teal);stroke-width:1.2;}
.tr-line{fill:none;stroke:rgba(255,255,255,.3);stroke-width:1.4;}
.tr-line--yes{stroke:var(--amber);stroke-width:1.6;}
.tr-line--no{stroke:var(--teal);stroke-width:1.6;}
.tr-t{font-family:var(--font-mono);font-size:9.5px;}
.tr-t--yes{fill:var(--amber);}
.tr-t--no{fill:var(--teal);}

/* ---------- 03  Traffic lights ---------- */
.lights{display:grid;gap:1rem;}
.light{
  display:grid;grid-template-columns:auto 1fr;gap:1.25rem;align-items:start;
  border-radius:16px;padding:1.4rem 1.5rem;border:1px solid;
  opacity:0;transform:translateX(-10px);
  transition:opacity .6s ease,transform .6s var(--ease);
}
.lights.is-on .light{opacity:1;transform:translateX(0);}
.lights.is-on .light:nth-child(2){transition-delay:.14s;}
.lights.is-on .light:nth-child(3){transition-delay:.28s;}
.light--go{background:rgba(47,201,184,.07);border-color:rgba(47,201,184,.4);}
.light--think{background:rgba(255,179,71,.09);border-color:rgba(255,179,71,.45);}
.light--stop{background:rgba(255,90,60,.09);border-color:rgba(255,90,60,.5);}
.light__lamp{
  width:34px;height:34px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:.15rem;
}
.light__lamp span{width:14px;height:14px;border-radius:50%;display:block;}
.light--go .light__lamp{background:rgba(47,201,184,.16);}
.light--go .light__lamp span{background:var(--teal);box-shadow:0 0 12px rgba(47,201,184,.9);animation:lampGlow 2.4s ease-in-out infinite;}
.light--think .light__lamp{background:rgba(255,179,71,.18);}
.light--think .light__lamp span{background:#FFB347;box-shadow:0 0 12px rgba(255,179,71,.9);animation:lampGlow 2.4s ease-in-out infinite .3s;}
.light--stop .light__lamp{background:rgba(255,90,60,.18);}
.light--stop .light__lamp span{background:#FF5A3C;box-shadow:0 0 12px rgba(255,90,60,.95);animation:lampGlow 2.4s ease-in-out infinite .6s;}
@keyframes lampGlow{0%,100%{opacity:.55;transform:scale(.9);}50%{opacity:1;transform:scale(1.1);}}
.light__body h4{
  font-family:var(--font-display);font-size:1.02rem;font-weight:700;
  letter-spacing:-.01em;margin-bottom:.7rem;color:var(--ink);
}
.light__body ul{display:flex;flex-direction:column;gap:.5rem;}
.light__body li{font-size:.92rem;color:var(--slate);padding-left:1.05rem;position:relative;}
.light__body li::before{content:'';position:absolute;left:0;top:.58em;width:4px;height:4px;border-radius:50%;background:currentColor;opacity:.5;}
.light--stop .light__body h4{color:#a8331d;}
@media (prefers-reduced-motion: reduce){
  .light__lamp span{animation:none;}
}

/* ---------- 04  Home cutaway ---------- */
.home{width:100%;height:auto;overflow:visible;}
.ho-shell{fill:rgba(255,255,255,.03);stroke:rgba(255,255,255,.28);stroke-width:1.6;stroke-linejoin:round;}
.ho-roof{fill:none;stroke:rgba(255,255,255,.4);stroke-width:2;stroke-linejoin:round;}
.ho-floor{stroke:rgba(255,255,255,.22);stroke-width:1.2;}
.ho-room rect{
  fill:rgba(255,255,255,.05);stroke:rgba(255,255,255,.22);stroke-width:1;
  transition:fill .3s,stroke .3s;
}
.ho-room{cursor:pointer;opacity:0;transition:opacity .55s ease;}
.home.is-on .ho-room{opacity:1;}
.home.is-on .ho-room:nth-of-type(2){transition-delay:.08s;}
.home.is-on .ho-room:nth-of-type(3){transition-delay:.16s;}
.home.is-on .ho-room:nth-of-type(4){transition-delay:.24s;}
.home.is-on .ho-room:nth-of-type(5){transition-delay:.32s;}
.home.is-on .ho-room:nth-of-type(6){transition-delay:.40s;}
.home.is-on .ho-room:nth-of-type(7){transition-delay:.48s;}
.ho-room:hover rect,.ho-room:focus rect{fill:rgba(47,201,184,.18);stroke:var(--teal);stroke-width:1.6;}
.ho-room--hot rect{fill:rgba(255,122,69,.1);stroke:rgba(255,122,69,.42);}
.ho-room--hot:hover rect,.ho-room--hot:focus rect{fill:rgba(255,122,69,.22);stroke:var(--amber);}
.ho-room--door rect{fill:rgba(255,255,255,.09);stroke:rgba(255,255,255,.42);}
.ho-knob{fill:var(--amber);}
.ho-t{font-family:var(--font-body);font-size:10.5px;fill:rgba(255,255,255,.8);}
.ho-t--b{font-family:var(--font-display);font-size:11.5px;font-weight:700;fill:#fff;}
.ho-t--dim{font-size:9px;fill:rgba(255,255,255,.5);font-style:italic;}
.ho-room:focus{outline:none;}
.ho-room:focus-visible rect{outline:2px solid var(--teal);outline-offset:2px;}

/* ---------- 05  What leaves with a leaver ---------- */
.leaver{display:grid;grid-template-columns:1fr auto 1fr;gap:clamp(1rem,3vw,2.5rem);align-items:start;}
.leaver__col{
  opacity:0;transform:translateY(14px);
  transition:opacity .7s ease,transform .7s var(--ease);
}
.leaver.is-on .leaver__col{opacity:1;transform:translateY(0);}
.leaver.is-on .leaver__col--loses{transition-delay:.2s;}
.leaver__col h4{
  font-family:var(--font-mono);font-size:.74rem;letter-spacing:.12em;
  color:rgba(255,255,255,.55);margin-bottom:1.1rem;font-weight:500;
}
.leaver__col--loses h4{color:var(--amber);}
.leaver__list{display:flex;flex-direction:column;gap:.6rem;}
.leaver__list li{
  font-size:.94rem;color:rgba(255,255,255,.72);
  padding:.7rem .9rem;border-radius:10px;
  background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.12);
}
.leaver__list--loss li{
  background:rgba(255,122,69,.08);border-color:rgba(255,122,69,.28);
  color:rgba(255,255,255,.86);
}
.leaver__mid{align-self:center;}
.leaver__arrows{width:52px;height:auto;}
.lv-arrow{fill:none;stroke:var(--amber);stroke-width:1.6;stroke-dasharray:5 5;opacity:.7;}
.leaver.is-on .lv-arrow{animation:lvFlow 1.6s linear infinite;}
.lv-head{fill:none;stroke:var(--amber);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;}
@keyframes lvFlow{to{stroke-dashoffset:-20;}}
@media (max-width:820px){
  .leaver{grid-template-columns:1fr;}
  .leaver__mid{display:none;}
}
@media (prefers-reduced-motion: reduce){
  .leaver.is-on .lv-arrow{animation:none;}
}

/* ---------- Rota diagram (homepage) ---------- */
.rota__svg{width:100%;height:auto;overflow:visible;}
.rt-t{font-family:var(--font-mono);font-size:10px;fill:rgba(255,255,255,.75);}
.rt-t--day{font-size:11px;fill:#fff;letter-spacing:.06em;}
.rt-t--off{fill:rgba(255,255,255,.38);}
.rt-t--cap{font-size:8.5px;fill:rgba(47,201,184,.85);}
.rt-t--dim{fill:rgba(255,255,255,.4);font-size:9px;}
.rt-t--total{font-size:11px;fill:rgba(255,255,255,.8);}
.rt-strong{fill:var(--teal);font-weight:500;}
.rt-shift{fill:rgba(255,255,255,.06);stroke:rgba(255,255,255,.18);stroke-width:1;}
.rt-shift--off{fill:rgba(255,255,255,.025);stroke:rgba(255,255,255,.1);stroke-dasharray:3 3;}
.rt-rule{stroke:rgba(255,255,255,.16);stroke-width:1;}
.rt-slot{
  fill:rgba(47,201,184,.45);stroke:var(--teal);stroke-width:1.2;
  opacity:0;transform:scaleX(.2);transform-box:fill-box;transform-origin:left center;
  transition:opacity .4s ease,transform .5s cubic-bezier(.34,1.56,.64,1);
}
.rt-slot--opt{fill:rgba(47,201,184,.2);stroke-dasharray:3 2;}
.rota.is-on .rt-slot{opacity:1;transform:scaleX(1);}
.rota.is-on .rt-slot:nth-child(2){transition-delay:.1s;}
.rota.is-on .rt-slot:nth-child(3){transition-delay:.2s;}
.rota.is-on .rt-slot:nth-child(4){transition-delay:.3s;}
.rota.is-on .rt-slot:nth-child(5){transition-delay:.4s;}
.rota.is-on .rt-slot:nth-child(6){transition-delay:.5s;}
.rota.is-on .rt-slot:nth-child(7){transition-delay:.6s;}
.rt-caps,.rt-total{opacity:0;transition:opacity .6s ease .75s;}
.rota.is-on .rt-caps,.rota.is-on .rt-total{opacity:1;}

/* ---------- Steps with media ---------- */
.step--media{padding:0;overflow:hidden;display:flex;flex-direction:column;}
.step__media{
  aspect-ratio:16/9;border-radius:0;flex-shrink:0;
  border-bottom:1px solid var(--paper-line);
}
.step--media .step__num{
  display:block;padding:clamp(1.4rem,2.6vw,1.9rem) clamp(1.4rem,2.6vw,1.9rem) 0;
  margin-bottom:.6rem;
}
.step--media h3{padding:0 clamp(1.4rem,2.6vw,1.9rem);}
.step--media p{padding:0 clamp(1.4rem,2.6vw,1.9rem) clamp(1.4rem,2.6vw,1.9rem);}

/* ---------- Story section video background ---------- */
.story__bg{position:absolute;inset:0;}
.story__bg > img,.story__bg > video{width:100%;height:100%;object-fit:cover;}
.story__scrim{
  position:absolute;inset:0;
  background:
    linear-gradient(100deg,rgba(10,12,15,.93) 0%,rgba(10,12,15,.82) 40%,rgba(10,12,15,.55) 100%),
    linear-gradient(0deg,rgba(10,12,15,.5) 0%,rgba(10,12,15,0) 40%);
}
@media (prefers-reduced-motion: reduce){.story__bg > video{display:none;}}

/* ---------- Approach tiles with animated glyphs ---------- */
.tile{position:relative;overflow:hidden;}
.tile__spark{
  position:absolute;top:-30%;right:-20%;width:180px;height:180px;border-radius:50%;
  background:radial-gradient(circle,rgba(47,201,184,.16),transparent 68%);
  opacity:0;transition:opacity .5s ease;pointer-events:none;
}
.tile:hover .tile__spark{opacity:1;}
.tile .icon--lg svg{overflow:visible;}
.tile .icon--lg path,.tile .icon--lg circle,.tile .icon--lg rect{
  stroke-dasharray:var(--dash,120);stroke-dashoffset:var(--dash,120);
}
.tile.is-drawn .icon--lg path,.tile.is-drawn .icon--lg circle,.tile.is-drawn .icon--lg rect{
  animation:glyphDraw 1.2s cubic-bezier(.65,0,.35,1) forwards;
}
@keyframes glyphDraw{to{stroke-dashoffset:0;}}
@media (prefers-reduced-motion: reduce){
  .tile .icon--lg path,.tile .icon--lg circle,.tile .icon--lg rect{stroke-dashoffset:0;}
}