/* ==========================================================================
   Destiny Visa — stylesheet
   Direction: "Ink & Stamp" — passport-page structure, petrol ink ground,
   carmine stamp accent, typewriter utility type for anything official.
   ========================================================================== */

:root{
  /* colour */
  --ink:        #0F272E;
  --ink-2:      #16414B;
  --ink-3:      #24616B;
  --paper:      #FBFAF7;
  --mist:       #E9F0ED;
  --stamp:      #C2255C;
  --stamp-soft: #F6E2EA;
  --gold:       #E8A33D;
  --sea:        #1F8A87;
  --line:       rgba(15,39,46,.14);
  --line-soft:  rgba(15,39,46,.08);
  --muted:      #5A6E74;

  /* type */
  --display: "Bricolage Grotesque", "Trebuchet MS", system-ui, sans-serif;
  --body:    "Public Sans", -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --util:    "Space Mono", ui-monospace, "Courier New", monospace;

  /* space */
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --section: clamp(4rem, 9vw, 7.5rem);
  --radius: 14px;
  --maxw: 1180px;
}

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

html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }

body{
  margin:0;
  font-family:var(--body);
  font-size:clamp(1rem,.96rem + .2vw,1.075rem);
  line-height:1.65;
  color:var(--ink);
  background:var(--paper);
  overflow-x:hidden;
}

img{ max-width:100%; display:block; }
a{ color:inherit; }

h1,h2,h3,h4{
  font-family:var(--display);
  font-weight:800;
  line-height:1.06;
  letter-spacing:-.02em;
  margin:0 0 .5em;
}
h1{ font-size:clamp(2.5rem,1.6rem + 4.2vw,4.6rem); }
h2{ font-size:clamp(1.9rem,1.35rem + 2.4vw,3.1rem); }
h3{ font-size:clamp(1.15rem,1.02rem + .5vw,1.45rem); }
p{ margin:0 0 1.1em; }
p:last-child{ margin-bottom:0; }

::selection{ background:var(--stamp); color:#fff; }

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

/* ---------- layout helpers ---------- */
.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter); }
.section{ padding-block:var(--section); }
.section--tight{ padding-block:clamp(2.5rem,5vw,4rem); }
.section--mist{ background:var(--mist); }
.section--ink{ background:var(--ink); color:#E6EFEF; }
.section--ink h2,.section--ink h3{ color:#fff; }
.center{ text-align:center; }
.lede{ font-size:clamp(1.05rem,1rem + .35vw,1.25rem); color:var(--muted); max-width:62ch; }
.section--ink .lede{ color:#A9C4C6; }
.stack > * + *{ margin-top:1rem; }

/* eyebrow — typewriter, like a file reference on a form */
.eyebrow{
  font-family:var(--util);
  font-size:.72rem;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--stamp);
  display:inline-flex;
  align-items:center;
  gap:.6rem;
  margin:0 0 1rem;
}
.eyebrow::before{
  content:""; width:26px; height:1px; background:currentColor; display:inline-block;
}
.section--ink .eyebrow{ color:var(--gold); }

/* perforation rule — the tear line of a boarding pass */
.perf{
  height:1px;
  background-image:linear-gradient(90deg,var(--line) 0 8px,transparent 8px 16px);
  background-size:16px 1px;
  border:0;
  margin:0;
}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.55rem;
  font-family:var(--body); font-weight:700; font-size:.98rem;
  padding:.9rem 1.5rem;
  border-radius:999px;
  border:1.5px solid transparent;
  text-decoration:none;
  cursor:pointer;
  transition:transform .18s ease, background .18s ease, color .18s ease, border-color .18s ease;
}
.btn:hover{ transform:translateY(-2px); }
.btn--primary{ background:var(--stamp); color:#fff; }
.btn--primary:hover{ background:#a71c4d; }
.btn--gold{ background:var(--gold); color:var(--ink); }
.btn--gold:hover{ background:#d8912b; }
.btn--ghost{ border-color:currentColor; color:var(--ink); background:transparent; }
.section--ink .btn--ghost,.hero .btn--ghost{ color:#fff; }
.btn--ghost:hover{ background:rgba(255,255,255,.08); }
.btn-row{ display:flex; flex-wrap:wrap; gap:.75rem; }

/* ---------- top contact bar ---------- */
.topbar{
  background:var(--ink);
  color:#BFD4D4;
  font-family:var(--util);
  font-size:.72rem;
  letter-spacing:.06em;
}
.topbar .wrap{
  display:flex; flex-wrap:wrap; gap:.4rem 1.5rem;
  align-items:center; justify-content:space-between;
  padding-block:.55rem;
}
.topbar a{ color:#fff; text-decoration:none; }
.topbar a:hover{ color:var(--gold); }
.topbar__phones{ display:flex; flex-wrap:wrap; gap:.4rem 1.25rem; }

/* ---------- header / nav ---------- */
.site-head{
  position:sticky; top:0; z-index:60;
  background:rgba(251,250,247,.92);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line-soft);
}
.site-head .wrap{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding-block:.8rem;
}
.brand{ display:flex; align-items:center; gap:.7rem; text-decoration:none; }
.brand__mark{
  width:42px; height:42px; flex:none;
  border-radius:11px;
  background:var(--ink);
  display:grid; place-items:center;
  color:var(--gold);
  font-family:var(--display); font-weight:800; font-size:1.1rem;
  letter-spacing:-.04em;
  box-shadow:inset 0 0 0 1.5px var(--gold);
}
.brand__name{ font-family:var(--display); font-weight:800; font-size:1.22rem; line-height:1; letter-spacing:-.03em; }
.brand__sub{ font-family:var(--util); font-size:.6rem; letter-spacing:.2em; text-transform:uppercase; color:var(--muted); display:block; margin-top:.28rem; }

.nav{ display:flex; align-items:center; gap:.35rem; }
.nav a{
  text-decoration:none; font-weight:600; font-size:.95rem;
  padding:.55rem .8rem; border-radius:8px;
  transition:background .15s ease, color .15s ease;
}
.nav a:hover{ background:var(--mist); }
.nav a[aria-current="page"]{ color:var(--stamp); }
.nav a[aria-current="page"]::after{
  content:""; display:block; height:2px; background:var(--stamp); margin-top:3px; border-radius:2px;
}
.head-cta{ margin-left:.5rem; }

.nav-toggle{
  display:none; width:44px; height:44px; border:1px solid var(--line);
  background:transparent; border-radius:10px; cursor:pointer; padding:0;
  align-items:center; justify-content:center;
}
.nav-toggle span{ display:block; width:20px; height:2px; background:var(--ink); position:relative; }
.nav-toggle span::before,.nav-toggle span::after{
  content:""; position:absolute; left:0; width:20px; height:2px; background:var(--ink);
  transition:transform .2s ease, top .2s ease;
}
.nav-toggle span::before{ top:-6px; }
.nav-toggle span::after{ top:6px; }
.nav-toggle[aria-expanded="true"] span{ background:transparent; }
.nav-toggle[aria-expanded="true"] span::before{ top:0; transform:rotate(45deg); }
.nav-toggle[aria-expanded="true"] span::after{ top:0; transform:rotate(-45deg); }

@media (max-width:900px){
  .nav-toggle{ display:flex; }
  .nav{
    position:absolute; inset:100% 0 auto 0;
    flex-direction:column; align-items:stretch; gap:0;
    background:var(--paper);
    border-bottom:1px solid var(--line);
    padding:.5rem var(--gutter) 1.25rem;
    display:none;
  }
  .nav.is-open{ display:flex; }
  .nav a{ padding:.85rem .25rem; border-bottom:1px solid var(--line-soft); border-radius:0; }
  .nav a[aria-current="page"]::after{ display:none; }
  .head-cta{ margin:.9rem 0 0; justify-content:center; }
}

/* ---------- the signature: passport stamp ---------- */
.stamp{
  font-family:var(--util);
  font-size:.7rem; font-weight:700;
  letter-spacing:.16em; text-transform:uppercase;
  color:var(--stamp);
  border:2px solid currentColor;
  border-radius:10px;
  padding:.5rem .85rem;
  display:inline-block;
  transform:rotate(-7deg);
  position:relative;
  background:rgba(251,250,247,.6);
}
.stamp::after{
  content:""; position:absolute; inset:3px;
  border:1px dashed currentColor; border-radius:6px; opacity:.7;
}
.stamp--gold{ color:var(--gold); }
.stamp--sea{ color:var(--sea); }
.stamp--flat{ transform:none; }
.stamp--lg{ font-size:.9rem; padding:.8rem 1.2rem; }

/* stamp press-in animation on first view */
.stamp[data-press]{ opacity:0; }
.stamp[data-press].is-pressed{
  animation:press .55s cubic-bezier(.2,.9,.25,1) forwards;
}
@keyframes press{
  0%{ opacity:0; transform:rotate(-16deg) scale(1.9); }
  70%{ opacity:1; transform:rotate(-5deg) scale(.96); }
  100%{ opacity:1; transform:rotate(-7deg) scale(1); }
}

/* ---------- hero ---------- */
.hero{
  position:relative;
  background:var(--ink);
  color:#EAF2F2;
  overflow:hidden;
  padding-block:clamp(3.5rem,7vw,6rem) clamp(4rem,8vw,7rem);
}
.hero::before{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(60% 80% at 80% 15%, rgba(31,138,135,.35), transparent 60%),
    radial-gradient(50% 60% at 10% 90%, rgba(194,37,92,.22), transparent 60%);
  pointer-events:none;
}
.hero::after{  /* faint passport guilloché grid */
  content:""; position:absolute; inset:0; opacity:.14; pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,.35) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.35) 1px, transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(70% 70% at 50% 40%, #000, transparent);
}
.hero .wrap{ position:relative; z-index:2; }
.hero__grid{
  display:grid; gap:clamp(2rem,5vw,4rem);
  grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  align-items:center;
}
@media (max-width:900px){ .hero__grid{ grid-template-columns:1fr; } }

.hero h1{ color:#fff; margin-bottom:.35em; }
.hero h1 em{
  font-style:normal; color:var(--gold);
  position:relative; white-space:nowrap;
}
.hero h1 em::after{
  content:""; position:absolute; left:0; right:0; bottom:.06em; height:.12em;
  background:var(--stamp); border-radius:2px; opacity:.9;
}
.hero__lede{ color:#B9D0D2; font-size:clamp(1.05rem,1rem + .4vw,1.3rem); max-width:52ch; }
.hero .btn-row{ margin-top:1.8rem; }

.hero__figure{ position:relative; }
.hero__figure img{
  width:100%; aspect-ratio:4/5; object-fit:cover;
  border-radius:var(--radius);
  border:1px solid rgba(255,255,255,.18);
}
.hero__figure .stamp{
  position:absolute; bottom:-18px; left:-14px;
  background:var(--ink);
}
.hero__ticket{
  position:absolute; top:22px; right:-14px;
  background:var(--paper); color:var(--ink);
  border-radius:12px; padding:.85rem 1rem;
  box-shadow:0 18px 40px rgba(0,0,0,.28);
  font-family:var(--util); font-size:.68rem; letter-spacing:.1em; text-transform:uppercase;
  max-width:190px;
}
.hero__ticket strong{ display:block; font-family:var(--display); font-size:1.5rem; letter-spacing:-.02em; }
@media (max-width:620px){
  .hero__ticket{ right:8px; }
  .hero__figure .stamp{ left:8px; }
}

/* trust strip under hero */
.trust{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr));
  gap:1px; background:var(--line);
  border-block:1px solid var(--line);
}
.trust__item{ background:var(--paper); padding:1.4rem var(--gutter); }
.trust__item b{ font-family:var(--display); font-size:1.9rem; display:block; line-height:1; }
.trust__item span{ font-family:var(--util); font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); }

/* ---------- generic grids & cards ---------- */
.grid{ display:grid; gap:clamp(1rem,2.5vw,1.6rem); }
.grid--2{ grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); }
.grid--3{ grid-template-columns:repeat(auto-fit,minmax(268px,1fr)); }
.grid--4{ grid-template-columns:repeat(auto-fit,minmax(215px,1fr)); }

.card{
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:1.6rem;
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.card:hover{ transform:translateY(-4px); box-shadow:0 16px 34px rgba(15,39,46,.09); border-color:rgba(15,39,46,.24); }
.card h3{ margin-bottom:.4rem; }
.card p{ color:var(--muted); font-size:.97rem; }
.card__icon{
  width:46px; height:46px; border-radius:12px;
  background:var(--stamp-soft); color:var(--stamp);
  display:grid; place-items:center; margin-bottom:1rem;
}
.card__icon svg{ width:22px; height:22px; }
.card--sea .card__icon{ background:#DCEFEE; color:var(--sea); }
.card--gold .card__icon{ background:#FBEEDA; color:#B87816; }

/* destination cards */
.dest{
  position:relative; border-radius:var(--radius); overflow:hidden;
  border:1px solid var(--line); background:var(--ink);
  min-height:390px; display:flex; flex-direction:column; justify-content:flex-end;
  color:#fff; text-decoration:none;
}
.dest img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  opacity:.72; transition:transform .5s ease, opacity .3s ease;
}
.dest:hover img{ transform:scale(1.05); opacity:.55; }
.dest__body{
  position:relative; z-index:2; padding:1.5rem;
  background:linear-gradient(transparent, rgba(9,25,30,.92) 55%);
}
.dest__body h3{ color:#fff; margin-bottom:.3rem; }
.dest__body p{ color:#C6D9DA; font-size:.93rem; margin:0; }
.dest__flag{
  position:absolute; top:1rem; left:1rem; z-index:2;
  font-family:var(--util); font-size:.66rem; letter-spacing:.16em; text-transform:uppercase;
  background:rgba(251,250,247,.94); color:var(--ink);
  padding:.35rem .6rem; border-radius:6px;
}
.dest__meta{
  display:flex; flex-wrap:wrap; gap:.35rem; margin-top:.9rem;
}
.dest__meta span{
  font-family:var(--util); font-size:.63rem; letter-spacing:.1em; text-transform:uppercase;
  border:1px solid rgba(255,255,255,.35); border-radius:99px; padding:.25rem .6rem;
}

/* ---------- numbered process (a real sequence, so numbers earn their place) ---------- */
.steps{ counter-reset:step; display:grid; gap:0; }
.step{
  counter-increment:step;
  display:grid; grid-template-columns:auto 1fr; gap:1.25rem;
  padding:1.6rem 0;
  border-top:1px dashed var(--line);
}
.step:last-child{ border-bottom:1px dashed var(--line); }
.step::before{
  content:"0" counter(step);
  font-family:var(--util); font-size:.85rem; font-weight:700;
  color:var(--stamp);
  border:1.5px solid currentColor; border-radius:8px;
  width:44px; height:44px; display:grid; place-items:center;
}
.section--ink .step{ border-color:rgba(255,255,255,.2); }
.section--ink .step::before{ color:var(--gold); }
.step h3{ margin-bottom:.25rem; }
.step p{ color:var(--muted); margin:0; }
.section--ink .step p{ color:#A9C4C6; }

/* ---------- split feature ---------- */
.split{
  display:grid; gap:clamp(1.75rem,4vw,3.5rem);
  grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  align-items:center;
}
.split__media{ position:relative; }
.split__media img{
  width:100%; aspect-ratio:5/4; object-fit:cover; border-radius:var(--radius);
  border:1px solid var(--line);
}
.split__media .stamp{ position:absolute; right:-10px; bottom:-16px; background:var(--paper); }

/* checklist */
.ticks{ list-style:none; margin:1.25rem 0 0; padding:0; display:grid; gap:.7rem; }
.ticks li{ position:relative; padding-left:2rem; }
.ticks li::before{
  content:"✓"; position:absolute; left:0; top:0;
  width:1.35rem; height:1.35rem; border-radius:50%;
  background:var(--sea); color:#fff; font-size:.75rem;
  display:grid; place-items:center;
}

/* ---------- partners ---------- */
.tabs{ display:flex; flex-wrap:wrap; gap:.5rem; margin-bottom:2rem; }
.tab{
  font-family:var(--util); font-size:.72rem; letter-spacing:.14em; text-transform:uppercase;
  padding:.65rem 1.1rem; border-radius:999px;
  border:1.5px solid var(--line); background:transparent; color:var(--muted);
  cursor:pointer; transition:all .18s ease;
}
.tab:hover{ border-color:var(--ink); color:var(--ink); }
.tab[aria-selected="true"]{ background:var(--ink); border-color:var(--ink); color:#fff; }
.tabpanel[hidden]{ display:none; }

.uni{
  border:1px solid var(--line); border-radius:12px; padding:1.1rem 1.2rem;
  background:var(--paper); display:flex; flex-direction:column; gap:.3rem;
  transition:border-color .18s ease, transform .18s ease;
}
.uni:hover{ border-color:var(--stamp); transform:translateY(-3px); }
.uni b{ font-family:var(--display); font-size:1.02rem; line-height:1.2; }
.uni span{ font-family:var(--util); font-size:.66rem; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); }

/* ---------- testimonials ---------- */
.quote{
  background:var(--paper); border:1px solid var(--line); border-radius:var(--radius);
  padding:1.6rem; display:flex; flex-direction:column; gap:1rem;
}
.quote p{ font-size:1.02rem; margin:0; }
.quote figcaption{ display:flex; align-items:center; gap:.8rem; margin-top:auto; }
.quote img{ width:44px; height:44px; border-radius:50%; object-fit:cover; flex:none; }
.quote b{ display:block; font-size:.95rem; }
.quote small{ font-family:var(--util); font-size:.66rem; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); }

/* ---------- accordion (FAQ) ---------- */
.faq{ border-top:1px solid var(--line); }
.faq details{ border-bottom:1px solid var(--line); }
.faq summary{
  list-style:none; cursor:pointer;
  padding:1.25rem 3rem 1.25rem 0; position:relative;
  font-family:var(--display); font-weight:700;
  font-size:clamp(1.02rem,.98rem + .3vw,1.2rem);
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{
  content:"+"; position:absolute; right:.5rem; top:50%; transform:translateY(-50%);
  font-family:var(--util); font-size:1.35rem; color:var(--stamp); transition:transform .2s ease;
}
.faq details[open] summary::after{ content:"–"; }
.faq summary:hover{ color:var(--stamp); }
.faq__body{ padding:0 3rem 1.4rem 0; color:var(--muted); }

/* ---------- forms ---------- */
.form{ display:grid; gap:1.1rem; }
.form__row{ display:grid; gap:1.1rem; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); }
.field{ display:flex; flex-direction:column; gap:.4rem; }
.field label{
  font-family:var(--util); font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted);
}
.field input,.field select,.field textarea{
  font-family:var(--body); font-size:1rem; color:var(--ink);
  background:transparent;
  border:0; border-bottom:1.5px solid var(--line);
  padding:.7rem .1rem;
  border-radius:0;
  transition:border-color .18s ease;
}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none; border-bottom-color:var(--stamp);
}
.field textarea{ resize:vertical; min-height:110px; }
.form__note{ font-size:.85rem; color:var(--muted); }

/* ---------- contact cards ---------- */
.contact-card{
  border:1px solid var(--line); border-radius:var(--radius); padding:1.4rem;
  background:var(--paper);
}
.contact-card h3{ font-size:1.05rem; margin-bottom:.35rem; }
.contact-card a{ text-decoration:none; font-weight:700; color:var(--ink); }
.contact-card a:hover{ color:var(--stamp); }
.contact-card small{ font-family:var(--util); font-size:.66rem; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); display:block; margin-top:.2rem; }

/* ---------- page banner (inner pages) ---------- */
.banner{
  position:relative; background:var(--ink); color:#fff; overflow:hidden;
  padding-block:clamp(3rem,6vw,5rem);
}
.banner img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.3;
}
.banner::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(90deg, rgba(15,39,46,.95), rgba(15,39,46,.55));
}
.banner .wrap{ position:relative; z-index:2; }
.banner h1{ color:#fff; max-width:18ch; }
.banner p{ color:#B9D0D2; max-width:56ch; }
.crumbs{ font-family:var(--util); font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; color:var(--gold); margin-bottom:1rem; }
.crumbs a{ text-decoration:none; }
.crumbs a:hover{ text-decoration:underline; }

/* ---------- CTA band ---------- */
.cta-band{
  background:var(--gold); color:var(--ink);
  padding-block:clamp(2.5rem,5vw,4rem);
}
.cta-band .wrap{ display:flex; flex-wrap:wrap; gap:1.5rem; align-items:center; justify-content:space-between; }
.cta-band h2{ margin:0; max-width:20ch; font-size:clamp(1.6rem,1.2rem + 1.6vw,2.5rem); }
.cta-band p{ margin:.5rem 0 0; max-width:44ch; }

/* ---------- footer ---------- */
.site-foot{ background:var(--ink); color:#9FBDBF; padding-block:clamp(3rem,6vw,4.5rem) 2rem; }
.site-foot h4{
  font-family:var(--util); font-size:.7rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--gold); margin:0 0 1.1rem;
}
.site-foot .brand__name{ color:#fff; }
.site-foot .brand__sub{ color:#7FA0A3; }
.foot-grid{ display:grid; gap:2rem; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); }
.foot-list{ list-style:none; margin:0; padding:0; display:grid; gap:.6rem; font-size:.94rem; }
.foot-list a{ text-decoration:none; }
.foot-list a:hover{ color:#fff; }
.foot-bottom{
  margin-top:2.5rem; padding-top:1.5rem; border-top:1px solid rgba(255,255,255,.12);
  display:flex; flex-wrap:wrap; gap:.75rem 1.5rem; justify-content:space-between;
  font-family:var(--util); font-size:.68rem; letter-spacing:.08em; color:#7FA0A3;
}
.foot-bottom a{ text-decoration:none; }

/* floating whatsapp */
.wa{
  position:fixed; right:18px; bottom:18px; z-index:70;
  width:56px; height:56px; border-radius:50%;
  background:#25D366; color:#fff; display:grid; place-items:center;
  box-shadow:0 12px 28px rgba(0,0,0,.22);
  text-decoration:none; transition:transform .2s ease;
}
.wa:hover{ transform:scale(1.08); }
.wa svg{ width:28px; height:28px; }

/* image placeholder while real photos are not yet uploaded */
.img-missing{
  background:
    repeating-linear-gradient(45deg, var(--mist) 0 12px, #DDE7E4 12px 24px);
  position:relative;
}

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

@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.001ms !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
  [data-reveal]{ opacity:1; transform:none; }
  .stamp[data-press]{ opacity:1; }
}