/* ============================================================
   TS-Digitalwerk — One-Pager Design System
   ============================================================ */

:root{
  /* Brand */
  --bg:            #2d2d2d;
  --bg-2:          #262626;
  --bg-3:          #212121;
  --surface:       #343434;
  --surface-2:     #3b3b3b;
  --line:          rgba(255,255,255,.09);
  --line-strong:   rgba(255,255,255,.16);

  --teal:          #00ACB5;
  --teal-bright:   #1ec7d0;
  --teal-dim:      rgba(0,172,181,.14);
  --amber:         #F59E0B;
  --amber-bright:  #ffb733;
  --amber-dim:     rgba(245,158,11,.14);

  --ink:           #f4f4f3;
  --ink-2:         #c8c9c9;
  --ink-3:         #8f9192;
  --ink-4:         #6a6c6d;

  /* role colors — overridden by tweaks */
  --accent:        var(--teal);
  --accent-bright: var(--teal-bright);
  --accent-2:      var(--amber);
  --accent-2-bright:var(--amber-bright);

  --font-display: 'Space Grotesk', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, monospace;

  --maxw: 1200px;
  --pad: clamp(20px, 5vw, 80px);
  --radius: 4px;
  --radius-lg: 8px;
  --ease: cubic-bezier(.22,.61,.36,1);
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; scroll-padding-top:84px; }

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font-display);
  font-size:17px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

::selection{ background:var(--accent); color:#06181a; }

a{ color:inherit; text-decoration:none; }
img{ display:block; max-width:100%; }
button{ font-family:inherit; cursor:pointer; }

h1,h2,h3,h4{ font-weight:600; letter-spacing:-.02em; line-height:1.05; margin:0; }

.wrap{ max-width:var(--maxw); margin:0 auto; padding-inline:var(--pad); }

/* Kicker / mono labels */
.kicker{
  font-family:var(--font-mono);
  font-size:13px;
  font-weight:500;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--accent-bright);
  display:inline-flex;
  align-items:center;
  gap:10px;
}
.kicker::before{
  content:'';
  width:26px; height:1px;
  background:var(--accent);
  display:inline-block;
}
.kicker .num{ color:var(--ink-4); }

/* Section scaffold */
.section{ position:relative; padding-block:clamp(72px,10vw,140px); }
.section-head{ max-width:760px; margin-bottom:clamp(40px,5vw,64px); }
.section-head h2{
  font-size:clamp(32px,5vw,56px);
  margin-top:20px;
}
.section-head p{
  color:var(--ink-2);
  font-size:clamp(16px,1.6vw,19px);
  margin:18px 0 0;
  max-width:60ch;
}

/* ---------- Buttons (all have hover) ---------- */
.btn{
  --bw:1px;
  position:relative;
  display:inline-flex; align-items:center; gap:10px;
  padding:14px 26px;
  font-family:var(--font-mono);
  font-size:14px; font-weight:500;
  letter-spacing:.04em;
  border:var(--bw) solid transparent;
  border-radius:var(--radius);
  background:transparent;
  color:var(--ink);
  transition:transform .25s var(--ease), background .25s var(--ease),
             color .25s var(--ease), border-color .25s var(--ease), box-shadow .25s var(--ease);
  overflow:hidden;
}
.btn svg{ transition:transform .25s var(--ease); }
.btn .arr{ transition:transform .3s var(--ease); }

.btn-primary{ background:var(--accent-2); color:#241600; font-weight:600; }
.btn-primary:hover{ background:var(--accent-2-bright); transform:translateY(-2px);
  box-shadow:0 10px 30px -10px var(--accent-2); }
.btn-primary:hover .arr{ transform:translateX(4px); }
.btn-primary:active{ transform:translateY(0); }

.btn-ghost{ border-color:var(--line-strong); color:var(--ink); }
.btn-ghost:hover{ border-color:var(--accent); color:var(--accent-bright);
  background:var(--teal-dim); transform:translateY(-2px); }
.btn-ghost:hover .arr{ transform:translateX(4px); }

.btn-solid-teal{ background:var(--accent); color:#04181a; font-weight:600; }
.btn-solid-teal:hover{ background:var(--accent-bright); transform:translateY(-2px);
  box-shadow:0 10px 30px -10px var(--accent); }

/* ============================================================
   NAV
   ============================================================ */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:50;
  transition:background .3s var(--ease), border-color .3s var(--ease), backdrop-filter .3s;
  border-bottom:1px solid transparent;
}
.nav.scrolled{
  background:rgba(33,33,33,.82);
  backdrop-filter:blur(14px) saturate(1.2);
  border-bottom-color:var(--line);
}
.nav-inner{ display:flex; align-items:center; justify-content:space-between;
  height:72px; max-width:var(--maxw); margin:0 auto; padding-inline:var(--pad); }
.brand{ display:flex; align-items:center; gap:12px; }
.brand img{ height:38px; width:auto; }
.brand .bname{ font-weight:600; font-size:18px; letter-spacing:-.01em; }
.brand .bname b{ color:var(--accent-bright); font-weight:600; }
.nav-links{ display:flex; align-items:center; gap:6px; }
.nav-links a{
  font-family:var(--font-mono); font-size:13.5px; letter-spacing:.02em;
  color:var(--ink-2); padding:8px 14px; border-radius:var(--radius);
  position:relative; transition:color .2s var(--ease);
}
.nav-links a::after{
  content:''; position:absolute; left:14px; right:14px; bottom:4px; height:1px;
  background:var(--accent); transform:scaleX(0); transform-origin:left;
  transition:transform .28s var(--ease);
}
.nav-links a:hover{ color:var(--ink); }
.nav-links a:hover::after{ transform:scaleX(1); }
.nav-cta{ margin-left:8px; }
.nav-burger{ display:none; background:none; border:0; color:var(--ink); padding:8px; }

@media (max-width:880px){
  .nav-links{ display:none; }
  .nav-burger{ display:block; }
  .nav-links.open{
    display:flex; position:absolute; top:72px; left:0; right:0; flex-direction:column;
    align-items:stretch; gap:0; background:rgba(28,28,28,.97); backdrop-filter:blur(14px);
    border-bottom:1px solid var(--line); padding:10px var(--pad) 18px;
  }
  .nav-links.open a{ padding:14px 6px; border-bottom:1px solid var(--line); }
  .nav-links.open .nav-cta{ margin:12px 0 0; }
}

/* ============================================================
   HERO
   ============================================================ */
.hero{ position:relative; min-height:100svh; display:flex; align-items:center;
  padding-top:72px; overflow:hidden; }
.hero-bg{ position:absolute; inset:0; z-index:0; pointer-events:none; }
.hero-glow{
  position:absolute; z-index:0; pointer-events:none;
  width:60vw; height:60vw; max-width:760px; max-height:760px; border-radius:50%;
  filter:blur(90px); opacity:.5;
}
.hero-glow.g1{ top:-12%; right:-8%; background:radial-gradient(circle, var(--teal-dim), transparent 70%); }
.hero-glow.g2{ bottom:-18%; left:-10%; background:radial-gradient(circle, var(--amber-dim), transparent 70%); }
.hero-inner{ position:relative; z-index:2; max-width:980px; }
.hero .kicker{ margin-bottom:26px; }
.hero h1{
  font-size:clamp(40px,8vw,92px);
  line-height:1.0;
  letter-spacing:-.035em;
  font-weight:600;
}
.hero h1 .line2{ display:block; margin-top:.12em; }
.type-wrap{ color:var(--accent-bright); position:relative; }
.caret{
  display:inline-block; width:.06em; min-width:3px; height:.92em; margin-left:.06em;
  background:var(--accent-2); transform:translateY(.12em);
  animation:blink 1s steps(1) infinite;
}
@keyframes blink{ 50%{ opacity:0; } }
.hero p.lead{ color:var(--ink-2); font-size:clamp(17px,2vw,21px); max-width:54ch; margin:30px 0 0; }
.hero-cta{ display:flex; flex-wrap:wrap; gap:14px; margin-top:40px; }
.hero-stats{ display:flex; gap:clamp(24px,4vw,56px); margin-top:64px; flex-wrap:wrap; }
.hero-stat .v{ font-size:clamp(28px,3.4vw,40px); font-weight:600; letter-spacing:-.02em; }
.hero-stat .v b{ color:var(--accent-bright); font-weight:600; }
.hero-stat .l{ font-family:var(--font-mono); font-size:12px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--ink-3); margin-top:6px; }
.scroll-ind{ position:absolute; bottom:26px; left:50%; transform:translateX(-50%);
  z-index:2; font-family:var(--font-mono); font-size:11px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--ink-4); display:flex; flex-direction:column;
  align-items:center; gap:10px; }
.scroll-ind .bar{ width:1px; height:42px; background:linear-gradient(var(--accent),transparent);
  animation:scrolldrop 2s var(--ease) infinite; }
@keyframes scrolldrop{ 0%{ transform:scaleY(0); transform-origin:top; } 
  40%{ transform:scaleY(1); transform-origin:top; }
  60%{ transform:scaleY(1); transform-origin:bottom; }
  100%{ transform:scaleY(0); transform-origin:bottom; } }

/* circuit svg */
.circuit-path{ fill:none; stroke:var(--accent); stroke-width:1.2; opacity:.18; }
.circuit-node{ fill:var(--accent); opacity:.22; }
.circuit-dot{ fill:var(--accent-2-bright); }

/* ============================================================
   TEAM — flip cards
   ============================================================ */
.team-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
@media (max-width:860px){ .team-grid{ grid-template-columns:1fr; max-width:380px; margin-inline:auto; } }

.flip{ perspective:1600px; height:440px; }
.flip-inner{ position:relative; width:100%; height:100%; transition:transform .7s var(--ease);
  transform-style:preserve-3d; }
.flip:hover .flip-inner, .flip.flipped .flip-inner{ transform:rotateY(180deg); }
.flip-face{ position:absolute; inset:0; backface-visibility:hidden;
  border:1px solid var(--line); border-radius:var(--radius-lg); overflow:hidden;
  background:var(--surface); display:flex; flex-direction:column; }
.flip-front{ }
.flip-back{ transform:rotateY(180deg); background:
  linear-gradient(160deg,#2f2f2f, #242424); padding:30px 28px; justify-content:space-between; }

.avatar{ position:relative; height:268px; display:flex; align-items:center; justify-content:center;
  background:
    radial-gradient(120% 120% at 50% 0%, rgba(0,172,181,.16), transparent 60%),
    linear-gradient(180deg,#373737,#2c2c2c);
  overflow:hidden; }
.avatar .mono{ font-family:var(--font-mono); font-weight:700; font-size:84px; letter-spacing:-.04em;
  background:linear-gradient(140deg,var(--teal-bright),var(--amber-bright));
  -webkit-background-clip:text; background-clip:text; color:transparent; z-index:2; }
.avatar .ph-tag{ position:absolute; bottom:12px; left:50%; transform:translateX(-50%);
  font-family:var(--font-mono); font-size:10px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink-4); z-index:2; }
.avatar .grid-lines{ position:absolute; inset:0; opacity:.5;
  background-image:linear-gradient(var(--line) 1px,transparent 1px),
    linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:28px 28px; mask-image:radial-gradient(120% 90% at 50% 40%,#000,transparent 75%); }
.flip-front .info{ padding:20px 24px 24px; flex:1; display:flex; flex-direction:column; }
.flip-front .nm{ font-size:23px; font-weight:600; }
.flip-front .rl{ font-family:var(--font-mono); font-size:12.5px; color:var(--accent-bright);
  letter-spacing:.04em; margin-top:7px; }
.flip-front .hint{ margin-top:auto; font-family:var(--font-mono); font-size:11px;
  letter-spacing:.1em; text-transform:uppercase; color:var(--ink-4); display:flex; align-items:center; gap:8px; }
.flip:hover .flip-front .hint .rot, .flip.flipped .flip-front .hint .rot{ transform:rotate(180deg); }
.flip-front .hint .rot{ transition:transform .5s var(--ease); }

.flip-back .bk-name{ font-size:20px; font-weight:600; }
.flip-back .bk-role{ font-family:var(--font-mono); font-size:11.5px; color:var(--accent-bright);
  letter-spacing:.04em; margin-top:4px; margin-bottom:18px; }
.flip-back .bk-row{ display:flex; gap:10px; align-items:baseline; padding:9px 0; border-top:1px solid var(--line); }
.flip-back .bk-row .lab{ font-family:var(--font-mono); font-size:10.5px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--ink-4); width:78px; flex-shrink:0; }
.flip-back .bk-row .val{ color:var(--ink); font-size:14.5px; }
.flip-back .socials{ display:flex; gap:8px; margin-top:18px; }
.soc{ width:38px; height:38px; display:grid; place-items:center; border:1px solid var(--line-strong);
  border-radius:var(--radius); color:var(--ink-2); transition:all .22s var(--ease); }
.soc:hover{ color:#06181a; background:var(--accent); border-color:var(--accent); transform:translateY(-3px); }
.soc svg{ width:17px; height:17px; }

/* ============================================================
   ACCORDION (services + projects)
   ============================================================ */
.acc{ border-top:1px solid var(--line); }
.acc-item{ border-bottom:1px solid var(--line); }
.acc-head{ width:100%; background:none; border:0; color:inherit; text-align:left;
  display:flex; align-items:center; gap:20px; padding:26px 4px; transition:padding .3s var(--ease); }
.acc-head:hover{ padding-left:14px; }
.acc-num{ font-family:var(--font-mono); font-size:13px; color:var(--ink-4); width:34px; flex-shrink:0;
  transition:color .25s var(--ease); }
.acc-head:hover .acc-num{ color:var(--accent-bright); }
.acc-icon{ width:26px; height:26px; flex-shrink:0; color:var(--accent); transition:transform .3s var(--ease); }
.acc-head:hover .acc-icon{ transform:scale(1.12); }
.acc-title{ flex:1; font-size:clamp(19px,2.4vw,26px); font-weight:600; letter-spacing:-.01em; }
.acc-plus{ position:relative; width:22px; height:22px; flex-shrink:0; }
.acc-plus::before,.acc-plus::after{ content:''; position:absolute; background:var(--ink-2);
  transition:transform .35s var(--ease), background .25s; }
.acc-plus::before{ top:50%; left:0; right:0; height:2px; transform:translateY(-50%); }
.acc-plus::after{ left:50%; top:0; bottom:0; width:2px; transform:translateX(-50%); }
.acc-item.open .acc-plus::after{ transform:translateX(-50%) scaleY(0); }
.acc-item.open .acc-plus::before{ background:var(--accent-bright); }
.acc-item.open .acc-title{ color:var(--accent-bright); }
.acc-panel{ overflow:hidden; height:0; transition:height .42s var(--ease); }
.acc-body{ padding:0 4px 30px 54px; max-width:72ch; }
.acc-body p{ margin:0 0 14px; color:var(--ink-2); }
.acc-tags{ display:flex; flex-wrap:wrap; gap:8px; margin-top:6px; }
.tag{ font-family:var(--font-mono); font-size:11.5px; letter-spacing:.04em; color:var(--ink-2);
  border:1px solid var(--line-strong); border-radius:100px; padding:5px 12px; transition:all .2s var(--ease); }
.tag:hover{ border-color:var(--accent); color:var(--accent-bright); }
@media (max-width:600px){ .acc-body{ padding-left:4px; } .acc-head{ gap:12px; } .acc-icon{ display:none; } }

/* ============================================================
   PROJECTS
   ============================================================ */
.proj-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:20px; }
@media (max-width:760px){ .proj-grid{ grid-template-columns:1fr; } }
.proj{ border:1px solid var(--line); border-radius:var(--radius-lg); background:var(--surface);
  overflow:hidden; transition:border-color .3s var(--ease), transform .3s var(--ease); }
.proj:hover{ border-color:var(--line-strong); transform:translateY(-3px); }
.proj.open{ border-color:var(--accent); }
.proj-head{ width:100%; background:none; border:0; color:inherit; text-align:left;
  padding:26px 26px; display:flex; flex-direction:column; gap:16px; }
.proj-top{ display:flex; align-items:center; justify-content:space-between; gap:14px; }
.badge{ font-family:var(--font-mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase;
  padding:5px 11px; border-radius:100px; display:inline-flex; align-items:center; gap:7px; }
.badge .dot{ width:7px; height:7px; border-radius:50%; }
.badge.live{ color:var(--teal-bright); background:var(--teal-dim); }
.badge.live .dot{ background:var(--teal-bright); box-shadow:0 0 0 0 rgba(30,199,208,.6); animation:pulse 2s infinite; }
.badge.wip{ color:var(--amber-bright); background:var(--amber-dim); }
.badge.wip .dot{ background:var(--amber-bright); }
@keyframes pulse{ 70%{ box-shadow:0 0 0 7px rgba(30,199,208,0); } 100%{ box-shadow:0 0 0 0 rgba(30,199,208,0); } }
.proj h3{ font-size:clamp(20px,2.4vw,27px); font-weight:600; }
.proj-meta{ display:flex; align-items:center; gap:10px; font-family:var(--font-mono);
  font-size:12px; color:var(--ink-3); }
.proj .chev{ margin-left:auto; transition:transform .35s var(--ease); color:var(--ink-3); }
.proj.open .chev{ transform:rotate(180deg); color:var(--accent-bright); }
.proj-panel{ overflow:hidden; height:0; transition:height .42s var(--ease); }
.proj-body{ padding:0 26px 28px; }
.proj-body p{ color:var(--ink-2); margin:0 0 18px; }
.proj-body .pb-line{ display:flex; gap:12px; padding:11px 0; border-top:1px solid var(--line);
  font-size:14.5px; }
.proj-body .pb-line .k{ font-family:var(--font-mono); font-size:11px; letter-spacing:.08em;
  text-transform:uppercase; color:var(--ink-4); width:96px; flex-shrink:0; }

/* ============================================================
   CONTACT
   ============================================================ */
.contact-grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(32px,5vw,72px); align-items:start; }
@media (max-width:840px){ .contact-grid{ grid-template-columns:1fr; } }
.form-row{ margin-bottom:20px; }
.form-row label{ display:block; font-family:var(--font-mono); font-size:12px; letter-spacing:.08em;
  text-transform:uppercase; color:var(--ink-3); margin-bottom:9px; }
.form-row label .req{ color:var(--accent-2); }
.field{ width:100%; background:var(--bg-3); border:1px solid var(--line-strong); border-radius:var(--radius);
  color:var(--ink); font-family:var(--font-display); font-size:16px; padding:14px 16px;
  transition:border-color .22s var(--ease), background .22s, box-shadow .22s; }
.field::placeholder{ color:var(--ink-4); }
.field:focus{ outline:none; border-color:var(--accent); background:#1d1d1d;
  box-shadow:0 0 0 3px var(--teal-dim); }
textarea.field{ resize:vertical; min-height:140px; }
.form-row.invalid .field{ border-color:#e0564a; box-shadow:0 0 0 3px rgba(224,86,74,.14); }
.err-msg{ color:#ff8a7e; font-size:12.5px; font-family:var(--font-mono); margin-top:7px; display:none; }
.form-row.invalid .err-msg{ display:block; }
.form-foot{ display:flex; align-items:center; gap:18px; flex-wrap:wrap; }
.form-note{ font-family:var(--font-mono); font-size:11.5px; color:var(--ink-4); max-width:30ch; }
.form-success{ border:1px solid var(--accent); background:var(--teal-dim); border-radius:var(--radius-lg);
  padding:28px; display:flex; gap:16px; align-items:flex-start; }
.form-success svg{ color:var(--accent-bright); flex-shrink:0; }
.form-success h4{ font-size:19px; margin-bottom:6px; }
.form-success p{ color:var(--ink-2); margin:0; font-size:15px; }

.contact-aside .ci{ display:flex; gap:16px; padding:20px 0; border-top:1px solid var(--line); }
.contact-aside .ci:last-child{ border-bottom:1px solid var(--line); }
.contact-aside .ci .ic{ width:40px; height:40px; border:1px solid var(--line-strong); border-radius:var(--radius);
  display:grid; place-items:center; color:var(--accent-bright); flex-shrink:0; transition:all .22s var(--ease); }
.contact-aside .ci:hover .ic{ background:var(--teal-dim); border-color:var(--accent); }
.contact-aside .ci .lab{ font-family:var(--font-mono); font-size:11px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--ink-4); }
.contact-aside .ci .val{ font-size:15.5px; margin-top:3px; }
.contact-aside .ci a.val:hover{ color:var(--accent-bright); }
.aside-socials{ display:flex; gap:10px; margin-top:26px; }

/* ============================================================
   FOOTER
   ============================================================ */
.footer{ border-top:1px solid var(--line); background:var(--bg-3); padding-block:56px 30px; }
.footer-top{ display:flex; justify-content:space-between; gap:40px; flex-wrap:wrap; margin-bottom:44px; }
.footer-brand{ max-width:320px; }
.footer-brand img{ height:44px; margin-bottom:18px; }
.footer-brand p{ color:var(--ink-3); font-size:14.5px; margin:0; }
.footer-cols{ display:flex; gap:clamp(36px,6vw,80px); flex-wrap:wrap; }
.footer-col h5{ font-family:var(--font-mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-4); margin:0 0 16px; font-weight:500; }
.footer-col a{ display:block; color:var(--ink-2); font-size:14.5px; padding:6px 0;
  transition:color .2s var(--ease), transform .2s var(--ease); }
.footer-col a:hover{ color:var(--accent-bright); transform:translateX(4px); }
.footer-bottom{ display:flex; justify-content:space-between; gap:18px; flex-wrap:wrap;
  padding-top:26px; border-top:1px solid var(--line); }
.footer-bottom span{ font-family:var(--font-mono); font-size:12px; color:var(--ink-4); }
.footer-bottom .fb-links{ display:flex; gap:22px; }
.footer-bottom .fb-links a{ font-family:var(--font-mono); font-size:12px; color:var(--ink-3); transition:color .2s; }
.footer-bottom .fb-links a:hover{ color:var(--accent-bright); }

/* tweaks: uniform section background */
body.uniform-bg #leistungen, body.uniform-bg #kontakt{ background:var(--bg) !important; }

/* reveal on scroll */
.reveal{ opacity:0; transform:translateY(28px); transition:opacity .7s var(--ease), transform .7s var(--ease); }
.reveal[data-in]{ opacity:1; transform:none; }

/* staggered fade-in for grids / lists */
.fade-up{ opacity:0; transform:translateY(22px);
  transition:opacity .65s var(--ease), transform .65s var(--ease); }
.fade-up[data-in]{ opacity:1; transform:none; }
.team-grid .fade-up:nth-child(1){ transition-delay:.05s; }
.team-grid .fade-up:nth-child(2){ transition-delay:.16s; }
.team-grid .fade-up:nth-child(3){ transition-delay:.27s; }
.acc .fade-up:nth-child(1){ transition-delay:.04s; }
.acc .fade-up:nth-child(2){ transition-delay:.10s; }
.acc .fade-up:nth-child(3){ transition-delay:.16s; }
.acc .fade-up:nth-child(4){ transition-delay:.22s; }
.acc .fade-up:nth-child(5){ transition-delay:.28s; }
.acc .fade-up:nth-child(6){ transition-delay:.34s; }
.proj-grid .fade-up:nth-child(1){ transition-delay:.05s; }
.proj-grid .fade-up:nth-child(2){ transition-delay:.14s; }
.proj-grid .fade-up:nth-child(3){ transition-delay:.23s; }
.proj-grid .fade-up:nth-child(4){ transition-delay:.32s; }
.proj-grid .fade-up:nth-child(5){ transition-delay:.41s; }
.proj-grid .fade-up:nth-child(6){ transition-delay:.50s; }

/* hero entrance fades */
@keyframes heroFade{ from{ opacity:0; transform:translateY(24px); } to{ opacity:1; transform:none; } }
.hero-anim{ opacity:0; animation:heroFade .9s var(--ease) forwards; }
.hero-anim.d1{ animation-delay:.05s; }
.hero-anim.d2{ animation-delay:.20s; }
.hero-anim.d3{ animation-delay:.35s; }
.hero-anim.d4{ animation-delay:.50s; }
.hero-anim.d5{ animation-delay:.65s; }

@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.001ms !important; transition-duration:.01ms !important; }
  .reveal, .fade-up{ opacity:1; transform:none; }
  .hero-anim{ opacity:1; animation:none; }
}