/* =========================================================================
   Home hero
   ========================================================================= */
.hero {
  --mx:0; --my:0;
  position:relative; overflow:hidden; isolation:isolate;
  background:var(--surface); border-bottom:1px solid var(--line);
  padding-block:clamp(3.5rem,8vw,6.5rem);
}
.hero__inner {
  position:relative; z-index:1;
  display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  align-items:center; gap:clamp(2rem,5vw,4.5rem);
}
.hero__inner--solo { grid-template-columns:minmax(0,1fr); }
.hero__copy .display-title { max-width:17ch; margin:0; }
.hero__copy .lead { margin:1.375rem 0 0; }

.hero__actions { display:flex; flex-wrap:wrap; gap:0.75rem; margin-top:2.25rem; }
.hero__cta {
  display:inline-flex; align-items:center; justify-content:center; gap:0.875rem;
  height:4rem; padding:0 2.25rem; min-width:15rem;
  border:1.5px solid transparent; border-radius:1rem; text-decoration:none;
  font-family:var(--font-display); font-weight:700; font-size:1.1875rem; letter-spacing:-.005em;
  transition:transform .2s cubic-bezier(.4,0,.2,1), background .2s ease, border-color .2s ease, box-shadow .25s ease;
}
.hero__cta-arrow { width:1.375rem; height:1.375rem; flex-shrink:0; transition:transform .25s cubic-bezier(.4,0,.2,1); }
.hero__cta:hover .hero__cta-arrow { transform:translateX(0.375rem); }
.hero__cta--primary { background:var(--red); color:#fff; box-shadow:0 1rem 2rem -0.75rem rgba(225,37,27,.55), var(--shadow-red); }
.hero__cta--primary:hover {
  background:var(--red-strong); color:#fff; transform:translateY(-0.1875rem);
  box-shadow:0 1.5rem 2.5rem -0.75rem rgba(225,37,27,.6), var(--shadow-red);
}
.hero__cta:focus-visible { outline:none; box-shadow:0 0 0 3px var(--focus); }

/* ---- Background: two soft washes and the texture ---- */
.hero__bg { position:absolute; inset:0; z-index:0; pointer-events:none; }
.hero__symbols { position:absolute; width:0; height:0; overflow:hidden; }

.hero__glow { position:absolute; border-radius:50%; will-change:translate; }
.hero__glow--red {
  width:52rem; height:52rem; right:-10rem; top:50%; margin-top:-26rem;
  background:radial-gradient(closest-side, rgba(225,37,27,.13), rgba(225,37,27,0));
  translate:calc(var(--mx) * -1.5rem) calc(var(--my) * -1rem);
}
.hero__glow--gold {
  width:34rem; height:34rem; right:24rem; top:50%; margin-top:-6rem;
  background:radial-gradient(closest-side, rgba(242,169,0,.15), rgba(242,169,0,0));
  translate:calc(var(--mx) * 1.25rem) calc(var(--my) * 0.875rem);
}

/* The drawings cover the whole ground, dimmed behind the copy so the text
   stays easy to read. */
.hero__pattern {
  position:absolute; inset:-30rem; width:calc(100% + 60rem); height:calc(100% + 60rem);
  color:var(--red); opacity:.1;
  -webkit-mask-image:linear-gradient(100deg, rgba(0,0,0,.5) 0%, rgba(0,0,0,.5) 35%, #000 70%);
          mask-image:linear-gradient(100deg, rgba(0,0,0,.5) 0%, rgba(0,0,0,.5) 35%, #000 70%);
  will-change:translate;
}
:root[data-theme="dark"] .hero__pattern { color:var(--red-on-dark); }
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .hero__pattern { color:var(--red-on-dark); }
}

/* ---- Category tiles ----
   Each slot places a tile and carries its parallax; the tile inside carries
   the tilt, the float and the hover. Keeping them on separate elements lets
   the movements add up instead of overwriting each other. */
.hero__tiles {
  position:relative; list-style:none; margin:0; padding:0;
  width:100%; max-width:30rem; aspect-ratio:1/0.92; justify-self:end;
}
.hero__tile-slot { position:absolute; margin:0; will-change:translate; }
.hero__tile-slot--1 { --depth:1;    --tilt:-7deg; --size:44%; left:6%;  top:0; }
.hero__tile-slot--2 { --depth:1.9;  --tilt:8deg;  --size:36%; right:0;  top:9%; }
.hero__tile-slot--3 { --depth:2.6;  --tilt:6deg;  --size:38%; left:0;   bottom:2%; }
.hero__tile-slot--4 { --depth:1.4;  --tilt:-9deg; --size:42%; right:8%; bottom:0; }
.hero__tile-slot { width:var(--size); translate:calc(var(--mx) * var(--depth) * 0.75rem) calc(var(--my) * var(--depth) * 0.625rem); }

.hero__tile {
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:0.5rem;
  aspect-ratio:1/1; padding:10%; text-decoration:none;
  background:var(--surface); border:1px solid var(--line); border-radius:1.75rem;
  box-shadow:0 1.5rem 3rem -1rem rgba(16,18,27,.18), 0 0.25rem 0.75rem rgba(16,18,27,.06);
  rotate:var(--tilt);
  transition:rotate .35s cubic-bezier(.4,0,.2,1), scale .35s cubic-bezier(.4,0,.2,1), border-color .2s ease, box-shadow .3s ease;
}
.hero__tile-icon { width:62%; height:62%; color:var(--red); flex:0 0 auto; }
.hero__tile-label {
  font-family:var(--font-label); font-size:0.6875rem; font-weight:600; letter-spacing:.1em;
  text-transform:uppercase; color:var(--muted); white-space:nowrap; transition:color .2s ease;
}
.hero__tile:hover { rotate:0deg; scale:1.06; border-color:var(--red); box-shadow:0 2rem 3.5rem -1rem rgba(225,37,27,.28), 0 0.25rem 0.75rem rgba(16,18,27,.06); }
.hero__tile:hover .hero__tile-label { color:var(--ink); }
.hero__tile:focus-visible { outline:none; border-color:var(--red); box-shadow:0 0 0 3px var(--focus); }

:root[data-theme="dark"] .hero__tile { box-shadow:0 1.5rem 3rem -1rem rgba(0,0,0,.6); }
:root[data-theme="dark"] .hero__tile-icon { color:var(--red-on-dark); }
:root[data-theme="dark"] .hero__tile:hover { border-color:var(--red-on-dark); }
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .hero__tile { box-shadow:0 1.5rem 3rem -1rem rgba(0,0,0,.6); }
  :root:not([data-theme="light"]) .hero__tile-icon { color:var(--red-on-dark); }
  :root:not([data-theme="light"]) .hero__tile:hover { border-color:var(--red-on-dark); }
}

/* ---- Motion: "wow" ----
   --mx / --my (-1..1) come from hero.js. The texture drifts endlessly and
   shifts a little with the pointer; the tiles shift more, each by its own
   depth, which is what reads as space. */
.hero[data-motion="wow"] .hero__pattern,
.hero[data-motion="wow"] .hero__glow,
.hero[data-motion="wow"] .hero__tile-slot { transition:translate .6s cubic-bezier(0,0,.2,1); }

.hero[data-motion="wow"] .hero__pattern {
  translate:calc(var(--mx) * -1rem) calc(var(--my) * -0.75rem);
  animation:hero-drift 80s linear infinite;
}
/* One tile of the texture is 30rem: the loop is seamless. */
@keyframes hero-drift { to { transform:translate3d(-30rem, 30rem, 0); } }

.hero[data-motion="wow"] .hero__item { animation:hero-rise .8s cubic-bezier(0,0,.2,1) backwards; }
.hero[data-motion="wow"] .hero__item:nth-child(1) { animation-delay:.1s; }
.hero[data-motion="wow"] .hero__item:nth-child(2) { animation-delay:.2s; }
.hero[data-motion="wow"] .hero__item:nth-child(3) { animation-delay:.34s; }
.hero[data-motion="wow"] .hero__item:nth-child(4) { animation-delay:.48s; }
.hero[data-motion="wow"] .hero__bg { animation:hero-fade 1.4s ease backwards; }

.hero[data-motion="wow"] .hero__tile-slot { animation:hero-pop .9s cubic-bezier(.2,.9,.3,1.2) backwards; }
.hero[data-motion="wow"] .hero__tile-slot--1 { animation-delay:.35s; }
.hero[data-motion="wow"] .hero__tile-slot--2 { animation-delay:.5s; }
.hero[data-motion="wow"] .hero__tile-slot--4 { animation-delay:.65s; }
.hero[data-motion="wow"] .hero__tile-slot--3 { animation-delay:.8s; }

.hero[data-motion="wow"] .hero__tile { animation:hero-float 7s ease-in-out infinite; }
.hero[data-motion="wow"] .hero__tile-slot--2 .hero__tile { animation-duration:8.5s; animation-delay:-2s; }
.hero[data-motion="wow"] .hero__tile-slot--3 .hero__tile { animation-duration:9.5s; animation-delay:-4s; }
.hero[data-motion="wow"] .hero__tile-slot--4 .hero__tile { animation-duration:7.8s; animation-delay:-1s; }
.hero[data-motion="wow"] .hero__tile:hover { animation-play-state:paused; }

@keyframes hero-rise { from { opacity:0; transform:translateY(1.75rem); } to { opacity:1; transform:none; } }
@keyframes hero-fade { from { opacity:0; } to { opacity:1; } }
@keyframes hero-pop { from { opacity:0; transform:translateY(2.5rem) scale(.8); } to { opacity:1; transform:none; } }
@keyframes hero-float { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-0.75rem); } }

/* Leaving the viewport: copy and tiles drift apart and fade, and return. */
.hero[data-motion="wow"] .hero__copy,
.hero[data-motion="wow"] .hero__tiles { transition:opacity .5s ease, transform .6s cubic-bezier(.4,0,.2,1); }
.hero[data-motion="wow"].is-leaving .hero__copy { opacity:0; transform:translateY(-1.5rem); }
.hero[data-motion="wow"].is-leaving .hero__tiles { opacity:0; transform:translateY(1.5rem) scale(.96); }

@media (max-width:900px){
  .hero { padding-block:2.5rem 2.25rem; }
  .hero__inner { grid-template-columns:minmax(0,1fr); gap:1.75rem; }

  /* The scattered composition needs room it does not have here: the tiles
     become one compact row of four, nearly upright. */
  .hero__tiles {
    display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:0.625rem;
    max-width:none; aspect-ratio:auto; justify-self:stretch;
  }
  .hero__tile-slot { position:static; width:auto; translate:none; }
  .hero__tile-slot--1, .hero__tile-slot--3 { --tilt:-2deg; }
  .hero__tile-slot--2, .hero__tile-slot--4 { --tilt:2deg; }
  .hero__tile {
    aspect-ratio:auto; height:100%; justify-content:flex-start; gap:0.375rem;
    padding:0.75rem 0.25rem 0.625rem; border-radius:1rem;
    box-shadow:0 0.5rem 1.25rem -0.5rem rgba(16,18,27,.16);
  }
  .hero__tile-icon { width:2.25rem; height:2.25rem; }
  .hero__tile-label { font-size:0.5625rem; letter-spacing:.06em; white-space:normal; text-align:center; line-height:1.25; }
  .hero[data-motion="wow"] .hero__tile { animation:none; }
  .hero__pattern {
    -webkit-mask-image:linear-gradient(180deg, rgba(0,0,0,.45) 0%, rgba(0,0,0,.45) 50%, #000 100%);
            mask-image:linear-gradient(180deg, rgba(0,0,0,.45) 0%, rgba(0,0,0,.45) 50%, #000 100%);
  }
  .hero__glow--red { width:34rem; height:34rem; right:-12rem; top:auto; bottom:-6rem; margin-top:0; }
  .hero__glow--gold { display:none; }
  .hero__actions { margin-top:1.75rem; }
  .hero__cta { flex:1 1 auto; min-width:0; height:3.5rem; font-size:1.0625rem; }
}

@media (prefers-reduced-motion:reduce){
  .hero .hero__pattern, .hero .hero__glow, .hero .hero__item, .hero .hero__bg,
  .hero .hero__copy, .hero .hero__tiles, .hero .hero__tile-slot, .hero .hero__tile {
    animation:none !important; transition:none !important;
  }
}