/* ══════════════ Company 02 · the Tulip event (js/event.js) ══════════════
   Six photos, drawn as one spread: the room large on the left, the two
   screens stacked beside it, and a row of three under them (the floor,
   the evening, the set). Each frame opens on the scroll
   (data-reveal="media": its clip ends at an 8px corner, so the frame's
   own corner is 8px too); its caption sits on a scrim at the foot. A
   photo opens full screen in the viewer below. */

.event { --event-gap: clamp(10px, 1.3vw, 18px); margin-top: clamp(8px, 1.5vw, 20px); }

.event-grid {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: var(--event-gap);
  grid-template-columns: repeat(12, minmax(0, 1fr));
}
.event-item-0 { grid-column: 1 / span 7; grid-row: 1 / span 2; }
.event-item-1 { grid-column: 8 / span 5; grid-row: 1; }
.event-item-2 { grid-column: 8 / span 5; grid-row: 2; }
.event-item-3 { grid-column: 1 / span 4; }
.event-item-4 { grid-column: 5 / span 4; }
.event-item-5 { grid-column: 9 / span 4; }
.event-item { min-width: 0; }

.event-tile {
  position: relative; display: block; width: 100%; height: 100%; padding: 0; border: 0;
  background: none; color: inherit; font: inherit; text-align: left; cursor: pointer;
  border-radius: 8px; isolation: isolate;
}
.event-tile:focus-visible { outline: 2px solid var(--blue); outline-offset: 4px; }

.event-frame {
  position: relative; display: block; overflow: hidden; height: 100%;
  border-radius: 8px; background: var(--tile);
  aspect-ratio: 3 / 2;
  box-shadow: var(--shadow-md);
}
.event-item-0 .event-frame { aspect-ratio: auto; min-height: 100%; }
.event-frame picture { display: block; height: 100%; }
.event-frame img {
  display: block; width: 100%; height: 100%; object-fit: cover;
  transform-origin: 50% 50%;
}
/* the hover leans into the picture: it slowly closes in, the caption lifts */
.event-frame picture {
  transition: scale 1.1s var(--ease-out-expo);
}
.event-tile:hover .event-frame picture,
.event-tile:focus-visible .event-frame picture { scale: 1.045; }

/* the scrim and the caption: white type on the photo's own darkest band */
.event-frame::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 1;
  background: linear-gradient(to top, rgba(var(--fw-s90-rgb), .78) 0%, rgba(var(--fw-s90-rgb), .38) 26%, rgba(var(--fw-s90-rgb), 0) 52%);
  transition: opacity .6s var(--ease-out-expo);
}
.event-cap {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; pointer-events: none;
  display: grid; gap: 4px; padding: clamp(14px, 1.6vw, 22px) clamp(16px, 1.8vw, 26px);
  color: #fff;
  transition: translate .7s var(--ease-out-expo);
}
.event-tile:hover .event-cap, .event-tile:focus-visible .event-cap { translate: 0 -4px; }
.event-cap-kicker {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
  color: var(--steel-t60);
}
.event-cap-kicker .mono { font-family: var(--font-mono); font-weight: 500; letter-spacing: 0; color: rgba(255, 255, 255, .72); }
.event-cap-text {
  font-size: clamp(14px, 1.15vw, 16px); font-weight: 700; line-height: 1.3; letter-spacing: -0.01em;
  text-wrap: balance; max-width: 34ch;
}
.event-item-0 .event-cap-text { font-size: clamp(18px, 1.9vw, 26px); font-weight: 800; letter-spacing: -0.02em; line-height: 1.15; max-width: 22ch; }

/* the corner mark: four short strokes that open to a frame on hover */
.event-zoom {
  position: absolute; top: clamp(12px, 1.4vw, 18px); right: clamp(12px, 1.4vw, 18px); z-index: 2;
  width: 40px; height: 40px; border-radius: 50%; pointer-events: none;
  background: rgba(255, 255, 255, .16); border: 1px solid rgba(255, 255, 255, .34);
  -webkit-backdrop-filter: blur(10px) saturate(140%); backdrop-filter: blur(10px) saturate(140%);
  opacity: 0; scale: .8;
  transition: opacity .45s var(--ease-out-expo), scale .6s var(--ease-out-expo);
}
.event-zoom::before {
  content: ""; position: absolute; inset: 13px;
  background:
    linear-gradient(#fff, #fff) left top / 5px 1.5px, linear-gradient(#fff, #fff) left top / 1.5px 5px,
    linear-gradient(#fff, #fff) right top / 5px 1.5px, linear-gradient(#fff, #fff) right top / 1.5px 5px,
    linear-gradient(#fff, #fff) left bottom / 5px 1.5px, linear-gradient(#fff, #fff) left bottom / 1.5px 5px,
    linear-gradient(#fff, #fff) right bottom / 5px 1.5px, linear-gradient(#fff, #fff) right bottom / 1.5px 5px;
  background-repeat: no-repeat;
}
.event-tile:hover .event-zoom, .event-tile:focus-visible .event-zoom { opacity: 1; scale: 1; }

/* the facts under the photos: three short pairs, a hairline between */
.event-facts {
  display: flex; flex-wrap: wrap; margin: clamp(18px, 2.2vw, 28px) 0 0; padding: 0;
}
.event-fact {
  display: flex; align-items: baseline; gap: 12px;
  padding: 4px clamp(18px, 2.4vw, 32px); border-left: 1px solid var(--border);
}
.event-fact:first-child { padding-left: 0; border-left: 0; }
.event-fact dt { font-family: var(--font-mono); font-size: 12px; color: var(--text-muted); }
.event-fact dd { margin: 0; font-size: 15px; font-weight: 700; color: var(--navy-deep); }
[data-theme="dark"] .event-fact dd { color: var(--text); }

/* ── the viewer ─────────────────────────────────────────────────── */

.event-view {
  position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none;
  margin: 0; padding: 0; border: 0; overflow: hidden;
  background: transparent; color: #fff;
}
.event-view::backdrop {
  background: rgba(var(--fw-s90-rgb), .94);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.event-view[open] { display: grid; place-items: center; animation: event-view-in .5s var(--ease-out-expo); }
.event-view[open]::backdrop { animation: event-fade-in .5s var(--ease-out-expo); }
@keyframes event-view-in { from { opacity: 0; } }
@keyframes event-fade-in { from { opacity: 0; } }

.event-view-stage {
  margin: 0; display: grid; justify-items: center; gap: 16px;
  width: min(100vw - 2 * clamp(16px, 7vw, 120px), (100dvh - 150px) * 1.5);
  touch-action: pan-y;
}
.event-view-stage picture { display: block; width: 100%; }
.event-view-img {
  display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover;
  border-radius: 8px; box-shadow: 0 30px 80px -20px rgba(0, 0, 0, .6);
  user-select: none; -webkit-user-drag: none;
}
.event-view-cap {
  display: flex; align-items: baseline; gap: 16px; width: 100%;
  font-size: 15px; line-height: 1.4;
}
.event-view-count { font-family: var(--font-mono); font-size: 12px; color: rgba(255, 255, 255, .6); flex: none; }
.event-view-kicker {
  margin-right: 10px; font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--steel-t40);
}
.event-view-text { font-weight: 600; }

/* a step: the new photo slides in a short way from the side it came from */
.event-view-stage.is-swapping picture { animation: event-step .55s var(--ease-out-expo); }
.event-view-stage.is-swapping[data-dir="prev"] picture { animation-name: event-step-back; }
@keyframes event-step { from { opacity: 0; translate: 28px 0; } }
@keyframes event-step-back { from { opacity: 0; translate: -28px 0; } }

.event-view-btn {
  position: absolute; z-index: 1; display: grid; place-items: center;
  width: 48px; height: 48px; border-radius: 50%; cursor: pointer;
  font: 600 18px/1 var(--font); color: #fff;
  background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .22);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  transition: background-color .25s var(--ease-out-quart), border-color .25s var(--ease-out-quart), scale .25s var(--ease-out-quart);
}
.event-view-btn:hover { background: rgba(255, 255, 255, .2); border-color: rgba(255, 255, 255, .4); }
.event-view-btn:active { scale: .94; }
.event-view-btn:focus-visible { outline: 2px solid var(--steel); outline-offset: 3px; }
.event-view-prev { left: clamp(12px, 2.4vw, 36px); top: 50%; translate: 0 -50%; }
.event-view-next { right: clamp(12px, 2.4vw, 36px); top: 50%; translate: 0 -50%; }
.event-view-close { right: clamp(12px, 2.4vw, 36px); top: clamp(12px, 2.4vw, 32px); font-size: 15px; }

/* the morph between the photo and the viewer (view transitions) */
::view-transition-group(event-photo) { animation-duration: .6s; animation-timing-function: cubic-bezier(.16, 1, .3, 1); }
::view-transition-old(event-photo), ::view-transition-new(event-photo) { height: 100%; object-fit: cover; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .45s; }

/* ── narrower screens ───────────────────────────────────────────── */

/* a tablet: the two smaller photos go side by side under the large one */
@media (max-width: 900px) {
  .event-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .event-grid > .event-item { grid-column: auto; grid-row: auto; }
  .event-grid > .event-item-0 { grid-column: 1 / -1; }
  .event-item-0 .event-frame { aspect-ratio: 3 / 2; min-height: 0; }
  /* the last one closes the spread as a wide band */
  .event-grid > .event-item-5 { grid-column: 1 / -1; }
  .event-item-5 .event-frame { aspect-ratio: 21 / 9; }
}

/* a phone: the two smaller photos stand upright beside each other; the
   viewer's arrows step under the photo, the swipe does the rest */
@media (max-width: 720px) {
  .event-item:not(.event-item-0):not(.event-item-5) .event-frame { aspect-ratio: 4 / 5; }
  .event-item-5 .event-frame { aspect-ratio: 16 / 9; }
  .event-item:not(.event-item-0):not(.event-item-5) .event-cap-text { display: none; }   /* the full line is in the viewer */
  .event-cap { padding: 12px 14px; }
  .event-item-0 .event-cap-text { font-size: 18px; }
  .event-zoom { display: none; }
  .event-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .event-fact { flex-direction: column; gap: 2px; padding-inline: 12px; }
  .event-fact dd { font-size: 14px; line-height: 1.3; }

  .event-view-stage { width: calc(100vw - 24px); }
  .event-view-img { border-radius: 6px; }
  .event-view-cap { padding-inline: 4px; flex-wrap: wrap; gap: 6px 12px; }
  .event-view-prev, .event-view-next { top: auto; bottom: max(20px, env(safe-area-inset-bottom)); translate: none; }
  .event-view-prev { left: calc(50% - 58px); }
  .event-view-next { right: calc(50% - 58px); }
}

@media (prefers-reduced-motion: reduce) {
  .event-frame picture, .event-cap, .event-zoom { transition: none; }
  .event-tile:hover .event-frame picture { scale: 1; }
  .event-view[open], .event-view[open]::backdrop, .event-view-stage.is-swapping picture { animation: none; }
}