/* ------------------------------------------------------------------ gap.css
   The problem section: the six services a university already has, then what
   actually happens to someone who is struggling.
   Uses only the tokens already in a4.css. */


/* ------------------------------------------------- the six, as loose bubbles
   Six services, scattered, each drifting on its own timing so they never move
   together and never line up. Nothing joins them, because nothing joins them. */

.bubbles{
  list-style:none;
  margin:0;
  padding:0;
}

/* below the breakpoint they simply wrap, still round, still drifting */
.bubbles li{
  display:inline-flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:9px;
  width:clamp(96px,26vw,124px);
  aspect-ratio:1;
  margin:0 10px 12px 0;
  padding:10px;
  text-align:center;
  border-radius:50%;
  border:1px solid var(--rule);
  background:rgba(255,255,255,.72);
  box-shadow:0 12px 26px -18px rgba(42,33,22,.5);
  animation:bubble-drift var(--dur,13s) ease-in-out var(--delay,0s) infinite alternate;
  will-change:transform;
}

/* bubbles.js drives the transform itself once it takes over, so the keyframe
   is switched off rather than left to compound with it.

   The transition has to go too, and this is the one that actually bit. The
   reveal in a5.js puts transition:opacity,transform .45s on every .stagger
   child with a delay that increases per item, up to about half a second. A
   rAF loop writes a new transform every 16ms, so each write was being
   transitioned over 450ms and delayed on top of that: the first bubble still
   moved, and everything after it sat still. */
.bubbles.js-on li{animation:none;transition:none}

@media(min-width:900px){
  .bubbles{
    position:relative;
    width:100%;
    aspect-ratio:1.24;
  }
  .bubbles li{
    position:absolute;
    width:clamp(112px,20.5%,146px);
    margin:0;
    left:var(--x);
    top:var(--y);
  }
}

.bubbles .silo-ico{
  width:24px;
  height:24px;
  display:block;
  fill:none;
  stroke:var(--sage);
  stroke-width:1.5;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.bubbles b{
  font-family:var(--sans);
  font-size:13.5px;
  font-weight:600;
  line-height:1.2;
  color:var(--ink-2);
  max-width:13ch;
}

@keyframes bubble-drift{
  from{transform:translate3d(0,0,0)}
  to{transform:translate3d(var(--dx,5px),var(--dy,-11px),0)}
}

@media (prefers-reduced-motion:reduce){
  .bubbles li{animation:none}
}


/* ---------------------------------------------------- the gap, as a sequence
   What actually happens, step by step, before the before/after figure. */

.gapseq{
  list-style:none;
  margin:clamp(36px,4.5vw,56px) 0 0;
  padding:0;
  display:grid;
  grid-template-columns:1fr;
  gap:clamp(22px,2.6vw,34px);
}
@media(min-width:620px){ .gapseq{grid-template-columns:1fr 1fr} }
@media(min-width:960px){ .gapseq{grid-template-columns:repeat(3,1fr)} }
/* five steps since 30 Aug: Jay stopped the call to say the sequence was missing
   the one before it, that a person often does not know there is a problem */
@media(min-width:1180px){
  .gapseq{grid-template-columns:repeat(5,1fr);gap:clamp(18px,1.9vw,26px)}
  /* the sequence is five on the institution page and three on the student page,
     so the column count follows the number of items rather than being set for
     one of them and leaving the other with empty columns */
  .gapseq:has(li:first-child:nth-last-child(3)){grid-template-columns:repeat(3,1fr)}
  .gapseq:has(li:first-child:nth-last-child(4)){grid-template-columns:repeat(4,1fr)}
}

.gapseq li{
  position:relative;
  border-top:1px solid var(--rule);
  padding:22px 0 0;
}

/* the dot that turns four columns into one line of travel */
.gapseq li::before{
  content:"";
  position:absolute;
  top:-4px;
  left:0;
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--ochre);
}

.gapseq .gap-n{
  display:block;
  font-family:var(--mono);
  font-size:var(--t-label);
  letter-spacing:.1em;
  color:var(--ochre);
  margin-bottom:16px;
}

.gapseq .gap-ico{
  width:clamp(38px,3.6vw,48px);
  height:clamp(38px,3.6vw,48px);
  display:block;
  margin:0 0 20px;
  fill:none;
  stroke:var(--sage);
  stroke-width:1.6;
  stroke-linecap:round;
  stroke-linejoin:round;
}
/* the drawings are on a 24 unit grid, so scaling them up would thicken every
   line with them. This holds the stroke at 1.6 screen px at any size. */
.gapseq .gap-ico *{vector-effect:non-scaling-stroke}

.gapseq b{
  display:block;
  font-family:var(--display);
  font-size:21px;
  font-weight:500;
  letter-spacing:-.01em;
  line-height:1.2;
  color:var(--ink);
}

.gapseq span{
  display:block;
  margin-top:9px;
  font-size:15px;
  line-height:1.55;
  color:var(--ink-3);
}

/* the consequence, set apart from the four steps */
/* the consequence. The section ends here, so it is set as a closing statement
   rather than a caption: display face, well above the body sizes, with the
   half that names the cost carried in the accent. */
.gap-out{
  margin:clamp(38px,4.6vw,64px) 0 0;
  padding-left:clamp(20px,2vw,28px);
  border-left:3px solid var(--ochre);
  max-width:24ch;
  font-family:var(--display);
  font-size:clamp(27px,3.5vw,44px);
  font-weight:400;
  line-height:1.16;
  letter-spacing:-.022em;
  color:var(--ink);
}
.gap-out .bad{color:var(--ochre)}

/* the hinge into the sequence: a clear step up from .lede, below h2 */
.gap-lead{
  margin:clamp(30px,3.6vw,46px) 0 0;
  max-width:30ch;
  font-family:var(--display);
  font-size:clamp(24px,3vw,36px);
  line-height:1.14;
  letter-spacing:-.022em;
  color:var(--ink);
}
.gap-lead .cue{
  display:block;
  margin-top:.42em;
  font-family:var(--mono);
  font-size:var(--t-label);
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--ochre);
}

/* the section's own dark chapter, should it ever move there */
.ch-forest .gapseq b,.ch-night .gapseq b{color:#F6F1E8}
.ch-forest .gapseq span,.ch-night .gapseq span{color:#B5A48D}
.ch-forest .gapseq li,.ch-night .gapseq li{border-top-color:rgba(255,255,255,.16)}
.ch-forest .gap-out,.ch-night .gap-out{color:#D2C7B7}
.ch-forest .gap-lead,.ch-night .gap-lead{color:#FBF7F0}


/* ------------------------------------------------------- pick one, or none
   Four states a person actually arrives in. Not circles: a circle reads as a
   button, and these are not choices to click, they are sentences to recognise
   yourself in. An icon, then the words under it, at the size the circles were. */

.picks{
  list-style:none;
  margin:clamp(34px,4vw,52px) 0 0;
  padding:0;
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:clamp(24px,3vw,44px);
}
@media(min-width:900px){ .picks{grid-template-columns:repeat(4,1fr)} }

.picks li{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  gap:clamp(14px,1.6vw,20px);
  padding-top:20px;
  border-top:1px solid var(--rule);
}

.pick-box{
  width:clamp(76px,7.4vw,100px);
  aspect-ratio:1;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid var(--rule);
  border-radius:var(--r);
  background:rgba(255,255,255,.6);
  animation:pick-hover 7s ease-in-out var(--float,0s) infinite alternate;
  transition:border-color .4s ease, background .4s ease, transform .4s cubic-bezier(.16,.8,.24,1);
}

.picks .pick-ico{
  width:56%;
  height:56%;
  display:block;
  fill:none;
  stroke:var(--sage);
  stroke-width:1.5;
  stroke-linecap:round;
  stroke-linejoin:round;
  transition:stroke .4s ease, transform .5s cubic-bezier(.16,.8,.24,1);
}
.picks .pick-ico *{vector-effect:non-scaling-stroke}

/* the whole item is the target, so the mark answers wherever the eye is */
.picks li:hover .pick-box{
  border-color:var(--ochre);
  background:var(--ochre-2);
  transform:translateY(-4px);
}
.picks li:hover .pick-ico{stroke:var(--ochre);transform:scale(1.06)}

@keyframes pick-hover{
  from{transform:translateY(0)}
  to{transform:translateY(-5px)}
}

.picks q{
  quotes:none;
  font-family:var(--display);
  font-size:clamp(18px,1.85vw,23px);
  line-height:1.2;
  letter-spacing:-.014em;
  color:var(--ink);
}
.picks q::before,.picks q::after{content:""}

@media (prefers-reduced-motion:reduce){
  .pick-box{animation:none;transition:none}
  .picks li:hover .pick-box{transform:none}
  .picks .pick-ico{transition:none}
  .picks li:hover .pick-ico{transform:none}
}

.picks-after{
  margin:clamp(26px,3vw,38px) 0 0;
  max-width:56ch;
  font-size:clamp(16px,1.5vw,18px);
  color:var(--ink-2);
}

/* ten word bubbles rather than six icon ones, so they need to be smaller and
   the field wider, or they collide at the scatter positions they are given */
.bubbles.words li{padding:12px}
@media(min-width:900px){
  .bubbles.words{aspect-ratio:1.55}
  .bubbles.words li{width:clamp(96px,16.5%,132px)}
}
.bubbles.words b{font-size:12.5px;max-width:11ch}


/* each area gets a mark, so the field reads at a glance rather than as
   ten words a person has to stop and read one by one */
.bubbles.words li{gap:6px}
.bubbles.words .dim-ico{
  width:22px;
  height:22px;
  display:block;
  fill:none;
  stroke:var(--sage);
  stroke-width:1.6;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.bubbles.words .dim-ico *{vector-effect:non-scaling-stroke}

/* ------------------------------------------------ the sequence, on hover
   Each step answers when the pointer is anywhere on it: the rule and its dot
   take the accent, the mark warms with them, and the whole thing rises a
   little. The rule is the piece that carries it, because the five rules read
   as one line of travel across the section and lighting one segment shows
   where you are on it. */

.gapseq li{
  transition:transform .45s cubic-bezier(.16,.8,.24,1),
             border-top-color .35s ease;
}
.gapseq li::before{
  transition:transform .45s cubic-bezier(.16,.8,.24,1), background .35s ease;
}
.gapseq b,
.gapseq .gap-n,
.gapseq .gap-ico{
  transition:color .35s ease, stroke .35s ease;
}

.gapseq li:hover{
  transform:translateY(-5px);
  border-top-color:var(--ochre);
}
.gapseq li:hover::before{transform:scale(1.75)}
.gapseq li:hover b{color:var(--ochre)}
.gapseq li:hover .gap-ico{stroke:var(--ochre)}

.ch-forest .gapseq li:hover b,
.ch-night .gapseq li:hover b{color:#E8B96A}
.ch-forest .gapseq li:hover,
.ch-night .gapseq li:hover{border-top-color:#E8B96A}
.ch-forest .gapseq li:hover::before,
.ch-night .gapseq li:hover::before{background:#E8B96A}

@media (prefers-reduced-motion:reduce){
  .gapseq li,.gapseq li::before,.gapseq b,.gapseq .gap-n,.gapseq .gap-ico{transition:none}
  .gapseq li:hover{transform:none}
  .gapseq li:hover::before{transform:none}
}


/* ------------------------------------------- the drawn mark, on the steps
   The institution page shows one of these per step and drives it from scroll
   position, because its steps are a tall list. Here they are a row, so it is
   hover instead: the mark for the step under the pointer draws itself in.

   Done with :has() rather than script. Where :has() is missing the stage just
   shows the first mark and nothing switches, which is a fair degradation. */

.how-body{position:relative}

.how-stage{
  display:none;
}
@media(min-width:1080px){
  .how-stage{
    display:block;
    position:absolute;
    top:clamp(10px,2vw,28px);
    right:clamp(10px,2vw,30px);
    width:clamp(180px,17vw,244px);
    aspect-ratio:4/5;
    pointer-events:none;
  }
}

.how-stage .art{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  fill:none;
  stroke:#E8D3B0;
  stroke-width:2.25;
  stroke-linecap:round;
  stroke-linejoin:round;
  opacity:0;
  transition:opacity .5s ease;
}
.how-stage .art .hero-figure{stroke:#CFA267}
.how-stage .art .dim{opacity:.5}
.how-stage .art .dash{stroke-dasharray:6 8;opacity:.6;stroke-dashoffset:0 !important}
.how-stage .art path,.how-stage .art circle{
  stroke-dasharray:1;
  stroke-dashoffset:1;
  transition:stroke-dashoffset 1.1s cubic-bezier(.32,.72,.28,1);
}

/* nothing hovered: the first mark rests, already drawn */
.how-stage .art:first-child{opacity:.55}
.how-stage .art:first-child path,.how-stage .art:first-child circle{stroke-dashoffset:0}

/* something hovered: clear them all, then raise and draw the matching one */
.how-body:has(.gapseq li:hover) .how-stage .art{opacity:0}
.how-body:has(.gapseq li:nth-child(1):hover) .how-stage .art:nth-child(1),
.how-body:has(.gapseq li:nth-child(2):hover) .how-stage .art:nth-child(2),
.how-body:has(.gapseq li:nth-child(3):hover) .how-stage .art:nth-child(3),
.how-body:has(.gapseq li:nth-child(4):hover) .how-stage .art:nth-child(4),
.how-body:has(.gapseq li:nth-child(5):hover) .how-stage .art:nth-child(5){opacity:.9}
.how-body:has(.gapseq li:nth-child(1):hover) .how-stage .art:nth-child(1) path,
.how-body:has(.gapseq li:nth-child(1):hover) .how-stage .art:nth-child(1) circle,
.how-body:has(.gapseq li:nth-child(2):hover) .how-stage .art:nth-child(2) path,
.how-body:has(.gapseq li:nth-child(2):hover) .how-stage .art:nth-child(2) circle,
.how-body:has(.gapseq li:nth-child(3):hover) .how-stage .art:nth-child(3) path,
.how-body:has(.gapseq li:nth-child(3):hover) .how-stage .art:nth-child(3) circle,
.how-body:has(.gapseq li:nth-child(4):hover) .how-stage .art:nth-child(4) path,
.how-body:has(.gapseq li:nth-child(4):hover) .how-stage .art:nth-child(4) circle,
.how-body:has(.gapseq li:nth-child(5):hover) .how-stage .art:nth-child(5) path,
.how-body:has(.gapseq li:nth-child(5):hover) .how-stage .art:nth-child(5) circle{stroke-dashoffset:0}

@media (prefers-reduced-motion:reduce){
  .how-stage .art,.how-stage .art path,.how-stage .art circle{transition:none}
}