/* =========================================================
   Rasheed Gonga | homepage layout (index.html)
   andtechgroup
   ---------------------------------------------------------
   Loaded after styles.css. The cover is pinned to the viewport
   and the panel travels up over it on the ordinary page scroll.
   No wheel or touch handlers: the browser's own scrollbar does
   the work, so the mouse wheel, the scrollbar, the space bar,
   Page Down, arrow keys and screen reader navigation all behave
   exactly as the visitor expects.
   Only overrides live here; everything else is inherited.
   ========================================================= */

.is-alt{
  /* Duane's placement, carried over from the earlier fixed panel:
     59% horizontal anchor, and a start height that puts the card's top
     where his 35% bottom anchor used to put it. */
  --card-x:     59%;
  --card-w:     min(30rem,88vw);
  --stage-drop: 24vh;
}

/* ---------- desktop: pinned cover, travelling panel ---------- */
@media (min-width:901px){

  /* Sticky rather than fixed, so the cover holds while the panel passes
     and then releases at the end instead of being clipped by the footer.
     The .scroller wrapper in index.html is what it releases against. */
  .is-alt .stage{
    position:sticky;
    top:0;
    height:calc(var(--vh,1vh) * 100);
    z-index:0;
  }
  .is-alt .cover{height:100%;min-height:0;}

  /* The panel is ordinary page flow, so the page scrollbar is its
     scrollbar. Pulled back over the cover, it begins below the fold
     and rises as the visitor scrolls. */
  .is-alt .flow{
    position:relative;
    z-index:2;
    margin-top:calc(var(--vh,1vh) * -100);
    padding:var(--stage-drop) 0 4vh;
    /* This box covers the full width and sits above the cover, so without
       this it would swallow every click aimed at the bio and the nav
       pills underneath. The panel itself takes its clicks back below. */
    pointer-events:none;
  }

  .is-alt .links{pointer-events:auto;}

  /* Left edge = anchor minus half the width, which reproduces the
     centre point the old absolute panel sat on. */
  .is-alt .links{
    position:static;
    transform:none;
    width:var(--card-w);
    margin-left:calc(var(--card-x) - (var(--card-w) / 2));
    margin-right:0;
  }

  .is-alt .links__card{
    height:auto;
    max-height:none;
    padding:1.25rem;
  }

  /* No inner scroller: the page is the scroller now. */
  .is-alt .links__scroll{
    flex:0 0 auto;
    max-height:none;
    overflow:visible;
    padding:1.25rem 1.35rem 1.5rem;
    background:rgba(0,0,0,.34);
  }

  /* Rides along at the bottom of the viewport while the card is long,
     then settles into place at the end of the card. */
  .is-alt .links__out{
    position:sticky;
    bottom:1.1rem;
    margin-top:1.1rem;
  }

  .is-alt .foot{position:relative;z-index:2;background:var(--ink);}
}

/* ---------- the panel's own typography ---------- */
.panelstory{margin:0 0 1.75rem;}

.panelstory__title{
  margin:0 0 .9rem;
  font-size:1.5rem;
  font-weight:900;
  letter-spacing:-.025em;
  text-transform:uppercase;
  color:var(--paper);
}

/* The marathon frame, cropped to 16:9 so it earns its place without
   pushing the rest of the story below the fold. aspect-ratio plus the
   width and height attributes reserve the space before it loads, so
   nothing shifts underneath it. */
.panelstory__figure{margin:0 0 1.2rem;}
.panelstory__figure img{
  display:block;
  width:100%;
  height:auto;          /* without this the height attribute wins over aspect-ratio */
  aspect-ratio:16 / 9;
  object-fit:cover;
  object-position:center 42%;
  border:1px solid var(--card-line);
  border-radius:12px;
  background:var(--ink-soft);
}
.panelstory__cap{
  margin:.55rem 0 0;
  font-size:.66rem;
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--paper-dim);
}

.panelstory p{
  margin:0 0 .95rem;
  font-size:.92rem;
  line-height:1.66;
  color:var(--paper-dim);
}

.panelstory__sign{
  margin-top:1.35rem !important;
  font-size:1.05rem !important;
  font-weight:800;
  color:var(--paper) !important;
}

/* Small label that separates the story from the links */
.panelstory__rule{
  margin:0 0 .85rem;
  padding-top:1.1rem;
  border-top:1px solid var(--line);
  font-size:.7rem;
  font-weight:700;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--paper-dim);
}

.is-alt .links__list{padding:0;gap:.55rem;}

/* ---------- scroll cue ---------- */
.cue{
  position:fixed;
  right:7%;
  bottom:1.6rem;
  transform:translateX(-50%);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:.3rem;
  z-index:6;
  color:var(--paper-dim);
  pointer-events:none;
  transition:opacity .4s var(--ease);
}
.cue__text{
  font-size:.66rem;
  font-weight:700;
  letter-spacing:.24em;
  text-transform:uppercase;
}
.cue__arrow{animation:nudge 2s ease-in-out infinite;}
.cue.is-gone{opacity:0;}

@keyframes nudge{
  0%,100%{transform:translateY(0);opacity:.75;}
  50%{transform:translateY(5px);opacity:1;}
}

/* Narrow desktops: pull the panel further right and take a little width,
   so it never crosses the bio block. */
@media (min-width:901px) and (max-width:1180px){
  .is-alt{--card-x:67%;--card-w:min(26rem,46vw);}
}

/* ---------- stacked: plain page, no pinning ---------- */
@media (max-width:900px){
  .is-alt .stage{position:static;}
  .is-alt .flow{padding:0;}

  .is-alt .links{
    position:static;
    transform:none;
    width:100%;
    margin:0 auto 0;
    padding:0;            /* .flow supplies the gutter; keep it from doubling */
  }
  .is-alt .links__card{
    height:auto;
    max-height:none;
    max-width:32rem;
    margin:0 auto;
  }
  .is-alt .links__scroll{
    max-height:none;
    overflow:visible;
    padding:1.15rem 1.25rem 1.35rem;
    background:rgba(0,0,0,.34);
  }
  .cue{display:none;}
}

@media (prefers-reduced-motion:reduce){
  .cue__arrow{animation:none;}
}