/* Drift Calc — motion, mobile fixes and polish.
   Loaded after the inline styles in index.html, so equal-specificity rules here
   win. Kept separate so the page markup never has to change for a visual tweak.
   Everything degrades to the old static layout if this file fails to load. */

/* ============================================================
   SLIDERS — the Safari fix
   index.html sets `input[type=range]{height:4px}` on the input itself. Chrome
   lets the thumb overflow that box; Safari and iOS clip it, so the handle was
   sliced in half or missing entirely and the control looked broken on a Mac
   and on a phone.
   The fix is the standard one: strip the native appearance, give the input a
   real 28px hit area, then draw the track and the thumb explicitly. 28px also
   happens to be a usable touch target, which 4px never was.
   ============================================================ */
input[type=range]{
  /* polish.css is linked BEFORE index.html's inline <style>, so an equal
     specificity rule there wins on source order. These have to shout. */
  -webkit-appearance:none !important; -moz-appearance:none !important; appearance:none !important;
  height:28px !important;
  background:transparent !important;
  flex:1 1 auto !important;
  min-width:0 !important;
  margin:0 !important;
  cursor:pointer;
}
input[type=range]:focus{outline:none}
input[type=range]:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:6px}

input[type=range]::-webkit-slider-runnable-track{
  height:5px;border-radius:99px;background:#DCE4F0;border:none;
}
input[type=range]::-moz-range-track{
  height:5px;border-radius:99px;background:#DCE4F0;border:none;
}
input[type=range]::-moz-range-progress{height:5px;border-radius:99px;background:var(--accent)}

/* margin-top centres the thumb on a 5px track inside a 28px box */
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;
  width:20px;height:20px;border-radius:50%;
  background:var(--accent);border:2px solid #fff;
  box-shadow:0 1px 4px rgba(16,24,40,.28);
  margin-top:-7.5px;
  transition:transform .12s ease, box-shadow .12s ease;
}
input[type=range]::-moz-range-thumb{
  width:20px;height:20px;border-radius:50%;
  background:var(--accent);border:2px solid #fff;
  box-shadow:0 1px 4px rgba(16,24,40,.28);
  transition:transform .12s ease;
}
input[type=range]:hover::-webkit-slider-thumb{transform:scale(1.12)}
input[type=range]:active::-webkit-slider-thumb{transform:scale(1.02)}
input[type=range]:hover::-moz-range-thumb{transform:scale(1.12)}

/* ---------- other things Safari renders differently ---------- */
/* iOS zooms the page when a focused input is under 16px. */
/* iOS zooms the page on focus for any input under 16px, whatever the viewport is,
   so this is a touch question rather than a width one.

   The old selector list was [type=text],[type=number],[type=email]. Every text input
   on this site is written as a bare <input> with no type attribute, and an attribute
   selector does not match a default, so the rule matched nothing but the selects. The
   selects it did match still came out at 11.5px, because this file loads before the
   page's own <style> and loses to .inp on specificity and to an inline style outright.
   Hence the type exclusions and the !important. */
@media (pointer:coarse){
  input:not([type=range]):not([type=checkbox]):not([type=radio]):not([type=color]):not([type=file]),
  select,
  textarea{font-size:16px !important}
}
/* iOS strips styling off buttons and inputs unless told otherwise. */
button,input,select,textarea{-webkit-appearance:none;appearance:none;border-radius:inherit}
input[type=checkbox],input[type=radio]{-webkit-appearance:auto;appearance:auto}
.card,.sec-body{min-width:0}

/* ---------- sections open and close instead of snapping ---------- */
section .sec-body{
  overflow:hidden;
  max-height:8000px;
  opacity:1;
  transition:max-height .40s cubic-bezier(.2,.7,.3,1), opacity .22s ease .06s;
}
section.closed .sec-body{
  display:block !important;   /* index.html's later display:none would win otherwise */
  max-height:0;
  opacity:0;
  transition:max-height .34s cubic-bezier(.4,0,.6,1), opacity .16s ease;
}
.sec-head.collapser .chev{transition:background .15s, color .15s}

/* a closed section should read as one calm bar, not a heading with debris.
   index.html gives every section 26px of padding top and bottom, which on a
   collapsed one is 52px of nothing between two title bars. */
section{margin-bottom:14px}
section.closed{padding-top:0 !important;padding-bottom:0 !important}
section.closed .sec-head.collapser{background:#FBFCFE}
.sec-head.collapser{gap:10px}
.sec-head.collapser h2{flex:none}
.sec-head.collapser .sub{
  flex:1 1 auto;min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
@media(max-width:759.98px){
  .sec-head.collapser{flex-wrap:wrap}
  .sec-head.collapser .sub{flex-basis:100%;white-space:normal;font-size:12.5px}
  .sec-head.collapser .chev{margin-left:auto}
}

/* ---------- everything arrives, rather than just being there ---------- */
@keyframes riseIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.hero, #overview, section{animation:riseIn .5s cubic-bezier(.2,.7,.3,1) both}
#overview{animation-delay:.05s}
#s2{animation-delay:.10s}
#s1{animation-delay:.15s}
#s3{animation-delay:.20s}
#s5{animation-delay:.25s}

/* ---------- cards respond to the pointer ---------- */
.card{transition:box-shadow .2s ease, border-color .2s ease, transform .2s cubic-bezier(.2,.7,.3,1)}
.ovr .card:hover{box-shadow:0 4px 16px rgba(16,24,40,.07); border-color:#D3DDEC}

/* ---------- controls feel alive ---------- */
.pill{transition:all .18s cubic-bezier(.2,.7,.3,1)}
.pill:hover{transform:translateY(-1px)}
.pill.on{transform:none}
.btn{transition:all .16s cubic-bezier(.2,.7,.3,1)}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(0) scale(.985)}

.stat .v{transition:color .25s ease}
@keyframes popNum{0%{opacity:.35;transform:translateY(3px)}100%{opacity:1;transform:none}}
.stat-strip .stat .v{animation:popNum .34s cubic-bezier(.2,.7,.3,1) both}
.stat-strip .stat:nth-child(2) .v{animation-delay:.05s}
.stat-strip .stat:nth-child(3) .v{animation-delay:.10s}
.stat-strip .stat:nth-child(4) .v{animation-delay:.15s}
.stat-strip .stat:nth-child(5) .v{animation-delay:.20s}

/* ---------- the allocation picture carries more weight ---------- */
#overview{margin-top:26px}
#donut{width:240px;height:240px;transition:transform .3s cubic-bezier(.2,.7,.3,1)}
.donut-wrap{gap:32px}
.donut-wrap:hover #donut{transform:scale(1.03)}
@media(max-width:759.98px){
  #donut{width:180px;height:180px}
  .donut-wrap{gap:18px;justify-content:center}
  .stat-strip{overflow-x:auto;-webkit-overflow-scrolling:touch}
}

/* ---------- the backtest doorway ---------- */
.bt-cta{
  display:flex;align-items:center;gap:18px;flex-wrap:wrap;
  padding:20px 22px;margin:18px 0 8px;
  border-radius:14px;border:1px solid #C9DAFB;
  background:linear-gradient(105deg,#F2F7FF 0%,#EAF1FE 55%,#E4EDFD 100%);
  box-shadow:0 1px 2px rgba(16,24,40,.04);
  cursor:pointer;text-decoration:none;color:inherit;
  transition:transform .2s cubic-bezier(.2,.7,.3,1), box-shadow .2s ease, border-color .2s ease;
}
.bt-cta:hover{
  transform:translateY(-2px);
  box-shadow:0 8px 24px rgba(46,107,230,.16);
  border-color:#9FBFF8;
}
.bt-cta:active{transform:translateY(0)}
.bt-cta .ic{
  width:46px;height:46px;border-radius:12px;flex:none;
  background:var(--accent);display:flex;align-items:center;justify-content:center;
  box-shadow:0 3px 10px rgba(46,107,230,.32);
}
.bt-cta h3{font-family:var(--disp);font-size:16.5px;font-weight:800;letter-spacing:-.02em;margin-bottom:2px}
.bt-cta p{color:var(--muted);font-size:13.5px;margin:0}
.bt-cta .go{
  margin-left:auto;white-space:nowrap;font-weight:600;font-size:13.5px;color:#fff;
  background:var(--accent);padding:9px 17px;border-radius:9px;
  box-shadow:0 2px 8px rgba(46,107,230,.28);
  transition:background .16s ease, transform .16s ease;
}
.bt-cta:hover .go{background:#2456C4;transform:translateX(2px)}
@media(max-width:599.98px){
  .bt-cta{gap:14px;padding:16px 18px}
  .bt-cta .go{margin-left:0;width:100%;text-align:center}
}

.hbtns .bt-nav{
  border-color:rgba(120,170,255,.55) !important;
  color:#DCE9FF !important;
  background:rgba(46,107,230,.20) !important;
  font-weight:600 !important;
}
.hbtns .bt-nav:hover{background:rgba(46,107,230,.38) !important;color:#fff !important}
/* the header wraps into a wall of buttons on a phone; let it scroll instead */
@media(max-width:759.98px){
  .hbtns{overflow-x:auto;-webkit-overflow-scrolling:touch;flex-wrap:nowrap;scrollbar-width:none}
  .hbtns::-webkit-scrollbar{display:none}
  .hbtns .btn{flex:none}
}

/* ---------- respect people who don't want motion ---------- */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-delay:0s !important;transition-duration:.001ms !important}
}

/* ---------- sections fade up as you scroll to them ---------- */
.reveal{opacity:0;transform:translateY(22px);
  transition:opacity .55s cubic-bezier(.2,.7,.3,1), transform .55s cubic-bezier(.2,.7,.3,1)}
.reveal.seen{opacity:1;transform:none}
.reveal-d1{transition-delay:.06s}
.reveal-d2{transition-delay:.12s}

.sec-head h2{position:relative}
@media (prefers-reduced-motion: no-preference){
  section.seen .sec-head h2::after{
    content:'';position:absolute;left:0;right:0;bottom:-6px;height:2px;
    background:var(--accent);border-radius:2px;transform-origin:left;
    animation:underline .5s cubic-bezier(.2,.7,.3,1) both;
  }
  @keyframes underline{from{transform:scaleX(0);opacity:.5}to{transform:scaleX(1);opacity:.18}}
}