/* ══════════════════════════════════════════════════════════════
   Sharukan Enganathan — portfolio
   Concept: the page is a figure sheet. Hairline plotting grid,
   axes frames with tick marks, matplotlib tab10 as the accent.
   ══════════════════════════════════════════════════════════════ */

:root{
  /* ink */
  --ink-0:#0a0d0c;          /* page */
  --ink-1:#101216;          /* raised surface */
  --ink-2:#15181E;          /* hover surface */
  --line:#20242C;           /* hairline */
  --tick:#39404C;           /* tick marks */

  /* text */
  --paper:#ECEEF1;
  --muted:#8A909C;
  --dim:#5C626E;

  /* accent — matplotlib tab10 */
  --trace:#1f77b4;          /* fills, rules */
  --trace-lift:#57A6DC;     /* text on dark */
  --trace-2:#ff7f0e;        /* second trace, used once */

  --gut:clamp(1.25rem,5vw,3.5rem);
  --maxw:1180px;

  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --sans:"Familjen Grotesk",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;

  --ease:cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
html:focus-within{scroll-behavior:smooth}

body{
  margin:0;
  background:var(--ink-0);
  color:var(--paper);
  font-family:var(--sans);
  font-size:1.0625rem;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{max-width:100%;display:block;height:auto}
ul{margin:0;padding:0;list-style:none}
p{margin:0}
a{color:inherit;text-decoration:none}

:focus-visible{
  outline:2px solid var(--trace-lift);
  outline-offset:3px;
  border-radius:2px;
}

.skip{
  position:absolute;left:-9999px;top:0;z-index:100;
  background:var(--paper);color:var(--ink-0);
  padding:.65rem 1rem;font:500 .8rem/1 var(--mono);
}
.skip:focus{left:1rem;top:1rem}

.wrap{
  width:100%;max-width:var(--maxw);
  margin-inline:auto;padding-inline:var(--gut);
}

/* ── shared type ────────────────────────────────────────────── */
.eyebrow{
  font:500 .6875rem/1 var(--mono);
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--muted);
  margin:0;
}

/* ── nav ────────────────────────────────────────────────────── */
.nav{
  position:sticky;top:0;z-index:50;
  background:color-mix(in srgb,var(--ink-0) 82%,transparent);
  backdrop-filter:blur(14px);
  border-bottom:1px solid transparent;
  transition:border-color .3s var(--ease);
}
.nav.is-stuck{border-bottom-color:var(--line)}

.nav__inner{
  max-width:var(--maxw);margin-inline:auto;
  padding:1.05rem var(--gut);
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
}

.mark{
  font:500 .8125rem/1 var(--mono);
  letter-spacing:.12em;
}
.mark span{color:var(--trace-lift)}

.nav__links{
  display:flex;align-items:center;
  gap:clamp(.9rem,2.6vw,1.9rem);
  font:400 .78rem/1 var(--mono);
  letter-spacing:.06em;
}
.nav__links a{
  color:var(--muted);
  transition:color .2s var(--ease);
}
.nav__links a:hover{color:var(--paper)}
.nav__mail{color:var(--paper) !important}

/* ── hero ───────────────────────────────────────────────────── */
.hero{
  position:relative;
  padding-block:clamp(3rem,8vh,5.5rem) clamp(4rem,10vh,7rem);
}

/* the plotting grid */
.hero__grid{
  position:absolute;inset:0;
  pointer-events:none;
  background-image:
    repeating-linear-gradient(to right,var(--line) 0 1px,transparent 1px 84px),
    repeating-linear-gradient(to bottom,var(--line) 0 1px,transparent 1px 84px);
  -webkit-mask-image:radial-gradient(120% 90% at 18% 25%,#000 0%,transparent 72%);
  mask-image:radial-gradient(120% 90% at 18% 25%,#000 0%,transparent 72%);
  opacity:0;
  animation:gridIn 1.4s var(--ease) .15s forwards;
}
@keyframes gridIn{to{opacity:.85}}

/* ── glass hero panel ──────────────────────────────────────── */
.glass{
  position:relative;
  overflow:hidden;
  border-radius:1.75rem;
  border:1px solid var(--line);
  background:color-mix(in srgb,var(--ink-1) 55%,transparent);
  backdrop-filter:blur(40px);
  -webkit-backdrop-filter:blur(40px);
  padding:clamp(1.75rem,4vw,3rem);
}
.glass__sheen{
  position:absolute;inset:0;
  background:linear-gradient(135deg,color-mix(in srgb,var(--paper) 6%,transparent),transparent 60%);
  pointer-events:none;
}

.glass__grid{
  position:relative;
  display:grid;
  gap:clamp(2.5rem,5vw,3.5rem);
}
@media (min-width:960px){
  .glass__grid{grid-template-columns:minmax(0,1fr) 20rem;align-items:start}
}

.glass__left{display:grid;gap:clamp(1.75rem,4vh,2.25rem)}

.badge{
  justify-self:start;
  display:inline-flex;align-items:center;
  border-radius:999px;
  border:1px solid var(--line);
  background:color-mix(in srgb,var(--ink-1) 70%,transparent);
  padding:.5rem 1rem;
  font:500 .6875rem/1 var(--mono);
  letter-spacing:.22em;text-transform:uppercase;
  color:var(--muted);
  transition:background-color .2s var(--ease),color .2s var(--ease);
}
.badge:hover{background:color-mix(in srgb,var(--ink-2) 80%,transparent);color:var(--paper)}

.glass__title{
  margin:0;
  font-size:clamp(1.75rem,4vw,2.5rem);
  font-weight:700;line-height:1.15;letter-spacing:-.02em;
}

.glass__desc{display:grid;gap:1rem;max-width:52ch}
.glass__desc p{color:var(--muted);font-size:1.0625rem;line-height:1.6}

.highlights{display:grid;gap:1rem}

.highlight{
  position:relative;
  overflow:hidden;
  border-radius:1rem;
  border:1px solid var(--tick);
  border-left:3px solid var(--trace);
  background:color-mix(in srgb,var(--ink-2) 82%,transparent);
  padding:1.25rem 1.4rem;
  transition:transform .3s var(--ease),border-color .3s var(--ease),box-shadow .3s var(--ease),background-color .3s var(--ease);
}
.highlights .highlight:hover{
  transform:translateY(-4px);
  border-color:var(--trace-lift);
  border-left-color:var(--trace-lift);
  background:color-mix(in srgb,var(--ink-2) 95%,transparent);
  box-shadow:0 12px 30px -10px rgba(0,0,0,.6);
}
.highlight__title{
  font:700 .75rem/1 var(--mono);
  letter-spacing:.18em;text-transform:uppercase;
  color:var(--trace-lift);
}

.chips{
  margin-top:.9rem;
  display:grid;
}
.chips li{
  display:flex;align-items:baseline;gap:.85rem;
  padding:.6rem 0;
  border-top:1px solid color-mix(in srgb,var(--line) 70%,transparent);
  color:var(--paper);
  font-size:.9688rem;
  transition:color .2s var(--ease),padding-left .2s var(--ease);
}
.chips li:first-child{border-top:none;padding-top:.15rem}
.chips li:hover{color:var(--trace-lift);padding-left:.4rem}
.chips__n{
  flex-shrink:0;
  min-width:1.4rem;
  font:600 .6875rem/1 var(--mono);
  color:var(--trace-lift);
}

.glass__cta{margin-top:.25rem}

.btn-pill{
  display:inline-flex;align-items:center;gap:.6rem;
  border-radius:999px;
  padding:.9rem 1.75rem;
  background:var(--paper);
  color:var(--ink-0);
  font:500 .75rem/1 var(--mono);
  letter-spacing:.22em;text-transform:uppercase;
  transition:background-color .25s var(--ease),box-shadow .25s var(--ease),transform .2s var(--ease);
}
.btn-pill:hover{
  background:var(--trace-lift);
  box-shadow:0 14px 30px -10px color-mix(in srgb,var(--trace-lift) 55%,transparent);
  transform:translateY(-1px);
}
.btn-pill .i-arrow{width:1rem;height:1rem}

/* right column — profile card */
.profile{position:relative}
.profile__glow{
  position:absolute;inset:-1.5rem;
  border-radius:2rem;
  background:radial-gradient(60% 60% at 50% 20%,color-mix(in srgb,var(--trace) 30%,transparent),transparent 70%);
  filter:blur(48px);
  pointer-events:none;
  z-index:0;
}

.profile__panel{
  position:relative;z-index:1;
  border-radius:1.5rem;
  border:1px solid var(--line);
  background:color-mix(in srgb,var(--ink-1) 68%,transparent);
  backdrop-filter:blur(24px);
  -webkit-backdrop-filter:blur(24px);
  padding:clamp(1.75rem,3vw,2.25rem);
  display:flex;flex-direction:column;align-items:center;
  text-align:center;
}

.avatar{position:relative;width:7rem;height:7rem;margin-bottom:1.25rem}
.avatar__glow{
  position:absolute;inset:-1rem;
  border-radius:999px;
  background:color-mix(in srgb,var(--trace) 35%,transparent);
  filter:blur(28px);
}
.avatar img{
  position:relative;
  width:100%;height:100%;
  border-radius:999px;
  border:1px solid var(--line);
  object-fit:cover;
  box-shadow:0 20px 45px rgba(0,0,0,.55);
}

.profile__name{margin:0;font-size:1.375rem;font-weight:700;letter-spacing:-.01em}
.profile__role{
  margin-top:.35rem;
  font:500 .6875rem/1 var(--mono);
  letter-spacing:.24em;text-transform:uppercase;
  color:var(--dim);
}
.profile__tagline{
  margin-top:1rem;
  max-width:24rem;
  color:var(--muted);
  font-size:.9375rem;line-height:1.6;
}

.social{margin-top:1.75rem;display:grid;gap:.65rem;width:100%}
.social__row{
  display:flex;align-items:center;justify-content:space-between;gap:.75rem;
  border-radius:1rem;
  border:1px solid var(--line);
  background:color-mix(in srgb,var(--ink-1) 72%,transparent);
  padding:.7rem .9rem;
  text-align:left;
  transition:transform .25s var(--ease),border-color .25s var(--ease),background-color .25s var(--ease);
}
.social__row:hover{
  transform:translateY(-2px);
  border-color:var(--tick);
  background:color-mix(in srgb,var(--ink-2) 80%,transparent);
}
.social__row .i-arrow{
  width:1rem;height:1rem;flex-shrink:0;
  color:var(--dim);
  transition:transform .25s var(--ease),color .25s var(--ease);
}
.social__row:hover .i-arrow{transform:translate(2px,-2px);color:var(--trace-lift)}

.social__icon{
  display:flex;align-items:center;justify-content:center;
  width:2.5rem;height:2.5rem;flex-shrink:0;
  border-radius:999px;
  border:1px solid var(--line);
  background:color-mix(in srgb,var(--ink-1) 72%,transparent);
  color:var(--muted);
}
.social__icon svg{width:1rem;height:1rem}

.social__meta{display:grid;gap:.15rem;min-width:0;flex:1}
.social__label{font-size:.875rem;font-weight:600;color:var(--paper)}
.social__handle{
  font:400 .75rem/1.3 var(--mono);
  color:var(--dim);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}

@media (max-width:480px){
  .glass{padding:1.5rem}
  .profile__panel{padding:1.5rem}
  .badge{font-size:.625rem;letter-spacing:.16em;white-space:nowrap}
}


/* spec list — the margin notes of the figure sheet */
.spec{display:grid}
.spec__row{border-top:1px solid var(--line)}
.spec__row:first-child{border-top-color:var(--trace)}

.spec__row,
.spec__link{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:.3rem .75rem;
  padding:.85rem 0 1.1rem;
}
.spec__link{padding:0;transition:color .2s var(--ease)}

.spec__label{
  grid-column:1;
  font:500 .625rem/1 var(--mono);
  letter-spacing:.2em;text-transform:uppercase;
  color:var(--dim);
}
.spec__value{
  grid-column:1;
  font:400 .8125rem/1.55 var(--mono);
  color:var(--muted);
  overflow-wrap:anywhere;
}
.spec__row:first-child .spec__value{color:var(--paper)}

.spec__link .spec__label{color:var(--paper)}
.spec__arrow{
  grid-row:1;grid-column:2;
  align-self:start;
  font-size:.8125rem;line-height:1;
  color:var(--dim);
  transition:color .2s var(--ease),transform .2s var(--ease);
}
.spec__link:hover .spec__label,
.spec__link:hover .spec__arrow{color:var(--trace-lift)}
.spec__link:hover .spec__arrow{transform:translate(2px,-2px)}

/* ── buttons ────────────────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;gap:.5rem;
  padding:.8rem 1.35rem;
  border:1px solid var(--line);
  font:500 .78rem/1 var(--mono);
  letter-spacing:.09em;text-transform:uppercase;
  color:var(--paper);
  transition:border-color .25s var(--ease),background-color .25s var(--ease),color .25s var(--ease);
}
.btn:hover{border-color:var(--tick);background:var(--ink-1)}
.btn--solid{
  background:var(--paper);color:var(--ink-0);border-color:var(--paper);
}
.btn--solid:hover{background:var(--trace-lift);border-color:var(--trace-lift);color:var(--ink-0)}

/* ── sections ───────────────────────────────────────────────── */
.section{padding-block:clamp(4rem,10vh,7rem)}
.section--rule{border-top:1px solid var(--line)}

.section__head{
  display:flex;flex-wrap:wrap;align-items:baseline;
  gap:.5rem 1.5rem;
  margin-bottom:clamp(2.25rem,5vh,3.5rem);
}
.section__note{color:var(--dim);font-size:.9375rem}

/* ── project cards ──────────────────────────────────────────── */
.figures{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:2rem;
}
@media (min-width:768px){
  .figures{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (min-width:1024px){
  .figures{grid-template-columns:repeat(3,minmax(0,1fr))}
}

.card{
  position:relative;
  display:flex;flex-direction:column;
  overflow:hidden;
  border-radius:1rem;
  border:1px solid var(--line);
  background:var(--ink-1);
  box-shadow:0 1px 2px 0 rgba(0,0,0,.45);
  cursor:pointer;
  transition:transform .5s ease-in-out,box-shadow .5s ease-in-out,border-color .5s ease-in-out;
}
.figures .card:hover{
  transform:translateY(-8px);
  border-color:var(--tick);
  box-shadow:0 20px 25px -5px rgba(0,0,0,.65),0 8px 10px -6px rgba(0,0,0,.5);
}
.card:focus-within{border-color:var(--tick)}

.card__media{
  aspect-ratio:16/9;
  overflow:hidden;
  background:var(--ink-2);
}
.card__media img{
  width:100%;height:100%;
  object-fit:cover;
  transition:transform .7s ease-in-out;
}
.card:hover .card__media img{transform:scale(1.1)}

.card__body{
  display:flex;flex-direction:column;flex:1;
  padding:1.5rem;
}

.card__title{
  margin:0;
  font-size:1.25rem;font-weight:600;letter-spacing:-.012em;line-height:1.3;
  transition:color .3s var(--ease);
}
.card:hover .card__title{color:var(--trace-lift)}
/* the whole card is the link target */
.card__title a::after{content:"";position:absolute;inset:0}

.card__text{
  margin-top:.75rem;flex:1;
  color:var(--muted);
  font-size:.9688rem;
}

.card .tags{margin-top:1.25rem}

.card__cta{
  position:relative;z-index:2;
  align-self:flex-start;
  margin-top:1rem;
  display:inline-flex;align-items:center;gap:.5rem;
  font-size:.875rem;font-weight:500;
  color:var(--trace-lift);
  transition:color .3s var(--ease);
}
.card__cta:hover{text-decoration:underline;text-underline-offset:.25em}
.card__arrow{
  width:1rem;height:1rem;
  transition:transform .3s var(--ease);
}
.card__cta:hover .card__arrow{transform:translateX(4px)}

.tags{
  display:flex;flex-wrap:wrap;gap:.4rem;
}
.tags li{
  font:400 .6875rem/1 var(--mono);
  letter-spacing:.05em;
  color:var(--dim);
  border:1px solid var(--line);
  border-radius:999px;
  padding:.38rem .6rem;
}

/* disclosure label — deliberately not styled like a tech tag */
.ai-tag{
  display:inline-flex;align-items:center;gap:.3rem;
  margin-top:.7rem;
  font:400 .625rem/1 var(--mono);
  letter-spacing:.08em;
  color:var(--dim);
}
.ai-tag svg{width:.6875rem;height:.6875rem;flex-shrink:0;opacity:.8}

/* ── coursework columns ─────────────────────────────────────── */
.cols{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));
  gap:clamp(1.75rem,4vw,3rem);
}
.col{border-top:1px solid var(--line);padding-top:1.15rem}
.col:first-child{border-top-color:var(--trace)}

.col__label{
  font:500 .6875rem/1 var(--mono);
  letter-spacing:.18em;text-transform:uppercase;
  color:var(--muted);
  margin-bottom:1rem;
}
.col__list li{
  padding:.42rem 0;
  font-size:1rem;
  color:var(--paper);
}
.col__list li + li{border-top:1px solid color-mix(in srgb,var(--line) 60%,transparent)}

/* ── portrait ──────────────────────────────────────────────── */
.portrait{
  margin:0;
  max-width:15rem;
}
.portrait img{
  width:100%;
  aspect-ratio:4/5;
  object-fit:cover;
  border:1px solid var(--line);
  background:var(--ink-1);
}

/* ── case study ─────────────────────────────────────────────── */
.case{padding-block:clamp(2.5rem,6vh,4rem) clamp(4rem,10vh,7rem)}

.back{
  display:inline-flex;align-items:center;gap:.5rem;
  font:500 .75rem/1 var(--mono);
  letter-spacing:.12em;text-transform:uppercase;
  color:var(--muted);
  transition:color .2s var(--ease);
}
.back:hover{color:var(--paper)}
.back span{transition:transform .2s var(--ease)}
.back:hover span{transform:translateX(-3px)}

.case__head{
  margin-top:clamp(2.5rem,6vh,4rem);
  padding-bottom:clamp(2.5rem,6vh,3.5rem);
  border-bottom:1px solid var(--line);
}
/* only for headers that carry a sidebar block — plain ones stay block-flow */
.case__head--split{
  display:grid;
  gap:clamp(2rem,4vw,3rem);
  align-items:start;
}
@media (min-width:940px){
  .case__head--split{grid-template-columns:minmax(0,1fr) 19rem}
}

/* the brief, sitting beside the title */
.problem{
  border-left:3px solid var(--trace);
  border-radius:0 1rem 1rem 0;
  background:color-mix(in srgb,var(--ink-2) 82%,transparent);
  padding:1.35rem 1.5rem;
  display:grid;
  gap:.8rem;
}
.problem__title{
  margin:0;
  font:700 .75rem/1 var(--mono);
  letter-spacing:.18em;text-transform:uppercase;
  color:var(--trace-lift);
}
.problem p{
  color:var(--muted);
  font-size:.9375rem;line-height:1.6;
}
.case__title{
  margin:1.25rem 0 0;
  font-size:clamp(2.1rem,5vw,3.5rem);
  font-weight:700;line-height:1.05;letter-spacing:-.03em;
}
.case__sub{
  margin-top:1.15rem;
  max-width:48ch;
  color:var(--muted);
  font-size:clamp(1.0625rem,1.7vw,1.25rem);
}
.case__head .tags{margin-top:1.5rem}

/* the featured shot, right under the title and short bio */
.hero-plate{
  margin:clamp(2.5rem,6vh,4rem) 0 0;
}
.hero-plate__frame{
  position:relative;
  overflow:hidden;
  border:1px solid var(--line);
  background:var(--ink-1);
  aspect-ratio:7/3;
}
.hero-plate__frame::before,
.hero-plate__frame::after{
  content:"";position:absolute;z-index:2;pointer-events:none;opacity:.55;
}
.hero-plate__frame::before{
  inset:0 0 auto 0;height:5px;
  background:repeating-linear-gradient(to right,var(--tick) 0 1px,transparent 1px 26px);
}
.hero-plate__frame::after{
  inset:0 auto 0 0;width:5px;
  background:repeating-linear-gradient(to bottom,var(--tick) 0 1px,transparent 1px 26px);
}
.hero-plate__frame img{
  width:100%;height:100%;
  object-fit:cover;object-position:top;
  display:block;
}

.case__cols{
  margin-top:clamp(2.5rem,6vh,4rem);
  display:grid;
  gap:clamp(2.5rem,5vw,4rem);
  align-items:start;
}
@media (min-width:940px){
  .case__cols{grid-template-columns:minmax(0,1fr) 15rem}
  .case__side{position:sticky;top:6rem}
}

.case__body{
  display:grid;
  gap:clamp(2rem,4.5vh,3rem);
}
.case__part{max-width:64ch}
.case__lede{
  max-width:64ch;
  color:var(--paper);
  font-size:clamp(1.0625rem,1.7vw,1.1875rem);
  line-height:1.55;
}
.case__part p{
  margin-top:.9rem;
  color:var(--muted);
  font-size:1.0625rem;
}
.case__part a{
  color:var(--paper);
  border-bottom:1px solid var(--tick);
  transition:color .2s var(--ease),border-color .2s var(--ease);
}
.case__part a:hover{color:var(--trace-lift);border-bottom-color:var(--trace-lift)}
.case__part code{
  font:400 .875em/1 var(--mono);
  color:var(--paper);
  background:var(--ink-1);
  border:1px solid var(--line);
  padding:.15em .4em;
}

.case__h2{
  margin:0;
  font-size:1.25rem;font-weight:600;letter-spacing:-.01em;
}

/* screenshot plates — the same axes box as the index figures */
.plate{margin:0}
.plate__frame{
  position:relative;
  border:1px solid var(--line);
  background:var(--ink-1);
  overflow:hidden;
}
.plate__frame::before,
.plate__frame::after{
  content:"";position:absolute;z-index:2;pointer-events:none;opacity:.55;
}
.plate__frame::before{
  inset:0 0 auto 0;height:5px;
  background:repeating-linear-gradient(to right,var(--tick) 0 1px,transparent 1px 26px);
}
.plate__frame::after{
  inset:0 auto 0 0;width:5px;
  background:repeating-linear-gradient(to bottom,var(--tick) 0 1px,transparent 1px 26px);
}
.plate img{width:100%;display:block}
.plate figcaption{
  margin-top:.85rem;
  font:400 .75rem/1.5 var(--mono);
  color:var(--dim);
  max-width:56ch;
}
.plate__num{
  color:var(--trace-lift);
  letter-spacing:.12em;text-transform:uppercase;
  margin-right:.55rem;
}

.case__actions{margin-top:1.75rem;display:grid;gap:.75rem}
.case__repo{width:100%;justify-content:center;margin-top:0}

.case__next{
  margin-top:clamp(3.5rem,8vh,5.5rem);
  padding-top:1.75rem;
  border-top:1px solid var(--line);
  display:flex;flex-wrap:wrap;gap:1rem 2rem;
  justify-content:space-between;
  font:500 .78rem/1.4 var(--mono);
  letter-spacing:.08em;
}
.case__next a{
  color:var(--muted);
  transition:color .2s var(--ease);
}
.case__next a:hover{color:var(--trace-lift)}

/* ── footer ─────────────────────────────────────────────────── */
.foot{border-top:1px solid var(--line);padding-block:2.5rem}
.foot__inner{
  display:flex;flex-wrap:wrap;align-items:center;
  justify-content:space-between;gap:1rem 2rem;
  font:400 .78rem/1 var(--mono);letter-spacing:.06em;
  color:var(--dim);
}
.foot__links{display:flex;gap:1.5rem}
.foot__links a{color:var(--muted);transition:color .2s var(--ease)}
.foot__links a:hover{color:var(--paper)}
.foot__name{color:var(--paper)}

/* ── motion ─────────────────────────────────────────────────── */
.reveal{
  opacity:0;
  transform:translateY(14px);
  transition:opacity .7s var(--ease),transform .7s var(--ease);
  transition-delay:calc(var(--d,0) * 90ms);
}
.reveal.is-in{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  html:focus-within{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-delay:0ms !important;
    transition-duration:.001ms !important;
  }
  .reveal{opacity:1;transform:none}
  .hero__grid{opacity:.85;animation:none}
}