/* Runtime-written custom properties, with defaults so the CSS is valid
   and correct even before (or without) JavaScript. */
:root{
  --i:0;    /* character index for the type-in stagger */
  --mx:50%; /* pointer position inside a tilted card */
  --my:50%;
  --tx:0;   /* same pointer, normalised to -0.5…0.5 for the hero canvas */
  --ty:0;
}

/* ═══ Motion states (driven by motion.js) ════════════════════════════════
   Content is hidden ONLY once the inline head script proves scripting is
   on (.js), and it is force-shown if the module never boots (.js-stalled).
   Without both guards a JS failure would render a blank page.          */
.js [data-reveal]{
  opacity:0;
  transform:translateY(26px);
  transition:opacity .8s var(--ease),transform .8s var(--ease);
}
.js [data-reveal].is-in,
.js-stalled [data-reveal]{opacity:1;transform:none;}

[data-type-in] .ch{
  display:inline-block;
  opacity:0;
  transform:translateY(.42em);
  filter:blur(8px);
  animation:ch-in .82s var(--ease) forwards;
  animation-delay:calc(var(--i) * 24ms);
}
@keyframes ch-in{to{opacity:1;transform:none;filter:blur(0);}}

@media (prefers-reduced-motion:reduce){
  .js [data-reveal]{opacity:1;transform:none;}
  [data-type-in] .ch{opacity:1;transform:none;filter:none;animation:none;}
}

/* ═══ Buttons ════════════════════════════════════════════════════════════ */
.btn{
  --btn-bg:var(--surface);
  --btn-fg:var(--text);
  --btn-bd:var(--border);
  display:inline-flex;
  align-items:center;
  gap:calc(var(--space)*1.25);
  padding:calc(var(--space)*1.75) calc(var(--space)*3.25);
  border:1px solid var(--btn-bd);
  border-radius:999px;
  background:var(--btn-bg);
  color:var(--btn-fg);
  font-family:var(--font-mono);
  font-size:var(--step--1);
  font-weight:500;
  letter-spacing:.12em;
  text-transform:uppercase;
  white-space:nowrap;
  will-change:transform;
  transition:border-color .35s var(--ease),background .35s var(--ease),
             box-shadow .35s var(--ease),color .35s var(--ease);
}
.btn:hover{
  --btn-bd:var(--green-line);
  --btn-bg:var(--green-soft);
  color:var(--green-hi);
}
.btn span{transition:transform .35s var(--ease);}
.btn:hover span{transform:translateX(3px);}

.btn--primary{
  --btn-bg:var(--green);
  --btn-fg:var(--bg);
  --btn-bd:var(--green);
  font-weight:700;
}
.btn--primary:hover{
  --btn-bg:var(--green-hi);
  --btn-bd:var(--green-hi);
  color:var(--bg);
  box-shadow:var(--glow);
}

.btn--sm{padding:calc(var(--space)*1.25) calc(var(--space)*2.5);font-size:.7rem;}

/* ═══ Card base ══════════════════════════════════════════════════════════ */
.card{
  position:relative;
  overflow:hidden;
  border:1px solid var(--border);
  border-radius:var(--radius);
  background:var(--surface);
  transform-style:preserve-3d;
  will-change:transform;
  transition:border-color .4s var(--ease),background .4s var(--ease),
             box-shadow .4s var(--ease);
}
.card:hover{
  border-color:var(--border-hi);
  background:var(--surface-hi);
}
.card::after{ /* pointer highlight, position from --mx/--my */
  content:'';
  position:absolute;
  inset:0;
  border-radius:inherit;
  pointer-events:none;
  opacity:0;
  background:radial-gradient(340px circle at var(--mx,50%) var(--my,50%),
             rgba(110,231,135,.14),transparent 62%);
  transition:opacity .4s var(--ease);
}
.card:hover::after{opacity:1;}

/* ═══ Discipline cards ═══════════════════════════════════════════════════ */
.cards{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:calc(var(--space)*2.5);
}
.card--skill{
  padding:calc(var(--space)*4);
  min-height:230px;
  display:flex;
  flex-direction:column;
}
.card--skill h3{margin:calc(var(--space)*2) 0 calc(var(--space)*1.5);}
.card--skill p{color:var(--muted);font-size:.95rem;margin:0;}
.card__num{
  color:var(--green);
  opacity:.65;
  letter-spacing:.2em;
}
.card--skill::before{
  content:'';
  position:absolute;
  left:0;top:calc(var(--space)*4);
  width:2px;height:0;
  background:var(--green);
  transition:height .5s var(--ease);
}
.card--skill:hover::before{height:calc(100% - var(--space)*8);}

/* ═══ About ══════════════════════════════════════════════════════════════ */
.about{
  display:grid;
  grid-template-columns:340px minmax(0,1fr);
  gap:calc(var(--space)*8);
  align-items:center;
}
.about__portrait{
  position:relative;
  border-radius:var(--radius);
  overflow:hidden;
  border:1px solid var(--border);
  background:var(--bg-soft);
  box-shadow:var(--glow);
}
.about__portrait img{width:100%;}
.about__ring{
  position:absolute;
  inset:0;
  border-radius:inherit;
  pointer-events:none;
  box-shadow:inset 0 0 0 1px var(--green-line),inset 0 -60px 90px -50px rgba(87,199,92,.5);
}
.facts{
  display:flex;
  flex-wrap:wrap;
  gap:calc(var(--space)*2);
  margin-top:calc(var(--space)*4);
  color:var(--muted);
}
.facts li{display:flex;align-items:center;gap:calc(var(--space)*2);}
.facts li:not(:last-child)::after{
  content:'';
  width:4px;height:4px;
  border-radius:50%;
  background:var(--green);
  opacity:.55;
}

/* ═══ Project cards ══════════════════════════════════════════════════════ */
.work{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:calc(var(--space)*3);
}
.card--tano{
  grid-column:1 / -1;
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,.58fr);
  align-items:stretch;
}
.card__plate{
  width:100%;
  height:100%;
  object-fit:contain;
  object-position:center;
  padding:calc(var(--space)*2);
  border-left:1px solid var(--border);
  mask-image:linear-gradient(90deg,transparent,black 16%);
}

.card__body{
  position:relative;
  padding:calc(var(--space)*5);
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:calc(var(--space)*2);
}
.card--tano .card__body{max-width:640px;padding:calc(var(--space)*7);}
.card__body p{color:var(--muted);margin:0;}
.card__logo{display:block;width:44px;height:44px;color:var(--green);filter:drop-shadow(var(--glow-sm));}
.card__logo svg{width:100%;height:100%;}
.card--tano h3{font-size:var(--step-2);}

.card__shot{
  width:100%;
  aspect-ratio:16/10;
  object-fit:cover;
  object-position:top center;
  border-bottom:1px solid var(--border);
  filter:saturate(.9);
  transition:transform .7s var(--ease),filter .5s var(--ease);
}
.card--work:hover .card__shot{transform:scale(1.03);filter:saturate(1.05);}

.card__actions{
  display:flex;
  flex-wrap:wrap;
  gap:calc(var(--space)*1.5);
  margin-top:calc(var(--space)*1.5);
}

/* ═══ Stats / counters ═══════════════════════════════════════════════════ */
.stats{
  display:flex;
  flex-wrap:wrap;
  gap:calc(var(--space)*5);
  margin:calc(var(--space)*1.5) 0;
}
.stats dt{color:var(--muted);margin-bottom:calc(var(--space)*.5);}
.stats dd{
  font-family:var(--font-display);
  font-weight:800;
  font-size:var(--step-2);
  line-height:1;
  color:var(--green-hi);
  letter-spacing:-.02em;
}

/* ═══ Chips ══════════════════════════════════════════════════════════════ */
.chips{
  display:flex;
  flex-wrap:wrap;
  gap:calc(var(--space)*1);
}
.chips li{
  padding:calc(var(--space)*.75) calc(var(--space)*1.75);
  border:1px solid var(--border);
  border-radius:999px;
  background:var(--surface);
  color:var(--muted);
  font-size:.68rem;
}

/* ═══ Contact tiles ══════════════════════════════════════════════════════ */
.tiles{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  gap:calc(var(--space)*2.5);
}
.tile{
  position:relative;
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  gap:calc(var(--space)*.5) calc(var(--space)*2.5);
  padding:calc(var(--space)*3.5) calc(var(--space)*6) calc(var(--space)*3.5) calc(var(--space)*3.5);
  border:1px solid var(--border);
  border-radius:var(--radius);
  background:var(--surface);
  will-change:transform;
  transition:border-color .4s var(--ease),background .4s var(--ease),
             box-shadow .4s var(--ease);
}
.tile:hover{
  border-color:var(--green-line);
  background:var(--surface-hi);
  box-shadow:var(--glow-sm);
}
.tile__icon{
  grid-row:1 / 3;
  display:grid;
  place-items:center;
  width:44px;height:44px;
  border-radius:12px;
  background:var(--green-soft);
  color:var(--green);
  transition:background .4s var(--ease),color .4s var(--ease);
}
.tile__icon svg{width:21px;height:21px;}
.tile:hover .tile__icon{background:var(--green);color:var(--bg);}
.tile__label{font-weight:700;align-self:end;line-height:1.3;}
.tile__meta{grid-column:2;font-size:.85rem;align-self:start;line-height:1.4;}
.tile__arrow{
  position:absolute;
  top:calc(var(--space)*3);
  right:calc(var(--space)*3);
  color:var(--muted);
  transition:transform .4s var(--ease),color .4s var(--ease);
}
.tile:hover .tile__arrow{transform:translate(3px,-3px);color:var(--green-hi);}

/* ═══ Hero poly card ═════════════════════════════════════════════════════ */
.poly-card{
  position:relative;
  aspect-ratio:1;
  border:1px solid var(--border);
  border-radius:var(--radius);
  background:
    radial-gradient(120% 100% at 50% 0%,rgba(87,199,92,.10),transparent 62%),
    var(--surface);
  overflow:hidden;
  box-shadow:var(--glow);
  transform-style:preserve-3d;
  will-change:transform;
  transition:transform .5s var(--ease);
}
.poly-card::before{
  content:'';
  position:absolute;
  inset:0;
  background-image:
    linear-gradient(rgba(232,242,236,.045) 1px,transparent 1px),
    linear-gradient(90deg,rgba(232,242,236,.045) 1px,transparent 1px);
  background-size:48px 48px;
  mask-image:radial-gradient(80% 80% at 50% 50%,black,transparent 78%);
}
#hero-poly{position:absolute;inset:0;width:100%;height:100%;}
.poly-card__tag{
  position:absolute;
  color:var(--muted);
  font-size:.6rem;
  opacity:.8;
}
.poly-card__tag--tl{top:calc(var(--space)*2.5);left:calc(var(--space)*2.5);}
.poly-card__tag--tr{top:calc(var(--space)*2.5);right:calc(var(--space)*2.5);}
.poly-card__tag--bl{bottom:calc(var(--space)*2.5);left:calc(var(--space)*2.5);}
.poly-card__tag--br{bottom:calc(var(--space)*2.5);right:calc(var(--space)*2.5);}

/* ═══ Module grid (TANO case) ════════════════════════════════════════════ */
.modules{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:calc(var(--space)*2.5);
}
.module{
  position:relative;
  padding:calc(var(--space)*4) calc(var(--space)*4) calc(var(--space)*4) calc(var(--space)*5);
  border:1px solid var(--border);
  border-radius:var(--radius);
  background:var(--surface);
  transition:border-color .4s var(--ease),background .4s var(--ease),
             transform .4s var(--ease);
}
.module::before{
  content:'';
  position:absolute;
  left:0;top:calc(var(--space)*4);bottom:calc(var(--space)*4);
  width:2px;
  background:var(--green);
  opacity:.35;
  transition:opacity .4s var(--ease);
}
.module:hover{border-color:var(--border-hi);background:var(--surface-hi);transform:translateY(-3px);}
.module:hover::before{opacity:1;}
.module__num{color:var(--green);opacity:.6;}
.module h3{margin:calc(var(--space)*1.5) 0 calc(var(--space)*.75);}
.module__sub{font-size:.92rem;margin-bottom:calc(var(--space)*2);}

/* ═══ Timeline ═══════════════════════════════════════════════════════════ */
.tl{
  position:relative;
  padding-left:calc(var(--space)*4);
  display:grid;
  gap:calc(var(--space)*5);
}
.tl::before{
  content:'';
  position:absolute;
  left:3px;top:6px;bottom:6px;
  width:1px;
  background:linear-gradient(var(--green),transparent);
}
.tl__node{position:relative;}
.tl__node::before{
  content:'';
  position:absolute;
  left:calc(var(--space)*-4);
  top:8px;
  width:7px;height:7px;
  border-radius:50%;
  background:var(--green);
  box-shadow:var(--glow-sm);
}
.tl__year{color:var(--green);margin-bottom:calc(var(--space)*1);}
.tl__node h3{margin-bottom:calc(var(--space)*1);}
.tl__node p{color:var(--muted);margin:0;max-width:58ch;}

/* ═══ Before / after pairs ═══════════════════════════════════════════════ */
.pairs{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:calc(var(--space)*2.5);
}
.pair{
  padding:calc(var(--space)*4);
  border:1px solid var(--border);
  border-radius:var(--radius);
  background:var(--surface);
}
.pair h3{margin-bottom:calc(var(--space)*1.5);font-size:var(--step-0);}
.pair p{color:var(--muted);margin:0;font-size:.95rem;}
.pair__tag{color:var(--green);margin-bottom:calc(var(--space)*2);}

/* ═══ Approach list ══════════════════════════════════════════════════════ */
.approach{
  display:grid;
  gap:calc(var(--space)*2);
  counter-reset:ap;
}
.approach li{
  position:relative;
  padding-left:calc(var(--space)*6);
  color:var(--muted);
  max-width:66ch;
}
.approach li::before{
  counter-increment:ap;
  content:counter(ap,decimal-leading-zero);
  position:absolute;
  left:0;top:.15em;
  font-family:var(--font-mono);
  font-size:var(--step--1);
  letter-spacing:.1em;
  color:var(--green);
}
.approach strong{color:var(--text);font-weight:700;}

/* ═══ Screenshot frame ═══════════════════════════════════════════════════ */
.shot{
  border:1px solid var(--border);
  border-radius:var(--radius);
  overflow:hidden;
  background:var(--bg-soft);
  box-shadow:var(--glow);
}
.shot img{width:100%;}
.shot figcaption{
  padding:calc(var(--space)*2) calc(var(--space)*3);
  border-top:1px solid var(--border);
  font-size:var(--step--1);
}

/* ═══ Credit note ════════════════════════════════════════════════════════ */
.credit{
  margin-top:calc(var(--space)*5);
  padding:calc(var(--space)*2.5) calc(var(--space)*3.5);
  border-left:2px solid var(--green);
  background:var(--green-soft);
  border-radius:0 var(--radius-sm) var(--radius-sm) 0;
  color:var(--text);
  letter-spacing:.1em;
  max-width:66ch;
}

/* ═══ CTA band ═══════════════════════════════════════════════════════════ */
.cta{
  position:relative;
  text-align:center;
  padding:calc(var(--space)*14) 0;
  background:
    radial-gradient(60% 120% at 50% 100%,rgba(87,199,92,.16),transparent 70%),
    var(--bg-soft);
  border-top:1px solid var(--border);
}
.cta h2{margin-bottom:calc(var(--space)*3);}
.cta p{color:var(--muted);max-width:52ch;margin-inline:auto;}
.cta__actions{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:calc(var(--space)*2);
  margin-top:calc(var(--space)*5);
}

/* ═══ 404 ════════════════════════════════════════════════════════════════ */
.nf{
  min-height:100svh;
  display:grid;
  place-content:center;
  text-align:center;
  gap:calc(var(--space)*3);
  padding:calc(var(--space)*4);
}
.nf h1{font-size:clamp(5rem,22vw,14rem);letter-spacing:-.05em;}
.nf p{color:var(--muted);}

/* ═══ Responsive ═════════════════════════════════════════════════════════ */
@media (max-width:900px){
  .about{grid-template-columns:1fr;gap:calc(var(--space)*5);}
  .about__portrait{max-width:300px;}
  .work{grid-template-columns:1fr;}
  .card--tano{grid-template-columns:1fr;}
  .card--tano .card__body{padding:calc(var(--space)*4);max-width:none;order:2;}
  .card__plate{
    order:1;
    height:auto;
    aspect-ratio:2.4;
    border-left:0;
    border-bottom:1px solid var(--border);
    mask-image:none;
  }
  .stats{gap:calc(var(--space)*3.5);}
}

@media (max-width:560px){
  .card__body,.card--skill,.module,.pair{padding:calc(var(--space)*3);}
  .module{padding-left:calc(var(--space)*4);}
  .tile{padding:calc(var(--space)*3);gap:calc(var(--space)*.5) calc(var(--space)*2);}
}