initial

src/components/home/Hero.astro

@@ -0,0 +1,86 @@
+---
+import { Picture } from 'astro:assets';
+import plant from '../../assets/images/plant-at-dusk.jpg';
+import { t, type Lang } from '../../i18n/ui';
+
+interface Props { lang: Lang }
+const { lang } = Astro.props;
+const ui = t(lang);
+---
+<section class="hero night" aria-labelledby="hero-title">
+  <div class="hero__media">
+    <Picture
+      src={plant}
+      alt={ui.hero.imageAlt}
+      formats={['avif']}
+      fallbackFormat="webp"
+      widths={[640, 960, 1440, 1920, 2400, 3024]}
+      sizes="100vw"
+      loading="eager"
+      fetchpriority="high"
+      decoding="async"
+      class="hero__img img-cover img-doc"
+      pictureAttributes={{ class: 'hero__picture' }}
+    />
+    <div class="hero__overlay"></div>
+  </div>
+
+  <div class="container hero__content">
+    <h1 id="hero-title" class="display hero__title">
+      {ui.hero.lines.map((line, i) => (
+        <span class="hero__line" style={`--i: ${i}`}>{line}</span>
+      ))}
+    </h1>
+  </div>
+</section>
+
+<style>
+  .hero {
+    position: relative;
+    display: flex;
+    align-items: flex-end;
+    min-height: clamp(30rem, calc(100svh - var(--header-height)), 56rem);
+    overflow: hidden;
+  }
+  .hero__media { position: absolute; inset: 0; }
+  :global(.hero__picture) { display: block; width: 100%; height: 100%; }
+  .hero__img,
+  :global(.hero__img) {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    object-position: 60% 50%;
+    transform-origin: 50% 60%;
+    animation: hero-settle var(--dur-hero) var(--ease) both;
+  }
+  .hero__overlay {
+    position: absolute;
+    inset: 0;
+    background: var(--overlay);
+  }
+  .hero__content {
+    position: relative;
+    width: 100%;
+    padding-block: var(--space-9);
+  }
+  .hero__title { max-width: 12em; }
+  .hero__line {
+    display: block;
+    opacity: 0;
+    animation: hero-rise 700ms var(--ease) forwards;
+    animation-delay: calc(240ms + var(--i) * 160ms);
+  }
+
+  @keyframes hero-settle {
+    from { transform: scale(1.045); }
+    to   { transform: none; }
+  }
+  @keyframes hero-rise {
+    from { opacity: 0; transform: translateY(0.18em); }
+    to   { opacity: 1; transform: none; }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .hero__img, :global(.hero__img), .hero__line { animation: none; opacity: 1; transform: none; }
+  }
+</style>