/* =========================================================
   Jaramiyo — jaramiyo.com
   Paleta: cacao oscuro + rosa palo · Concepto: navegador de servidores
   ========================================================= */

:root{
  --ink:        #1B1216;
  --surface:    #271B20;
  --surface-2:  #34252B;
  --line:       #45333A;
  --rose:       #EDB2C2;
  --rose-hot:   #D9738F;
  --lilac:      #A392C0;
  --cream:      #F6EAE6;
  --muted:      #BFA3A8;
  --online:     #8FD9A8;
  --dev:        #E8C88F;

  --on-rose:        #2A1218;   /* texto sobre rosa */
  --piece-bg:       #160E12;   /* fondo de capturas 3D */
  --black:          #000;      /* letterbox de vídeo */
  --topbar-bg:        rgba(27,18,22,.86);
  --topbar-bg-scroll: rgba(27,18,22,.94);
  --scrim:          rgba(10,6,8,.9);      /* overlay lightbox */
  --console-bg:     rgba(20,12,16,.97);
  --online-glow:    rgba(143,217,168,.6);
  --rose-glow:      rgba(237,178,194,.30);
  --rose-glow-2:    rgba(237,178,194,.4);
  --blob-rose-hot:  rgba(217,115,143,.5);
  --blob-lilac:     rgba(163,146,192,.45);
  --shadow-soft:    rgba(0,0,0,.5);
  --shadow-strong:  rgba(0,0,0,.55);

  --display: "Baloo 2", system-ui, sans-serif;
  --body:    "Karla", system-ui, sans-serif;
  --mono:    "JetBrains Mono", ui-monospace, monospace;

  --radius: 18px;
  --shadow: 4px 4px 0 var(--line);
  --wrap: 1140px;
}

*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; scroll-padding-top:84px; }

body{
  margin:0;
  background:var(--ink);
  color:var(--cream);
  font-family:var(--body);
  font-size:17px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}

img{ max-width:100%; height:auto; display:block; }

a{ color:var(--rose); text-decoration:none; }
a:hover{ color:var(--rose-hot); }

:focus-visible{
  outline:3px solid var(--rose);
  outline-offset:3px;
  border-radius:6px;
}

.skip{
  position:absolute; left:-999px; top:0; z-index:100;
  background:var(--rose); color:var(--ink); padding:10px 16px; font-weight:700;
}
.skip:focus{ left:12px; top:12px; }

.wrap{ width:min(var(--wrap), calc(100% - 48px)); margin-inline:auto; }

/* ---------- Tipografía ---------- */
h1,h2,h3{ font-family:var(--display); line-height:1.15; margin:0 0 .5em; }
h2{ font-size:clamp(1.7rem, 3.4vw, 2.5rem); font-weight:700; }
h3{ font-size:1.2rem; font-weight:700; }

.eyebrow{
  font-family:var(--mono);
  font-size:.75rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--lilac);
  margin:0 0 .6rem;
}

.section__title{ margin-bottom:.3em; }
.section__sub{ color:var(--muted); margin:0 0 2.4rem; max-width:52ch; }

/* ---------- Topbar ---------- */
.topbar{
  position:sticky; top:0; z-index:50;
  background:var(--topbar-bg);
  backdrop-filter:blur(12px);
  border-bottom:1px solid transparent;
  transition:border-color .25s ease, background .25s ease;
}
.topbar.is-scrolled{
  border-bottom-color:var(--line);
  background:var(--topbar-bg-scroll);
}
.topbar__inner{
  display:flex; align-items:center; gap:24px;
  min-height:68px;
}
.brand{
  display:flex; align-items:center; gap:10px;
  font-family:var(--display); font-weight:800; font-size:1.25rem;
  color:var(--cream);
}
.brand img{ border-radius:50%; border:2px solid var(--rose); }
.brand:hover{ color:var(--rose); }

.nav{ display:flex; gap:22px; margin-left:auto; }
.nav a{
  color:var(--muted); font-size:.95rem; font-weight:500;
  padding:4px 0; border-bottom:2px solid transparent;
}
.nav a:hover{ color:var(--cream); border-bottom-color:var(--rose); }

.pill{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--mono); font-size:.72rem; letter-spacing:.06em;
  padding:7px 13px; border-radius:999px;
  border:1px solid var(--line); background:var(--surface); color:var(--cream);
}
.pill--live:hover{ border-color:var(--rose); color:var(--cream); }
.dot{
  width:8px; height:8px; border-radius:50%;
  background:var(--online);
  box-shadow:0 0 0 0 var(--online-glow);
  animation:pulse 2.4s infinite;
}
@keyframes pulse{
  70%{ box-shadow:0 0 0 8px transparent; }
  100%{ box-shadow:0 0 0 0 transparent; }
}

/* ---------- Botones ---------- */
.btn{
  display:inline-block;
  font-family:var(--display); font-weight:700; font-size:1rem;
  padding:12px 24px; border-radius:999px;
  transition:transform .15s ease, box-shadow .15s ease;
}
.btn--solid{
  background:var(--rose); color:var(--on-rose);
  box-shadow:3px 3px 0 var(--rose-hot);
}
.btn--solid:hover{ color:var(--on-rose); transform:translate(-2px,-2px); box-shadow:5px 5px 0 var(--rose-hot); }
.btn--ghost{
  border:2px solid var(--line); color:var(--cream);
}
.btn--ghost:hover{ border-color:var(--rose); color:var(--cream); }
.btn.is-disabled{ opacity:.5; pointer-events:none; cursor:not-allowed; }

/* ---------- Hero ---------- */
.hero{ padding:72px 0 96px; position:relative; overflow:hidden; }
.hero__grid{
  display:grid; grid-template-columns:1.05fr .95fr;
  gap:48px; align-items:center;
}
.hero__name{
  font-size:clamp(3.4rem, 9vw, 6.2rem);
  font-weight:800;
  letter-spacing:-.02em;
  margin:0 0 .15em;
  background:linear-gradient(100deg, var(--cream) 10%, var(--rose) 40%, var(--lilac) 60%, var(--cream) 90%);
  background-size:220% auto;
  -webkit-background-clip:text; background-clip:text; color:transparent;
  animation:nameSheen 8s linear infinite;
}
@keyframes nameSheen{
  to{ background-position:220% center; }
}
.hero__line{ font-size:1.15rem; color:var(--muted); max-width:44ch; margin:0 0 1.8rem; }

.ticker{
  display:flex; flex-wrap:wrap; gap:8px;
  list-style:none; padding:0; margin:0 0 2rem;
}
.ticker li{
  font-family:var(--mono); font-size:.74rem;
  padding:5px 11px; border-radius:8px;
  background:var(--surface); border:1px solid var(--line); color:var(--muted);
}

.hero__cta{ display:flex; flex-wrap:wrap; gap:14px; }

.hero__art{ position:relative; justify-self:center; }
.hero__art img{ position:relative; max-height:600px; width:auto; }
.glow{
  position:absolute; inset:8% 4% 12%;
  background:radial-gradient(circle at 50% 45%, var(--rose-glow), transparent 68%);
  filter:blur(28px);
}

/* ---------- Secciones ---------- */
.section{ padding:88px 0; }
.section--alt{ background:var(--surface); border-block:1px solid var(--line); }

/* ---------- Sobre mí ---------- */
.about{
  display:grid; grid-template-columns:380px 1fr; gap:56px; align-items:center;
}
.about__img img{
  border-radius:var(--radius);
  border:1px solid var(--line);
  background:var(--surface);
}
.about__text p{ color:var(--muted); }

.chips{ display:flex; flex-wrap:wrap; gap:8px; margin-top:1.4rem; }
.chip{
  font-family:var(--mono); font-size:.74rem;
  padding:6px 12px; border-radius:999px;
  background:var(--surface-2); color:var(--rose);
  border:1px solid var(--line);
}

/* ---------- Paneles ---------- */
.panel{
  position:relative;
  background:var(--ink);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:28px;
  box-shadow:var(--shadow);
  overflow:hidden;
}
.section--alt .panel{ background:var(--ink); }
.panel h3{ color:var(--rose); }
.panel__mascot{
  position:absolute; right:-14px; bottom:-14px;
  width:150px; opacity:.5; pointer-events:none;
}

.stack{ display:grid; grid-template-columns:repeat(2,1fr); gap:22px; }

.list{ margin:0; padding-left:0; list-style:none; }
.list li{
  position:relative; padding-left:20px; margin-bottom:.6rem;
  color:var(--muted); font-size:.95rem;
}
.list li::before{
  content:""; position:absolute; left:0; top:.62em;
  width:7px; height:7px; border-radius:2px;
  background:var(--rose); transform:rotate(45deg);
}

/* ---------- Navegador de servidores (firma) ---------- */
.browser{
  list-style:none; margin:0; padding:0;
  border:1px solid var(--line); border-radius:var(--radius);
  overflow:hidden;
  background:var(--surface);
}
.server{
  display:grid;
  grid-template-columns:44px 1fr 210px;
  gap:18px; align-items:center;
  padding:20px 22px;
  border-bottom:1px solid var(--line);
  transition:background .18s ease;
}
.server:last-child{ border-bottom:0; }
.server:hover{ background:var(--surface-2); }
.server h3{ margin:0 0 .25em; font-size:1.08rem; }
.server p{ margin:0; color:var(--muted); font-size:.92rem; }

.server__status{ display:flex; justify-content:center; }
.server__meta{ text-align:right; }
.server__meta code{
  display:block; font-family:var(--mono); font-size:.72rem;
  color:var(--lilac); margin-bottom:6px;
}
.state{
  font-family:var(--mono); font-size:.68rem;
  letter-spacing:.05em; text-transform:uppercase;
}

.is-online .dot{ background:var(--online); }
.is-online .state{ color:var(--online); }
.is-dev .dot{ background:var(--dev); animation:none; }
.is-dev .state{ color:var(--dev); }
.is-paused .dot{ background:var(--muted); animation:none; }
.is-paused .state{ color:var(--muted); }

/* ---------- Servicios ---------- */
.services{ display:grid; grid-template-columns:repeat(auto-fit, minmax(290px,1fr)); gap:22px; }
.panel--service{ display:flex; flex-direction:column; }
.panel--service .btn{ align-self:flex-start; margin-top:auto; padding-top:12px; }
.panel--service .list{ margin-bottom:1.6rem; }

/* ---------- Piezas 3D ---------- */
.pieces{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(min(300px,100%),1fr));
  gap:22px;
}
.piece{
  margin:0;
  background:var(--ink);
  border:1px solid var(--line);
  border-radius:var(--radius);
  overflow:hidden;
  box-shadow:var(--shadow);
  display:flex; flex-direction:column;
}
.piece > img{
  /* capturas del viewport de Blender en 16:9 -> contain sobre fondo oscuro,
     con cover se recortarían */
  width:100%; aspect-ratio:16/9; object-fit:contain;
  border-bottom:1px solid var(--line);
  background:var(--piece-bg);
  cursor:zoom-in;
}
.piece figcaption{ padding:20px 22px 22px; }
.piece h3{ margin:0 0 .35em; font-size:1.05rem; color:var(--rose); }
.piece p{ margin:0 0 .9rem; color:var(--muted); font-size:.9rem; }
.piece code{
  font-family:var(--mono); font-size:.7rem; color:var(--lilac);
  letter-spacing:.03em;
}

/* ---------- Galería ---------- */
.gallery{
  display:grid; grid-template-columns:repeat(3,1fr); gap:18px;
}
.gallery__item{
  margin:0; border-radius:var(--radius); overflow:hidden;
  border:1px solid var(--line); background:var(--surface);
  aspect-ratio:1/1;
}
.gallery__item img{
  width:100%; height:100%; object-fit:cover;
  transition:transform .35s ease;
}
.gallery__item:hover img{ transform:scale(1.05); }

/* ---------- Contacto ---------- */
.section--contact{ background:var(--surface); border-top:1px solid var(--line); }
.contact{ display:grid; grid-template-columns:1fr 340px; gap:56px; align-items:center; }
.contact p{ color:var(--muted); max-width:48ch; }

.links{ list-style:none; padding:0; margin:1.8rem 0 0; display:grid; gap:10px; }
.links a{
  display:inline-block;
  font-family:var(--display); font-weight:600; font-size:1.05rem;
  color:var(--cream);
  border-bottom:2px solid transparent;
}
.links a:hover{ color:var(--rose); border-bottom-color:var(--rose); }
.links code{ font-family:var(--mono); font-size:.82rem; color:var(--lilac); }

/* ---------- Footer ---------- */
.footer{ padding:36px 0; border-top:1px solid var(--line); }
.footer__inner{ display:flex; align-items:center; justify-content:space-between; gap:24px; }
.footer__stickers{ max-width:240px; opacity:.85; }
.footer p{ font-family:var(--mono); font-size:.76rem; color:var(--muted); margin:0; }

/* ---------- Reveal ---------- */
.reveal{ opacity:0; transform:translateY(22px); }
.reveal.is-in{ opacity:1; transform:none; transition:opacity .6s ease, transform .6s ease; }

/* ---------- Menú móvil ---------- */
.nav-toggle{
  display:none;                 /* oculto en escritorio */
  width:44px; height:44px;
  align-items:center; justify-content:center;
  padding:0; border:0; background:transparent;
  color:var(--cream); cursor:pointer;
}
.nav-toggle:hover{ color:var(--rose); }
.nav-toggle__bars,
.nav-toggle__bars::before,
.nav-toggle__bars::after{
  content:""; display:block;
  width:24px; height:2px; border-radius:2px;
  background:currentColor;
  transition:transform .2s ease, opacity .2s ease;
}
.nav-toggle__bars{ position:relative; }
.nav-toggle__bars::before{ position:absolute; left:0; top:-7px; }
.nav-toggle__bars::after{  position:absolute; left:0; top:7px; }
/* estado abierto: las barras forman una X */
.nav-toggle[aria-expanded="true"] .nav-toggle__bars{ background:transparent; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::before{ transform:translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::after{ transform:translateY(-7px) rotate(-45deg); }

.mobile-menu{
  position:fixed; inset:0; z-index:40;   /* bajo la topbar (z-50): la X sigue accesible */
  display:flex; align-items:center; justify-content:center;
  background:var(--ink);
  animation:menuIn .2s ease;
}
.mobile-menu[hidden]{ display:none; }
.mobile-menu__nav{ display:flex; flex-direction:column; gap:6px; text-align:center; }
.mobile-menu__nav a{
  font-family:var(--display); font-weight:700;
  font-size:1.7rem; color:var(--cream);
  padding:10px 28px; border-radius:14px;
}
.mobile-menu__nav a:hover,
.mobile-menu__nav a:focus-visible{ color:var(--rose); background:var(--surface); }
@keyframes menuIn{ from{ opacity:0; } to{ opacity:1; } }
body.menu-open{ overflow:hidden; }

/* ---------- Grano sutil sobre todo el sitio ---------- */
body::after{
  content:""; position:fixed; inset:0; z-index:1; pointer-events:none;
  opacity:.04;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:120px 120px;
}

/* ---------- Fondo animado del hero ---------- */
.hero__grid{ position:relative; z-index:1; }
.hero__bg{ position:absolute; inset:0; overflow:hidden; z-index:0; pointer-events:none; }
.hero__blob{ position:absolute; border-radius:50%; filter:blur(70px); opacity:.5; }
.hero__blob--1{
  width:46vw; height:46vw; left:-8%; top:-12%;
  background:radial-gradient(circle, var(--blob-rose-hot), transparent 65%);
  animation:drift1 18s ease-in-out infinite alternate;
}
.hero__blob--2{
  width:40vw; height:40vw; right:-6%; top:8%;
  background:radial-gradient(circle, var(--blob-lilac), transparent 65%);
  animation:drift2 22s ease-in-out infinite alternate;
}
.hero__blob--3{
  width:36vw; height:36vw; left:28%; bottom:-20%;
  background:radial-gradient(circle, var(--rose-glow-2), transparent 65%);
  animation:drift3 26s ease-in-out infinite alternate;
}
@keyframes drift1{ to{ transform:translate(6%,8%) scale(1.10); } }
@keyframes drift2{ to{ transform:translate(-8%,6%) scale(1.08); } }
@keyframes drift3{ to{ transform:translate(4%,-6%) scale(1.12); } }

/* ---------- Selector de idioma ---------- */
.lang{ display:inline-flex; border:1px solid var(--line); border-radius:999px; overflow:hidden; }
.lang__btn{
  font-family:var(--mono); font-size:.72rem; letter-spacing:.05em;
  padding:6px 11px; border:0; background:transparent; color:var(--muted); cursor:pointer;
}
.lang__btn:hover{ color:var(--cream); }
.lang__btn.is-active{ background:var(--rose); color:var(--on-rose); }

/* ---------- Pista de consola + tecla ---------- */
.hero__hint{ margin:1.6rem 0 0; }
.kbd-hint{
  display:inline-flex; align-items:center; gap:8px;
  background:transparent; border:0; padding:0; cursor:pointer;
  font-family:var(--mono); font-size:.72rem; color:var(--muted);
}
.kbd-hint:hover{ color:var(--rose); }
kbd{
  font-family:var(--mono); font-size:.72rem; color:var(--cream);
  background:var(--surface-2); border:1px solid var(--line); border-bottom-width:2px;
  border-radius:6px; padding:2px 8px;
}

/* ---------- Marquee ---------- */
.marquee{ overflow:hidden; border-block:1px solid var(--line); background:var(--surface); }
.marquee__track{
  display:flex; width:max-content;
  animation:marquee 42s linear infinite;
}
.marquee:hover .marquee__track{ animation-play-state:paused; }
.marquee span{
  font-family:var(--mono); font-size:.8rem; color:var(--muted);
  padding:14px 26px; white-space:nowrap; border-right:1px solid var(--line);
}
@keyframes marquee{ to{ transform:translateX(-50%); } }

/* ---------- Demo ---------- */
.demo__card{
  display:grid; grid-template-columns:1.12fr .88fr; gap:34px; align-items:center;
  background:var(--ink); border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow); padding:26px;
}
.demo__media{ border-radius:14px; overflow:hidden; border:1px solid var(--line); background:var(--black); }
.demo__video{ width:100%; aspect-ratio:16/9; display:block; background:var(--black); }
.demo__body h2{ margin-bottom:.1em; }
.demo__tag{
  font-family:var(--mono); font-size:.72rem; letter-spacing:.05em; text-transform:uppercase;
  color:var(--lilac); margin:0 0 1rem;
}
.demo__body p{ color:var(--muted); }
.demo__dl{ margin:.4rem 0 1.1rem; }
.demo__credits{ font-family:var(--mono); font-size:.7rem; color:var(--muted); margin:0; max-width:54ch; }

/* ---------- Nota de arte ---------- */
.art__note{ font-family:var(--mono); font-size:.72rem; color:var(--muted); margin:1.6rem 0 0; max-width:72ch; }
.gallery__item img{ cursor:zoom-in; }

/* ---------- Enlaces de contacto ---------- */
.links__net{ font-family:var(--display); }

/* ---------- Nav activo ---------- */
.nav a.is-active{ color:var(--cream); border-bottom-color:var(--rose); }

/* ---------- Lightbox ---------- */
.lightbox{
  position:fixed; inset:0; z-index:80; padding:5vmin;
  display:flex; align-items:center; justify-content:center;
  background:var(--scrim); backdrop-filter:blur(6px);
}
.lightbox[hidden]{ display:none; }
.lightbox__img{
  max-width:92vw; max-height:88vh; width:auto; height:auto;
  border-radius:12px; border:1px solid var(--line);
  box-shadow:0 20px 60px var(--shadow-strong); background:var(--ink);
}
.lightbox__close{
  position:absolute; top:18px; right:20px; width:46px; height:46px; border-radius:50%;
  border:1px solid var(--line); background:var(--surface); color:var(--cream);
  font-size:1.4rem; line-height:1; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
}
.lightbox__close:hover{ border-color:var(--rose); color:var(--rose); }

/* ---------- Consola ---------- */
.console{ position:fixed; left:0; right:0; top:0; z-index:90; }
.console[hidden]{ display:none; }
.console__panel{
  background:var(--console-bg); border-bottom:1px solid var(--line);
  box-shadow:0 12px 40px var(--shadow-soft);
  max-height:min(60vh,440px); display:flex; flex-direction:column;
  animation:consoleDrop .18s ease;
}
@keyframes consoleDrop{ from{ transform:translateY(-100%); } to{ transform:none; } }
.console__log{
  padding:16px 18px; overflow-y:auto;
  font-family:var(--mono); font-size:.82rem; line-height:1.6; color:var(--cream);
}
.console__line{ white-space:pre-wrap; word-break:break-word; margin:0; }
.console__line--sys{ color:var(--lilac); }
.console__line--err{ color:var(--rose-hot); }
.console__form{ display:flex; align-items:center; gap:8px; border-top:1px solid var(--line); padding:10px 18px; }
.console__prompt{ color:var(--rose); font-family:var(--mono); font-size:.85rem; }
.console__input{
  flex:1; background:transparent; border:0; color:var(--cream);
  font-family:var(--mono); font-size:.85rem;
}

/* ---------- Pantalla de conexión ---------- */
.boot{
  position:fixed; inset:0; z-index:120; background:var(--ink);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:22px; padding:24px;
}
.boot[hidden]{ display:none; }
.boot__log{
  font-family:var(--mono); font-size:.82rem; line-height:1.85; color:var(--cream);
  width:min(520px,92vw); min-height:190px;
}
.boot__log .ok{ color:var(--online); }
.boot__log .dim{ color:var(--muted); }
.boot__barwrap{ width:min(520px,92vw); height:6px; background:var(--surface-2); border-radius:999px; overflow:hidden; }
.boot__bar{ height:100%; width:0; background:linear-gradient(90deg,var(--rose),var(--lilac)); transition:width .25s ease; }
.boot__skip{
  font-family:var(--mono); font-size:.72rem; color:var(--muted);
  background:transparent; border:1px solid var(--line); border-radius:999px; padding:8px 16px; cursor:pointer;
}
.boot__skip:hover{ color:var(--cream); border-color:var(--rose); }
body.boot-open{ overflow:hidden; }

/* ---------- Responsive del demo ---------- */
@media (max-width:820px){
  .demo__card{ grid-template-columns:1fr; gap:22px; }
}

/* ---------- Responsive ---------- */
@media (max-width:960px){
  .nav-toggle{ display:inline-flex; }
  .topbar__inner{ gap:12px; }
  .topbar__inner .lang{ margin-left:auto; }
  .hero__grid{ grid-template-columns:1fr; text-align:center; }
  .hero__text{ order:2; }
  .hero__art{ order:1; }
  .hero__art img{ max-height:400px; margin-inline:auto; }
  .ticker, .hero__cta{ justify-content:center; }
  .hero__line{ margin-inline:auto; }
  .about{ grid-template-columns:1fr; gap:32px; }
  .about__img{ max-width:340px; margin-inline:auto; }
  .stack{ grid-template-columns:1fr; }
  .services{ grid-template-columns:1fr; }
  .contact{ grid-template-columns:1fr; }
  .contact__img{ max-width:280px; margin-inline:auto; }
  .nav{ display:none; }
}

@media (max-width:640px){
  body{ font-size:16px; }
  .wrap{ width:calc(100% - 32px); }
  .section{ padding:64px 0; }
  .server{ grid-template-columns:28px 1fr; row-gap:10px; }
  .server__meta{ grid-column:2; text-align:left; }
  .gallery{ grid-template-columns:repeat(2,1fr); }
  .footer__inner{ flex-direction:column; text-align:center; }
  /* en pantallas estrechas el pill estorba: se accede a contacto desde el menú */
  .topbar__inner .pill{ display:none; }
}

@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; transition:none !important; }
  html{ scroll-behavior:auto; }
  .reveal{ opacity:1; transform:none; }
}