/* ===========================================================
   BB² Studio - interiérový dizajn
   Statický prototyp · šablóna štýlu
   =========================================================== */

/* Gotham Book — vlož licencované webfonty do site/fonts/ a tento blok sa aktivuje.
   ufonts.com predáva DESKTOP licenciu (.otf), ktorá NEPLATÍ pre web. Pre web treba
   webfont licenciu (Typography.com / Cloud.typography alebo Adobe Fonts).
   Do tej doby beží vizuálne najbližšia voľná náhrada — Montserrat. */
@font-face{
  font-family:"Gotham";
  src:url("../fonts/Gotham-Book.woff2") format("woff2");
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Gotham";
  src:url("../fonts/Gotham-Medium.woff2") format("woff2");
  font-weight:500 600; font-style:normal; font-display:swap;
}

:root{
  /* paleta — zladená s logom BB² */
  --cream:      #F4F1EA;
  --cream-2:    #ECE7DC;
  --surface:    #FBFAF6;
  --ink:        #211F1B;
  --ink-soft:   #3A372F;
  --muted:      #6E695E;
  --line:       #DAD3C5;
  --clay:       #D0623A;   /* hlavný akcent - terakota z loga */
  --clay-dark:  #A84823;
  --taupe:      #B4A48E;   /* béžová z loga (druhé „B") */
  --brass:      #A9824C;   /* jemné linky / detail */
  --violet:     #684B9F;   /* druhý akcent - fialová z loga */
  --violet-dark:#4E3878;

  /* typografia — Gotham Book (s voľnou náhradou Montserrat) */
  --serif: "Cormorant Garamond", "Times New Roman", Georgia, serif;
  --sans:  "Gotham", "Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* rozmery */
  --maxw: 1280px;
  --gut: clamp(20px, 5vw, 64px);
  --header-h: 140px;

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

/* ---------- reset ---------- */
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  font-family:var(--sans);
  color:var(--ink);
  background:var(--cream);
  line-height:1.65;
  font-size:17px;
  font-weight:400;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img{ display:block; max-width:100%; height:auto; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; }
button{ font-family:inherit; cursor:pointer; border:none; background:none; color:inherit; }

/* ---------- typografia ---------- */
h1,h2,h3,h4{ font-family:var(--serif); font-weight:500; line-height:1.07; letter-spacing:.01em; color:var(--ink); }
.display{
  font-family:var(--serif);
  font-weight:500;
  font-size:clamp(3rem, 9vw, 8.5rem);
  line-height:.95;
  letter-spacing:-.01em;
}
h2{ font-size:clamp(2rem, 4.5vw, 3.6rem); }
h3{ font-size:clamp(1.4rem, 2.4vw, 2.1rem); }
.eyebrow{
  font-family:var(--sans);
  font-size:.74rem;
  font-weight:600;
  letter-spacing:.28em;
  text-transform:uppercase;
  color:var(--clay);
}
.lead{ font-size:clamp(1.05rem,1.6vw,1.3rem); color:var(--ink-soft); }
.muted{ color:var(--muted); }
p{ max-width:64ch; }

/* ---------- layout helpers ---------- */
.wrap{ max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gut); }
.section{ padding-block:clamp(64px, 10vw, 140px); }
.section--tight{ padding-block:clamp(48px,7vw,96px); }
.center{ text-align:center; }
.divider{ height:1px; background:var(--line); border:0; }

.grid{ display:grid; gap:clamp(20px,3vw,40px); }
.two{ grid-template-columns:repeat(2,1fr); }
.three{ grid-template-columns:repeat(3,1fr); }
@media(max-width:900px){ .two,.three{ grid-template-columns:1fr; } }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:.6em;
  font-size:.82rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  padding:1.05em 1.9em; border-radius:2px;
  transition:all .35s var(--ease);
}
.btn--solid{ background:var(--ink); color:var(--cream); }
.btn--solid:hover{ background:var(--clay); }
.btn--ghost{ border:1px solid var(--ink); color:var(--ink); }
.btn--ghost:hover{ background:var(--ink); color:var(--cream); }
.btn--light{ border:1px solid rgba(255,255,255,.6); color:#fff; }
.btn--light:hover{ background:#fff; color:var(--ink); }
.link-arrow{
  display:inline-flex; align-items:center; gap:.5em;
  font-size:.8rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink); padding-bottom:.3em; border-bottom:1px solid var(--ink);
  transition:gap .3s var(--ease), color .3s;
}
.link-arrow:hover{ gap:1em; color:var(--clay); border-color:var(--clay); }

/* ===========================================================
   HEADER
   =========================================================== */
.site-header{
  position:fixed; inset:0 0 auto 0; z-index:90;
  height:var(--header-h);
  display:flex; align-items:center;
  transition:background .4s var(--ease), box-shadow .4s, color .4s;
}
.site-header .wrap{ display:grid; grid-template-columns:1fr auto 1fr; align-items:center; width:100%; }
.brand{ display:flex; align-items:center; grid-column:1; justify-self:start; }
.brand__logo{ height:116px; width:auto; display:block; transition:transform .35s var(--ease); }
.brand:hover .brand__logo{ transform:scale(1.04); }
/* logo nad tmavým hero — jemný tieň pre čitateľnosť svetlých častí */
.site-header.is-top .brand__logo{ filter:drop-shadow(0 2px 14px rgba(0,0,0,.45)); }
.brand__logo--footer{ height:54px; }

.nav{ display:flex; align-items:center; gap:clamp(18px,2.4vw,40px); grid-column:2; justify-self:center; }
.nav a{ font-size:.82rem; font-weight:500; letter-spacing:.1em; text-transform:uppercase; position:relative; padding-block:.4em; }
.nav a::after{ content:""; position:absolute; left:0; bottom:0; width:0; height:1px; background:currentColor; transition:width .35s var(--ease); }
.nav a:hover::after, .nav a.is-active::after{ width:100%; }

/* transparent over hero (top of home) */
.site-header.is-top{ background:transparent; color:#fff; }
.site-header.is-top .brand small{ color:rgba(255,255,255,.7); }
.site-header.is-top .eyebrow{ color:#fff; }
/* scrolled / inner pages */
.site-header.is-solid{ background:rgba(244,241,234,.9); backdrop-filter:blur(10px); color:var(--ink); box-shadow:0 1px 0 var(--line); }
.site-header.is-solid .brand small{ color:var(--muted); }

.header-actions{ display:flex; align-items:center; gap:22px; grid-column:3; justify-self:end; }

.lang-switch{ display:flex; align-items:center; gap:10px; }
.lang-switch button{ font-family:var(--sans); font-size:.72rem; font-weight:600; letter-spacing:.08em; color:inherit; opacity:.5; transition:opacity .25s, color .25s; }
.lang-switch button:hover{ opacity:.85; }
.lang-switch button.is-active{ opacity:1; color:var(--clay); }
.site-header.is-top .lang-switch button.is-active{ color:#fff; }

.nav-toggle{ display:none; width:42px; height:42px; flex-direction:column; justify-content:center; gap:6px; }
.nav-toggle span{ display:block; height:2px; width:26px; background:currentColor; transition:transform .35s var(--ease), opacity .25s; }

@media(max-width:860px){
  .nav-toggle{ display:flex; }
  .nav{
    position:fixed; inset:0; grid-column:auto; justify-self:auto; flex-direction:column; justify-content:center; gap:28px;
    background:var(--cream); color:var(--ink);
    transform:translateX(100%); transition:transform .45s var(--ease); z-index:80;
  }
  .nav a{ font-size:1.4rem; }
  body.nav-open .nav{ transform:none; }
  body.nav-open .nav-toggle span:nth-child(1){ transform:translateY(8px) rotate(45deg); }
  body.nav-open .nav-toggle span:nth-child(2){ opacity:0; }
  body.nav-open .nav-toggle span:nth-child(3){ transform:translateY(-8px) rotate(-45deg); }
  body.nav-open .nav-toggle{ position:fixed; right:var(--gut); top:17px; z-index:90; color:var(--ink); }
}

/* ===========================================================
   HERO
   =========================================================== */
.hero{
  position:relative; min-height:100svh; display:flex; align-items:center; justify-content:center;
  color:#fff; overflow:hidden; text-align:center;
}
/* prelínajúca sa slideshow renderov = efekt videa */
.hero__bg{ position:absolute; inset:0; z-index:-2; background:#1a1714; }
.hero__slide{
  position:absolute; inset:0; opacity:0; will-change:opacity;
  transition:opacity 1.6s var(--ease);
}
.hero__slide img{ width:100%; height:100%; object-fit:cover; transform:scale(1.06); }
.hero__slide.is-active{ opacity:1; }
.hero__slide.is-active img{ animation:kenburns 8s linear forwards; }
@keyframes kenburns{ from{ transform:scale(1.02); } to{ transform:scale(1.12); } }
.hero::after{ content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(180deg, rgba(20,18,15,.55) 0%, rgba(20,18,15,.3) 45%, rgba(20,18,15,.7) 100%); }

.hero__inner{ padding:140px var(--gut) 90px; max-width:1100px; }
.hero__eyebrow{ color:#fff; opacity:0; animation:heroFade .9s var(--ease) .2s forwards; margin-bottom:clamp(20px,4vw,40px); display:block; }
.hero__title{ display:flex; flex-direction:column; gap:.04em; }
.hero__title span{
  font-family:var(--serif); font-weight:500; line-height:.92; letter-spacing:-.01em;
  font-size:clamp(3.2rem, 13vw, 11rem); color:#fff;
  text-shadow:0 2px 40px rgba(15,12,8,.4);
  opacity:0; transform:translateY(28px); will-change:transform,opacity;
}
.hero__title span:nth-child(1){ animation:heroWord 1.1s var(--ease) .35s forwards; }
.hero__title span:nth-child(2){ animation:heroWord 1.1s var(--ease) .6s forwards; }
.hero__title span:nth-child(3){ animation:heroWord 1.1s var(--ease) .85s forwards; }
.hero__title span em{ font-style:italic; color:var(--clay); }
@keyframes heroWord{ to{ opacity:1; transform:none; } }
@keyframes heroFade{ to{ opacity:.95; } }
.hero__sub{ margin:clamp(24px,4vw,40px) auto 0; max-width:46ch; color:rgba(255,255,255,.9); opacity:0; animation:heroFade 1s var(--ease) 1.1s forwards; }

.hero__scroll{ position:absolute; left:50%; transform:translateX(-50%); bottom:26px; font-size:.7rem; letter-spacing:.25em; text-transform:uppercase; opacity:0; animation:heroFade 1s var(--ease) 1.4s forwards; display:flex; flex-direction:column; align-items:center; gap:.7em; }
.hero__scroll::after{ content:""; width:1px; height:42px; background:rgba(255,255,255,.7); display:inline-block; animation:scrollPulse 2s var(--ease) infinite; }
@keyframes scrollPulse{ 0%,100%{ transform:scaleY(.4); opacity:.4; transform-origin:top; } 50%{ transform:scaleY(1); opacity:1; transform-origin:top; } }

/* ===========================================================
   INTRO / statement
   =========================================================== */
.statement p{ font-family:var(--serif); font-size:clamp(1.6rem,3.4vw,2.9rem); line-height:1.28; font-weight:500; max-width:24ch; color:var(--ink); }
.statement .eyebrow{ display:block; margin-bottom:1.4em; }

/* section heading block */
.head{ display:flex; align-items:flex-end; justify-content:space-between; gap:24px; flex-wrap:wrap; margin-bottom:clamp(32px,5vw,60px); }
.head h2{ max-width:18ch; }
.head .eyebrow{ display:block; margin-bottom:1em; }

/* ===========================================================
   PROJECTS GRID
   =========================================================== */
.projects{ display:grid; grid-template-columns:repeat(12,1fr); gap:clamp(14px,2vw,26px); }
.proj{ position:relative; overflow:hidden; display:block; background:var(--cream-2); }
.proj img{ width:100%; height:100%; object-fit:cover; transition:transform 1s var(--ease); }
.proj:hover img{ transform:scale(1.06); }
.proj__cap{ position:absolute; left:0; right:0; bottom:0; padding:clamp(18px,2vw,28px); color:#fff; background:linear-gradient(0deg, rgba(15,13,10,.7), transparent); display:flex; align-items:flex-end; justify-content:space-between; gap:12px; }
.proj__cap h3{ color:#fff; font-size:clamp(1.3rem,2vw,1.9rem); }
.proj__cap .tag{ font-family:var(--sans); font-size:.68rem; letter-spacing:.2em; text-transform:uppercase; color:rgba(255,255,255,.8); }
.proj .plus{ position:absolute; top:18px; right:18px; width:40px; height:40px; border:1px solid rgba(255,255,255,.6); border-radius:50%; color:#fff; display:grid; place-items:center; opacity:0; transform:translateY(-6px); transition:.4s var(--ease); }
.proj:hover .plus{ opacity:1; transform:none; }

/* aspect helpers */
.r-tall{ aspect-ratio:3/4; }
.r-wide{ aspect-ratio:16/10; }
.r-sq{ aspect-ratio:1/1; }

/* span helpers (desktop) */
.c-7{ grid-column:span 7; }
.c-5{ grid-column:span 5; }
.c-6{ grid-column:span 6; }
.c-4{ grid-column:span 4; }
.c-8{ grid-column:span 8; }
.c-12{ grid-column:span 12; }
@media(max-width:760px){
  .projects{ grid-template-columns:1fr; }
  .proj{ grid-column:1 / -1 !important; }
  .r-tall{ aspect-ratio:4/5; }
}

/* ===========================================================
   WORKS GRID (blzk štýl — názov pod obrázkom)
   =========================================================== */
.works{ display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(30px,4vw,60px) clamp(20px,3vw,42px); }
.works--three{ grid-template-columns:repeat(3,1fr); }
@media(max-width:760px){ .works,.works--three{ grid-template-columns:1fr; } }
.work{ display:block; }
.work__media{ overflow:hidden; background:var(--cream-2); aspect-ratio:4/3; }
.work__media img{ width:100%; height:100%; object-fit:cover; transition:transform 1.1s var(--ease); }
.work:hover .work__media img{ transform:scale(1.05); }
.work__meta{ display:flex; align-items:baseline; justify-content:space-between; gap:16px; margin-top:1.05em; padding-bottom:.65em; border-bottom:1px solid var(--line); transition:border-color .4s var(--ease); }
.work:hover .work__meta{ border-color:var(--clay); }
.work__meta h3{ font-size:clamp(1.25rem,1.9vw,1.75rem); transition:color .3s; }
.work:hover .work__meta h3{ color:var(--clay); }
.work__cat{ font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); white-space:nowrap; }
.work--wide{ grid-column:1 / -1; }
.work--wide .work__media{ aspect-ratio:21/9; }

/* ===========================================================
   SERVICES / process (nestor — prehľadný, vzdušný)
   =========================================================== */
.process{ counter-reset:step; display:grid; gap:0; }
.step{
  counter-increment:step;
  display:grid; grid-template-columns:90px 1fr; gap:clamp(20px,5vw,64px); align-items:baseline;
  padding-block:clamp(26px,3.4vw,42px); border-top:1px solid var(--line);
  transition:padding-left .4s var(--ease);
}
.step:last-child{ border-bottom:1px solid var(--line); }
.step:hover{ padding-left:clamp(6px,1vw,16px); }
.step__num{ font-family:var(--serif); font-size:clamp(1.6rem,2.4vw,2.4rem); color:var(--clay); font-variant-numeric:tabular-nums; }
.step__num::before{ content:"0" counter(step); }
.step h3{ margin-bottom:.35em; font-size:clamp(1.3rem,2vw,1.9rem); }
.step p{ color:var(--muted); max-width:60ch; }
@media(max-width:640px){ .step{ grid-template-columns:1fr; gap:6px; } .step:hover{ padding-left:0; } }

/* packages */
.pkgs{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(18px,2vw,28px); }
@media(max-width:900px){ .pkgs{ grid-template-columns:1fr; } }
.pkg{ background:var(--surface); border:1px solid var(--line); padding:clamp(26px,3vw,40px); display:flex; flex-direction:column; gap:18px; transition:.4s var(--ease); }
.pkg:hover{ transform:translateY(-6px); box-shadow:0 26px 50px -30px rgba(40,30,15,.4); border-color:var(--brass); }
.pkg h3{ font-size:1.5rem; }
.pkg .area{ font-size:.78rem; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); }
.pkg .price{ font-family:var(--serif); font-size:2.4rem; color:var(--clay); line-height:1; margin-top:auto; }
.pkg .price small{ font-family:var(--sans); font-size:.7rem; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); display:block; margin-bottom:.4em; }
.pkg ul{ display:flex; flex-direction:column; gap:.6em; }
.pkg li{ position:relative; padding-left:1.4em; color:var(--ink-soft); font-size:.97rem; }
.pkg li::before{ content:""; position:absolute; left:0; top:.62em; width:7px; height:7px; background:var(--clay); border-radius:50%; }

/* ===========================================================
   ABOUT / team
   =========================================================== */
.team-photo{ max-width:520px; margin:0 auto clamp(40px,6vw,72px); overflow:hidden; background:var(--cream-2); }
.team-photo img{ width:100%; height:auto; display:block; filter:grayscale(1) contrast(1.03); }
.team{ display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(28px,5vw,80px); }
@media(max-width:820px){ .team{ grid-template-columns:1fr; } }
.member h3{ font-size:1.9rem; }
.member .role{ display:block; margin-top:.2em; margin-bottom:1em; font-size:.78rem; letter-spacing:.18em; text-transform:uppercase; color:var(--clay); }
.member p{ color:var(--muted); }
.member ul{ font-size:.95rem; }
.member li{ position:relative; padding-left:1.4em; color:var(--ink-soft); }
.member li::before{ content:""; position:absolute; left:0; top:.55em; width:6px; height:6px; background:var(--clay); border-radius:50%; }
.member li.list--violet::before, .list--violet li::before{ background:var(--violet); }

/* split image+text */
.split{ display:grid; grid-template-columns:1.05fr .95fr; align-items:center; gap:clamp(28px,6vw,90px); }
.split--rev{ direction:rtl; } .split--rev > *{ direction:ltr; }
@media(max-width:820px){ .split{ grid-template-columns:1fr; } }
.split figure{ overflow:hidden; }
.split figure img{ width:100%; aspect-ratio:4/3; object-fit:cover; }

/* ===========================================================
   CONTACT / CTA
   =========================================================== */
.cta{ position:relative; color:#fff; overflow:hidden; }
.cta__bg{ position:absolute; inset:0; z-index:-2; }
.cta__bg img{ width:100%; height:100%; object-fit:cover; }
.cta::after{ content:""; position:absolute; inset:0; z-index:-1; background:rgba(20,18,15,.58); }
.cta .wrap{ padding-block:clamp(80px,12vw,170px); text-align:center; }
.cta h2{ color:#fff; max-width:18ch; margin-inline:auto; }
.cta p{ color:rgba(255,255,255,.85); margin:1.4em auto 2.2em; }

/* contact form */
.contact-grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(30px,6vw,80px); }
@media(max-width:820px){ .contact-grid{ grid-template-columns:1fr; } }
.field{ display:flex; flex-direction:column; gap:.5em; margin-bottom:1.4em; }
.field label{ font-size:.74rem; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); }
.field input,.field textarea,.field select{
  font-family:inherit; font-size:1rem; color:var(--ink);
  background:var(--surface); border:1px solid var(--line); border-radius:2px;
  padding:.85em 1em; transition:border-color .3s;
}
.field input:focus,.field textarea:focus,.field select:focus{ outline:none; border-color:var(--clay); }
.contact-info dt{ font-size:.74rem; letter-spacing:.16em; text-transform:uppercase; color:var(--clay); margin-bottom:.3em; }
.contact-info dd{ margin-bottom:1.6em; font-size:1.15rem; }

/* ===========================================================
   FOOTER
   =========================================================== */
.site-footer{ background:var(--ink); color:rgba(255,255,255,.7); padding-block:clamp(56px,7vw,90px) 32px; }
.site-footer a:hover{ color:#fff; }
.footer-top{ display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:40px; padding-bottom:48px; border-bottom:1px solid rgba(255,255,255,.12); }
@media(max-width:760px){ .footer-top{ grid-template-columns:1fr; gap:32px; } }
.site-footer .brand{ color:#fff; margin-bottom:1em; }
.site-footer h4{ color:#fff; font-family:var(--sans); font-size:.74rem; letter-spacing:.2em; text-transform:uppercase; margin-bottom:1.2em; font-weight:600; }
.site-footer li{ margin-bottom:.6em; }
.footer-bottom{ display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; padding-top:28px; font-size:.8rem; letter-spacing:.04em; }

/* ===========================================================
   PAGE HERO (inner pages)
   =========================================================== */
.page-hero{ padding-top:calc(var(--header-h) + clamp(40px,8vw,90px)); padding-bottom:clamp(30px,5vw,60px); }
.page-hero .eyebrow{ display:block; margin-bottom:1em; }
.page-hero h1{ font-size:clamp(2.6rem,7vw,5.5rem); line-height:.98; }
.breadcrumb{ font-size:.78rem; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); margin-bottom:2.4em; }
.breadcrumb a:hover{ color:var(--clay); }

/* gallery (project detail) */
.gallery{ columns:2; column-gap:clamp(14px,2vw,24px); }
@media(max-width:640px){ .gallery{ columns:1; } }
.gallery img{ width:100%; margin-bottom:clamp(14px,2vw,24px); cursor:zoom-in; transition:opacity .3s; break-inside:avoid; background:var(--cream-2); }
.gallery img:hover{ opacity:.88; }

.facts{ display:grid; grid-template-columns:repeat(4,1fr); gap:24px; border-block:1px solid var(--line); padding-block:32px; margin-block:clamp(30px,5vw,56px); }
@media(max-width:700px){ .facts{ grid-template-columns:repeat(2,1fr); } }
.facts dt{ font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); margin-bottom:.4em; }
.facts dd{ font-family:var(--serif); font-size:1.5rem; }

/* ===========================================================
   LIGHTBOX
   =========================================================== */
.lightbox{ position:fixed; inset:0; z-index:120; background:rgba(15,13,10,.94); display:none; align-items:center; justify-content:center; padding:4vw; }
.lightbox.is-open{ display:flex; }
.lightbox img{ max-width:92vw; max-height:88vh; object-fit:contain; box-shadow:0 30px 80px rgba(0,0,0,.6); }
.lightbox__close,.lightbox__nav{ position:absolute; color:#fff; width:54px; height:54px; display:grid; place-items:center; font-size:1.6rem; opacity:.8; transition:opacity .25s; }
.lightbox__close{ top:18px; right:20px; }
.lightbox__nav{ top:50%; transform:translateY(-50%); font-size:2.4rem; }
.lb-prev{ left:14px; } .lb-next{ right:14px; }
.lightbox__close:hover,.lightbox__nav:hover{ opacity:1; }
.lightbox__count{ position:absolute; bottom:22px; left:50%; transform:translateX(-50%); color:rgba(255,255,255,.7); font-size:.8rem; letter-spacing:.15em; }

/* ===========================================================
   reveal-on-scroll
   =========================================================== */
.reveal{ opacity:0; transform:translateY(26px); transition:opacity .9s var(--ease), transform .9s var(--ease); }
.reveal.is-in{ opacity:1; transform:none; }
@media(prefers-reduced-motion:reduce){
  .reveal{ opacity:1; transform:none; transition:none; }
  .hero__bg img{ animation:none; transform:none; }
  html{ scroll-behavior:auto; }
}