/* ==========================================================================
   Home page. Six layout families: split hero, big type statement, duo list,
   bento, scattered prints strip, columns mosaic, sticky story.
   ========================================================================== */

:root { --edge: calc((100% - var(--wrap)) / 2); }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
  align-items: center;
  gap: clamp(24px, 4vw, 72px);
  min-height: 100dvh;
  padding: 84px var(--edge) 72px;
  overflow: clip;
}

.hero-lights {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}
/* Reflections only once the party is on */
html[data-theme='day'] .hero-lights { opacity: 0; }

.ball {
  position: absolute;
  top: 0;
  left: 54%;
  z-index: 4;
  width: clamp(104px, 15vw, 210px);
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  translate: -50% 0;
  transform-origin: 50% 0;
}
.ball .art { width: 100%; }

.hero-copy { position: relative; z-index: 2; display: grid; gap: clamp(18px, 2.4vw, 28px); justify-items: start; }

.names { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 18px; color: var(--text-2); }
.names .script { font-size: clamp(2rem, 4vw, 3.1rem); line-height: 1; color: var(--accent); }
.names time { font-weight: 600; letter-spacing: 0.04em; font-variant-numeric: tabular-nums; }

.lede { max-width: 30ch; font-size: clamp(1.1rem, 1.7vw, 1.35rem); line-height: 1.5; color: var(--text-2); }
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 6px; }

.hero-photos {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 600px;
  margin-left: auto;
  aspect-ratio: 5 / 6;
  max-height: 80dvh;
}

.hp {
  position: absolute;
  margin: 0;
  overflow: hidden;
  border-radius: var(--r-media);
  box-shadow: 0 34px 70px -24px var(--shadow);
}
.hp img { width: 100%; height: 100%; object-fit: cover; }

.hp-a { width: 58%; aspect-ratio: 2 / 3; top: 2%; right: 4%; rotate: 3.5deg; z-index: 2; --drift: 44px; }
.hp-b { width: 48%; aspect-ratio: 3 / 4; left: 0; bottom: 6%; rotate: -5deg; z-index: 3; --drift: 96px; }
.hp-c { width: 32%; aspect-ratio: 2 / 3; right: 0; bottom: -4%; rotate: 7deg; z-index: 4; --drift: 70px; }


@media (max-width: 860px) {
  .hero {
    grid-template-columns: 1fr;
    align-content: start;
    gap: 40px;
    padding-top: clamp(150px, 42vw, 210px);
  }
  .ball { left: 50%; width: clamp(96px, 28vw, 140px); }
  .hero-copy { justify-items: start; }
  .hero-photos { margin: 0 auto; max-width: 440px; max-height: none; }
}

/* ---------- Statement ---------- */
.statement { padding: clamp(100px, 16vw, 230px) var(--edge) clamp(80px, 11vw, 150px); }

.statement-text {
  max-width: 21em;
  font-size: clamp(1.9rem, 4.7vw, 4rem);
  font-weight: 500;
  line-height: 1.12;
  letter-spacing: -0.028em;
  text-wrap: pretty;
}

/* ---------- Duo: the people who made the day (Fanny, Manon, then the team) ---------- */
.duo { padding: 0 var(--edge) clamp(90px, 12vw, 160px); display: grid; gap: clamp(22px, 3vw, 36px); }
.duo h2 { max-width: 18em; font-size: clamp(1.7rem, 3.4vw, 2.6rem); }

.duo-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(20px, 3.4vw, 48px);
  margin: 0;
  padding: 0;
  list-style: none;
}
.duo-list li {
  display: grid;
  align-content: start;
  justify-items: start;
  gap: 6px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}
.role { color: var(--text-2); font-size: 0.95rem; }
.who { font-size: clamp(1.6rem, 2.6vw, 2.1rem); font-weight: 600; line-height: 1.15; letter-spacing: -0.02em; color: var(--accent); }
.team { font-size: 1.1rem; font-weight: 500; line-height: 1.5; text-wrap: pretty; }

/* Tablet: Fanny and Manon side by side, the team underneath */
@media (max-width: 900px) {
  .duo-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .duo-team { grid-column: 1 / -1; }
}
@media (max-width: 640px) { .duo-list { grid-template-columns: 1fr; } }

/* ---------- Collections ---------- */
.collections {
  display: grid;
  grid-template-columns: minmax(0, 1fr); /* the prints strip must scroll, not widen the page */
  gap: clamp(120px, 15vw, 210px);
  padding-bottom: clamp(120px, 15vw, 210px);
}

.collection { width: 100%; }
.collection-head { display: grid; gap: 14px; justify-items: start; padding: 0 var(--edge) clamp(28px, 4vw, 48px); }
.collection-head .meta { color: var(--text-2); max-width: 46ch; }
.collection-links { display: flex; flex-wrap: wrap; gap: 4px 30px; }

/* Chapter numbers: the four sections read as one story (01 to 04), each header laid out its own way */
.chapter {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--accent);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  font-variant-numeric: tabular-nums;
}
.chapter::after { content: ''; width: 44px; height: 1.5px; background: currentColor; opacity: 0.5; }

/* 02: title on the left, details on the right, on one line */
@media (min-width: 861px) {
  .collection-head--split {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: 'n meta' 'title links';
    align-items: end;
    column-gap: 48px;
  }
  .collection-head--split .chapter { grid-area: n; }
  .collection-head--split h2 { grid-area: title; }
  .collection-head--split .meta { grid-area: meta; justify-self: end; text-align: right; }
  .collection-head--split .collection-links { grid-area: links; justify-self: end; }
}

/* 03: the header stays beside the photos while they scroll by */
@media (min-width: 961px) {
  .collection--side {
    display: grid;
    grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
    gap: clamp(40px, 5vw, 80px);
    align-items: start;
    width: var(--wrap);
    margin-inline: auto;
  }
  .collection--side .collection-head { position: sticky; top: 16vh; padding: 0; }
  .collection--side .mosaic { width: 100%; column-count: 2; }
}

.collection > :not(.collection-head) { margin-inline: auto; }

/* Bento: 6 tiles exactly fill a 4 x 3 grid */
.bento {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: clamp(150px, 19vw, 250px);
  gap: clamp(10px, 1.4vw, 16px);
  width: var(--wrap);
}
.bento .tile { height: 100%; }
.bento .tile:nth-child(1) { grid-area: 1 / 1 / 3 / 3; }
.bento .tile:nth-child(2) { grid-area: 1 / 3 / 3 / 4; }
.bento .tile:nth-child(3) { grid-area: 1 / 4 / 2 / 5; }
.bento .tile:nth-child(4) { grid-area: 2 / 4 / 3 / 5; }
.bento .tile:nth-child(5) { grid-area: 3 / 1 / 4 / 3; }
.bento .tile:nth-child(6) { grid-area: 3 / 3 / 4 / 5; }

@media (max-width: 720px) {
  .bento { grid-template-columns: repeat(2, 1fr); grid-auto-rows: calc((100vw - 2 * var(--gutter) - 12px) / 2); }
  .bento .tile:nth-child(1) { grid-area: 1 / 1 / 3 / 3; }
  .bento .tile:nth-child(2) { grid-area: 3 / 1 / 5 / 2; }
  .bento .tile:nth-child(3) { grid-area: 3 / 2 / 4 / 3; }
  .bento .tile:nth-child(4) { grid-area: 4 / 2 / 5 / 3; }
  .bento .tile:nth-child(5) { grid-area: 5 / 1 / 6 / 3; }
  .bento .tile:nth-child(6) { grid-area: 6 / 1 / 7 / 3; }
}

/* Photobooth prints: a loose strip you can drag sideways */
.prints {
  display: flex;
  gap: clamp(18px, 2.6vw, 36px);
  width: 100%;
  padding: 36px var(--edge) 64px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scroll-padding-inline: var(--edge);
  scrollbar-width: thin;
  scrollbar-color: var(--line) transparent;
}
.print {
  flex: none;
  width: clamp(240px, 30vw, 380px);
  rotate: var(--tilt, 0deg);
  scroll-snap-align: start;
  transition: rotate 0.6s var(--ease), translate 0.6s var(--ease);
}
.print:hover { rotate: 0deg; translate: 0 -10px; }
.print:nth-child(2n) { margin-top: 30px; }
.print:nth-child(8n + 1) { --tilt: -3deg; }
.print:nth-child(8n + 2) { --tilt: 2.2deg; }
.print:nth-child(8n + 3) { --tilt: -1.4deg; }
.print:nth-child(8n + 4) { --tilt: 3.2deg; }
.print:nth-child(8n + 5) { --tilt: -2.4deg; }
.print:nth-child(8n + 6) { --tilt: 1.2deg; }
.print:nth-child(8n + 7) { --tilt: -3.4deg; }
.print:nth-child(8n) { --tilt: 2.6deg; }
.print .tile { border-radius: 10px; box-shadow: 0 22px 44px -18px var(--shadow); }
.print .tile > img, .print .tile > video { height: auto; aspect-ratio: 4 / 3; }

/* Guests mosaic: natural proportions in balanced columns */
.mosaic { width: var(--wrap); column-count: 3; column-gap: clamp(10px, 1.4vw, 16px); }
.mosaic .tile { margin-bottom: clamp(10px, 1.4vw, 16px); break-inside: avoid; }
.mosaic .tile > img, .mosaic .tile > video { height: auto; }

@media (max-width: 720px) { .mosaic { column-count: 2; } }

/* ---------- Norway story ---------- */
.trip {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: clamp(32px, 6vw, 100px);
  align-items: start;
  width: var(--wrap);
  margin: 0 auto;
  padding-bottom: clamp(100px, 14vw, 200px);
}
.trip-text { position: sticky; top: 16vh; display: grid; gap: 20px; justify-items: start; }
.trip-text h2 { margin-bottom: 8px; }
.trip-text p:not(.chapter, .tusen-takk) { max-width: 42ch; color: var(--text-2); }

.trip-photos { display: grid; gap: clamp(18px, 3.4vw, 44px); }
.trip-photos .tile { border-radius: var(--r-card); }
.trip-photos .tile:nth-child(even) { width: 86%; margin-left: auto; }
.trip-photos .tile:nth-child(3n) { width: 92%; }

@media (max-width: 860px) {
  .trip { grid-template-columns: 1fr; }
  .trip-text { position: static; }
  .trip-photos .tile:nth-child(n) { width: 100%; }
}

/* ---------- Norway moment ---------- */
/* Arriving on the Norway section: the page drifts to icy fjord tones, back when leaving. */
html[data-theme='day'].fjord {
  --bg: #e5edf0;
  --bg-2: #d3e0e6;
}
html.fjord-fade body { transition: background-color 1.4s ease, color 1.4s ease; }

/* "Tusen takk" (a thousand thanks) writes itself once, left to right, like a pen stroke. */
.tusen-takk {
  font-size: clamp(3rem, 7vw, 5.6rem);
  line-height: 1.1;
  color: var(--accent);
  padding-bottom: 6px;
}

@media (prefers-reduced-motion: no-preference) {
  .tusen-takk {
    clip-path: inset(0 100% 0 0);
    opacity: 0;
    transition: clip-path 2.2s cubic-bezier(0.45, 0, 0.2, 1), opacity 0.6s ease;
  }
  .trip.is-here .tusen-takk { clip-path: inset(0 0 0 0); opacity: 1; }
}

/* ---------- Footer ---------- */
.footer {
  display: grid;
  justify-items: center;
  gap: 6px;
  padding: clamp(60px, 9vw, 120px) var(--gutter) 150px;
  border-top: 1px solid var(--line);
  text-align: center;
}
.footer-dinos { width: clamp(120px, 16vw, 190px); margin-bottom: 20px; }
.farewell { font-size: clamp(2.3rem, 6vw, 4.6rem); line-height: 1.1; }
.farewell.names { color: var(--accent); }
.footer .link-arrow { margin-top: 28px; }

/* ---------- Motion ---------- */
@media (prefers-reduced-motion: no-preference) {
  @keyframes hp-in { from { opacity: 0; scale: 0.9; } to { opacity: 1; scale: 1; } }
  @keyframes hp-drift { to { translate: 0 var(--drift, 40px); } }
  @keyframes lit { to { opacity: 1; } }
  @keyframes settle { from { scale: 1.16; } to { scale: 1; } }

  /* Hero: copy first, then the photos land one after the other */
  .hero-copy > * { animation: rise 1s var(--ease) both; }
  .hero-copy > :nth-child(2) { animation-delay: 0.12s; }
  .hero-copy > :nth-child(3) { animation-delay: 0.24s; }
  .hero-copy > :nth-child(4) { animation-delay: 0.36s; }
  .hp { animation: hp-in 1.1s var(--ease) both; }
  .hp-a { animation-delay: 0.3s; }
  .hp-b { animation-delay: 0.5s; }
  .hp-c { animation-delay: 0.7s; }
  .ball { animation: sway 17.6s linear -4s infinite; }

  .hero.is-offscreen .lights-pivot,
  .hero.is-offscreen .spot,
  .hero.is-offscreen .ball { animation-play-state: paused; }



  @supports (animation-timeline: view()) {
    /* Photos drift at different speeds as the hero scrolls away */
    .hp {
      animation: hp-in 1.1s var(--ease) both, hp-drift linear both;
      animation-timeline: auto, scroll(root block);
      animation-range: normal, 0 100vh;
    }
    .hp-a { animation-delay: 0.3s, 0s; }
    .hp-b { animation-delay: 0.5s, 0s; }
    .hp-c { animation-delay: 0.7s, 0s; }

    /* Statement lights up word by word as it crosses the screen */
    .statement-text .w {
      opacity: 0.18;
      animation: lit linear both;
      animation-timeline: view();
      animation-range: entry 60% cover 36%;
    }

    /* Story photos settle from a slight zoom as they arrive */
    .trip-photos .tile > img,
    .trip-photos .tile .layer {
      animation: settle linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 55%;
    }
  }
}