/* Section transitions: every section is a sheet of paper. The next sheet rises over the previous one
   with a torn top edge, while the previous one stays pinned behind it and is gently pushed back.
   Load AFTER thinking.css. JS (sheets.js) feeds two numbers to each sheet:
     --p      0 → 1   how far this sheet has risen into the window
     --cover  0 → 1   how far the NEXT sheet has risen over this one                                   */

body::before,body::after{display:none}            /* the washes now live on the sheets themselves */
/* header stays above the sheets and out of their stacking */
.bar{position:fixed;left:0;right:0;top:0}
main{display:contents}                            /* so every sheet shares one parent (needed for pinning) */

.sheets{position:relative}
.sheet{
  --edge-h:clamp(44px,5.5vw,80px);
  position:sticky;
  top:min(0px,calc(100svh - var(--h,100svh)));    /* tall sheets scroll fully, then pin by their bottom edge */
  z-index:var(--i,1);
  background:var(--paper,#ffffef);
  overflow-x:clip;
  transform:translateY(calc(var(--cover,0) * -56px));
}
.sheet-inner{
  position:relative;z-index:1;
  padding:var(--pt,0) 0 clamp(48px,6vw,96px);
  transform:translateY(calc((1 - var(--p,1)) * 36px));
}
/* the sheet underneath darkens a little as it gets covered */
.sheet::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;background:rgba(14,22,110,calc(var(--cover,0) * .24))}

/* torn top edge: sits just above the sheet, same colour as the paper, with a pale fibre rim */
.sheet-edge{
  position:absolute;left:0;right:0;bottom:calc(100% - 1px);height:var(--edge-h);z-index:3;pointer-events:none;color:var(--paper,#ffffef);
  transform-origin:0 100%;
  transform:translateY(calc((1 - var(--p,1)) * 22px)) scaleY(calc(.62 + .38 * var(--p,1)));   /* bottom stays glued to the sheet */
  filter:drop-shadow(0 -6px calc(5px + 9px * var(--p,1)) rgba(24,46,222,calc(.06 + .12 * var(--p,1))));
  clip-path:inset(-120px 0 0 0);                      /* shadow may spill upward only, never down onto the sheet */
}
.sheet-edge svg{display:block;width:100%;height:100%;overflow:visible}
.sheet-edge .main{fill:currentColor}
.sheet-edge .fibre{fill:#f6f4e6;transform-box:fill-box;transform:translateY(calc((1 - var(--p,1)) * -7px))}

/* each sheet */
:root{--cream:#ffffef}                                   /* one paper colour shared by the intro sheet and Working together */
.sheet--intro,.sheet--wt{--paper:var(--cream)}
.sheet--intro{
  /* the blue wash runs 1500px down from the top, behind the hero and the first part of Experience */
  background:linear-gradient(191.65deg,rgba(216,231,243,.55) 0%,rgba(177,207,246,.55) 30%,rgba(99,159,253,.28) 57%,rgba(255,255,239,0) 88%) top/100% 1500px no-repeat,var(--paper,#ffffef)}
.sheet--intro .sheet-inner{padding-top:72px}
.sheet--intro .hero{padding-bottom:clamp(64px,9vw,128px)}   /* breathing room under the subtitle; "Recent Experience" peeks in just below the fold */
.sheet--blue{--paper:#182ede;--brand:#ffffef;color:#ffffef;min-height:100svh;display:flex;align-items:center}
.sheet--blue .sheet-inner{width:100%}
.sheet--blue ::selection{background:rgba(255,255,239,.25)}
.sheet--wt .sheet-inner{padding-bottom:0}                /* the yellow wash below runs to the bottom of the sheet */
/* yellow wash: starts clear at the top of How I build, deepens towards the footer's torn edge */
.sheet--wt .wt{padding-bottom:clamp(72px,9vw,128px)}                       /* more space before "How I build" */
.sheet--wt .hib .split{padding-top:clamp(48px,6vw,88px);padding-bottom:clamp(112px,14vw,208px)}   /* and after the last principle, so the footer's torn edge doesn't reach it too early */
.hib-wash{background:linear-gradient(180deg,rgba(253,220,99,0) 0%,rgba(253,220,99,.22) 45%,rgba(253,220,99,.34) 100%)}
/* footer: bold yellow sheet, like the blue statement. */
:root{--yellow:#ffd641;                 /* footer sheet */
      --footer-hero:#ffffef;            /* "Say kia ora" + email. Contrast on this yellow is low; #182ede (brand blue) is the readable alternative */
      --pill-on-yellow:#ffffef;         /* "Coming soon" pill: cream so it stands out from the yellow (the usual #ffefb5 would melt into it) */
      --pill-text-on-yellow:#7a5800}
.sheet--contact{--paper:var(--yellow);background:var(--paper)}
.sheet--contact .closing,.sheet--contact .chat-main{color:var(--footer-hero)}
.sheet--contact .chat-sub{color:var(--footer-sub,var(--footer-hero))}   /* smaller line: set --footer-sub to a darker colour if it's too faint */
.sheet--contact .soon{background:var(--pill-on-yellow);color:var(--pill-text-on-yellow)}
.sheet--contact ::selection{background:rgba(24,46,222,.25)}

/* no pinning / stacking for people who ask for less motion, or on small screens */
@media (prefers-reduced-motion:reduce),(max-width:700px){
  .sheet{position:relative;top:auto;transform:none}
  .sheet-inner,.sheet-edge,.sheet-edge .fibre{transform:none}
  .sheet::after{display:none}
  .sheet-edge{filter:none}
}