/* ════════════════════════════════════════════════════════════════
   ALPINE, landing page layout
   Components and tokens live in alpine.css. This file only holds
   the layout of the sections on the home page.
   ════════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────────
   HERO (bright). Walking through the gate should feel like
   stepping from night into morning.
   ───────────────────────────────────────────────────────────── */
.hero {
  position: relative;
  display: flex;
  align-items: flex-start;
  text-align: center;
  min-height: 100vh;
  min-height: max(100svh, 1040px);
  padding-block: 84px clamp(56px, 8vh, 96px);
  overflow: hidden;
}
.hero-img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 50% 68%;
  z-index: 0;
}
/* Keeps the dark headline readable over the sky without greying the picture. */
.hero::after {
  content: ''; position: absolute; inset: 0; z-index: 1;
  /* Fades out by 53%: the jar lid starts at 54% on desktop, so the fade never touches it. */
  background: linear-gradient(180deg, rgba(236,232,224,0.92) 0%, rgba(236,232,224,0.80) 38%, rgba(236,232,224,0.35) 46%, rgba(236,232,224,0) 53%);
}
.hero .container { position: relative; z-index: 2; }
.hero-copy { max-width: 760px; margin-inline: auto; }
.hero-mark { display: block; position: relative; width: 88px; aspect-ratio: 1; margin: 0 auto 14px; }
.hero-mark img, .hero-mark canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero-mark canvas[hidden] { display: none; }
.hero-mark.is-spinning img { visibility: hidden; }
/* The hero sits on a photograph, so its eyebrow needs more weight than the
   caption colour gives on flat cream. */
.hero .eyebrow { color: var(--fg-soft); }
/* Copy stays in the sky above the jar, so it runs a little tighter than the rest of the site. */
/* One line, bold, on every screen: the size tracks the width so it never wraps. */
.hero h1 { margin-top: 0; font-weight: 700; font-size: clamp(30px, 4.2vw, 56px); white-space: nowrap; }
.hero .lede { margin-top: 14px; max-width: 40ch; margin-inline: auto; font-size: 16px; }
.hero-cta { margin-top: 20px; }

/* Short laptop windows: the copy has less sky to sit in, so it runs tighter still. */
@media (min-width: 861px) and (max-height: 820px) {
  .hero { padding-top: 76px; }
  .hero-mark { width: 76px; margin-bottom: 12px; }
  .hero h1 { font-size: clamp(38px, 3.8vw, 52px); }
  .hero .lede { margin-top: 12px; font-size: 15px; }
  .hero-cta { margin-top: 18px; }
}

@media (max-width: 860px) {
  .hero { min-height: 100vh; min-height: 100svh; padding-top: 76px; }
  .hero-img { object-position: center 66%; }
  /* Chrome mark above the headline. The copy runs tighter so the button clears the jar. */
  .hero-mark { width: 76px; margin-bottom: 12px; }
  .hero h1 { font-size: clamp(26px, 8.4vw, 40px); }
  .hero .lede { margin-top: 12px; font-size: 16px; max-width: 100%; }
  .hero-cta { margin-top: 20px; }
  /* The copy ends near 48% on a phone and the jar lid starts at 57%, so the
     scrim holds through the lede and is gone by 55%, above the lid. */
  .hero::after {
    background: linear-gradient(180deg,
      rgba(236,232,224,0.94) 0%,
      rgba(236,232,224,0.90) 36%,
      rgba(236,232,224,0.55) 46%,
      rgba(236,232,224,0) 55%);
  }
  .hero-copy { max-width: 100%; }
  .hero .lede { max-width: 30ch; }
}
/* Short phones (iPhone SE class): the hero stays 740px tall and scrolls a little, so the copy
   still ends above the jar, which is baked into the 4:5 plate at 36% of its height. */
@media (max-width: 860px) and (max-height: 740px) {
  .hero { min-height: 740px; }
}

/* ─────────────────────────────────────────────────────────────
   FLOWER (bright). Cream paper with chrome metal flower accents.
   ───────────────────────────────────────────────────────────── */
.flower { position: relative; overflow: hidden; }
/* Chrome cutouts sit behind the content, never on top of type. */
.flower-cut {
  position: absolute; z-index: 0; pointer-events: none;
  opacity: 0.5; filter: saturate(0.85);
}
.flower-cut-1 { width: clamp(180px, 22vw, 340px); top: -40px; right: -60px; transform: rotate(8deg); }
.flower-cut-2 { width: clamp(130px, 15vw, 230px); bottom: -30px; left: -50px; transform: rotate(-14deg); }
.flower .container { position: relative; z-index: 1; }

.flower-head { max-width: 46ch; }
.flower-head h2 { margin-top: 14px; }
.flower-head .lede { margin-top: 20px; }

.flower-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(28px, 4vw, 64px);
  align-items: center;
  margin-top: clamp(48px, 6vw, 80px);
}
.flower-shot {
  position: relative;
  display: grid; place-items: center;
  padding: clamp(20px, 3vw, 44px);
}
.flower-shot::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(60% 55% at 50% 52%, rgba(255,255,255,0.95), rgba(236,232,224,0) 70%);
}
.flower-shot picture { display: contents; }
.flower-shot img { position: relative; max-height: 460px; width: auto; }

.callouts { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(20px, 3vw, 36px); }
.callout h3 {
  font-size: 12px; font-weight: var(--fw-ui);
  letter-spacing: var(--track-caps); text-transform: uppercase;
}
.callout p { margin-top: 8px; font-size: var(--fs-small); line-height: var(--lh-long); color: var(--fg-soft); }
.callout::before {
  content: ''; display: block; width: 28px; height: 1px; margin-bottom: 14px;
  background: var(--fg-mute); opacity: 0.55;
}

.macro-strip {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(10px, 1.5vw, 18px);
  margin-top: clamp(40px, 5vw, 72px);
}
.macro-strip img { width: 100%; border-radius: var(--r-card); }
.flower-close {
  margin-top: clamp(36px, 5vw, 64px);
  font-size: var(--fs-h3); font-weight: var(--fw-h2);
  text-align: center;
}

@media (max-width: 860px) {
  .flower-grid { grid-template-columns: 1fr; }
  .flower-shot { order: -1; }
  .flower-shot img { max-height: 340px; }
}
@media (max-width: 560px) {
  .callouts { grid-template-columns: 1fr; }
  .macro-strip { grid-template-columns: 1fr 1fr; }
  .macro-strip > :nth-child(3) { display: none; }
}

/* ─────────────────────────────────────────────────────────────
   LINEUP (back to dark)
   ───────────────────────────────────────────────────────────── */
.lineup-head { max-width: 46ch; }
.lineup-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 2vw, 28px);
  margin-top: clamp(40px, 5vw, 68px);
}
/* Chrome sticker cards. No inner plate: the products are cutouts floating on the dark
   card, with a chrome-gradient edge (a conic gradient masked down to a 1px ring) and a
   few pin-point sparkles. The ring turns on hover so the light seems to move across it. */
@property --ring { syntax: '<angle>'; inherits: false; initial-value: 210deg; }
.lineup-card {
  display: flex; flex-direction: column; position: relative; overflow: hidden;
  border: 0;
  background: linear-gradient(168deg, rgba(255,255,255,0.055) 0%, rgba(255,255,255,0.02) 55%, rgba(127,11,255,0.06) 100%), var(--panel-1, #141418);
  transition: transform var(--t-fast) var(--ease), --ring 0.9s var(--ease);
}
.lineup-card::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none; z-index: 2;
  background: conic-gradient(from var(--ring) at 50% 50%,
    #eceef2 0deg, #85888f 45deg, #fbfbfd 90deg, #b98cff 135deg, #9a9da4 180deg, #ffffff 235deg, #75787f 285deg, #eceef2 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
}
.lineup-card::after {
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 1; opacity: 0.45; mix-blend-mode: screen;
  background-image:
    radial-gradient(circle at 9% 14%, rgba(255,255,255,0.9) 0 0.6px, transparent 1.1px),
    radial-gradient(circle at 82% 22%, rgba(255,255,255,0.8) 0 0.5px, transparent 1px),
    radial-gradient(circle at 70% 61%, rgba(185,140,255,0.9) 0 0.6px, transparent 1.1px),
    radial-gradient(circle at 22% 78%, rgba(255,255,255,0.7) 0 0.5px, transparent 1px),
    radial-gradient(circle at 91% 88%, rgba(255,255,255,0.8) 0 0.6px, transparent 1.1px),
    linear-gradient(100deg, rgba(255,255,255,0) 30%, rgba(255,255,255,0.55) 50%, rgba(255,255,255,0) 70%);
  /* The last layer is the light sweep: parked off the left edge, it crosses the card on hover. */
  background-repeat: no-repeat;
  background-size: auto, auto, auto, auto, auto, 55% 100%;
  background-position: 0 0, 0 0, 0 0, 0 0, 0 0, -120% 0;
  transition: background-position 0.9s var(--ease);
}
.lineup-card:hover::after { background-position: 0 0, 0 0, 0 0, 0 0, 0 0, 220% 0; }
@media (prefers-reduced-motion: reduce) { .lineup-card::after { transition: none; } .lineup-card:hover::after { background-position: 0 0, 0 0, 0 0, 0 0, 0 0, -120% 0; } }
.lineup-card:hover { transform: translateY(-3px); --ring: 570deg; box-shadow: var(--depth), 0 24px 48px rgba(0,0,0,0.35); }
.lineup-shot {
  display: flex; align-items: center; justify-content: center; position: relative; z-index: 1;
  height: 280px; margin-bottom: 22px;
  background: radial-gradient(58% 52% at 50% 64%, rgba(255,255,255,0.13) 0%, rgba(255,255,255,0) 100%);
}
.lineup-shot picture { display: contents; }
.lineup-shot img { display: block; max-height: 100%; max-width: 100%; width: auto; height: auto; padding: 14px; box-sizing: border-box; filter: drop-shadow(0 22px 26px rgba(0,0,0,0.5)); }
.lineup-card > *:not(.lineup-shot) { position: relative; z-index: 1; }
.lineup-card h3 { margin-top: 6px; }
.lineup-card .eyebrow { display: block; }
.lineup-card ul { list-style: none; margin-top: 16px; display: flex; flex-direction: column; gap: 9px; }
.lineup-card li {
  position: relative; padding-left: 18px;
  font-size: var(--fs-small); line-height: var(--lh-long); color: var(--fg-soft);
}
.lineup-card li::before {
  content: ''; position: absolute; left: 0; top: 11px;
  width: 8px; height: 1px; background: var(--fg-mute);
}
.strains { margin-top: clamp(40px, 5vw, 64px); }
.lineup-cta { margin-top: clamp(36px, 4vw, 56px); }
.strain-chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }

/* Phones: one row you swipe through, a sliver of the next card showing so it reads as scrollable. */
@media (max-width: 860px) {
  .lineup-grid {
    display: flex; gap: 14px;
    overflow-x: auto; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); padding-bottom: 10px;
    scrollbar-width: none;
  }
  .lineup-grid::-webkit-scrollbar { display: none; }
  .lineup-card { flex: 0 0 min(78vw, 320px); scroll-snap-align: start; }
  .lineup-shot { height: 250px; }
}

/* ─────────────────────────────────────────────────────────────
   STORY STRIP
   ───────────────────────────────────────────────────────────── */
.story { text-align: center; }
.story h2 { max-width: 20ch; margin-inline: auto; }
.story-lines {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(24px, 4vw, 56px);
  margin-top: clamp(40px, 5vw, 64px);
  text-align: left;
}
.story-lines p { font-size: var(--fs-small); line-height: var(--lh-long); color: var(--fg-soft); }
.story-lines p::before {
  content: ''; display: block; width: 28px; height: 1px; margin-bottom: 14px;
  background: var(--fg-mute); opacity: 0.55;
}
@media (max-width: 720px) { .story-lines { grid-template-columns: 1fr; } }

/* ─────────────────────────────────────────────────────────────
   SHOW TEASER
   ───────────────────────────────────────────────────────────── */
.teaser {
  position: relative; overflow: hidden;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.teaser-img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; opacity: 0.30;
}
.teaser::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(90deg, var(--alpine-black) 8%, rgba(11,11,15,0.55) 100%);
}
.teaser .container { position: relative; z-index: 2; }
.teaser-inner { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; flex-wrap: wrap; }
.teaser h2 { max-width: 18ch; margin-top: 14px; }
.teaser .lede { margin-top: 16px; }
@media (max-width: 720px) { .teaser-inner { align-items: flex-start; } }

/* Retailer block reuses the teaser layout, no image. */
.retail { border-bottom: 1px solid var(--line); }
.retail h2 { max-width: 18ch; margin-top: 14px; }
.retail .lede { margin-top: 16px; max-width: 52ch; }