/* Featured-sites showcase: the site picker above the kiosk, and the copy card
   swapping with it. Loaded after kiosk.css, which still styles the devices,
   the page tabs and the feature card itself. */

/* ---- the hero background: night into morning (sky.js) --------------------- */

/* Replaces the Vanta rings on this hero. sky.js draws the sky into the
   canvas. Underneath it, and on its own when WebGL is missing, the hero's
   night gradient cross-fades to a morning one on the same timeline (14s,
   starting at once), so the first paint before the script runs is
   already night rather than a flash of white. */
.hero-sky {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  background: linear-gradient(180deg, #03040b 0%, #070b1a 45%, #10152a 80%, #1c1d30 100%);
}
.hero-sky::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 70% 40% at 50% 110%, rgba(255, 240, 214, 0.9), rgba(255, 240, 214, 0) 70%),
    linear-gradient(180deg, #6199e0 0%, #b0d0f1 45%, #f1ede8 85%, #fff5e7 100%);
  opacity: 0;
  animation: hero-morning 14s ease-in-out forwards;
}
@keyframes hero-morning { to { opacity: 1; } }
.hero-sky canvas {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
}
@media (prefers-reduced-motion: reduce) {
  .hero-sky::after { animation: none; opacity: 1; }
}

/* ---- the site picker ---------------------------------------------------- */

/* The picker sits at the top of the hero. styles.css gives the hero 88px of
   top padding above 860px and 52px below; the user preferred the 52px look,
   so the showcase keeps it at every width. */
.hero--showcase { padding-top: 52px; }

/* The hero fills the screen below the header, so the next section never
   peeks in at the bottom. showcase.js measures how far down the page the
   hero starts (the utility bar and the full-size header) into --hero-top.
   Extra height is shared above and below the content. */
.hero--showcase {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: calc(100vh - var(--hero-top, 116px));
  box-sizing: border-box;
}
@supports (height: 100svh) {
  .hero--showcase { min-height: calc(100svh - var(--hero-top, 116px)); }
}
.hero--showcase > .wrap { width: 100%; box-sizing: border-box; }

/* The hero opens on the night sky alone: after 1s the content fades in over
   2s, in step with the sky starting to lighten. Pure CSS, so the content
   still arrives if a script fails. showcase.js waits for this animation to
   end before the site buttons' timer starts. */
.hero--showcase > .wrap {
  animation: hero-wake 2s ease-in-out 1s both;
}
@keyframes hero-wake {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .hero--showcase > .wrap { animation: none; }
}

.showcase-picker {
  --dwell: 7s;               /* how long each site stays up */
  grid-column: 1 / -1;
  display: flex;
  justify-content: center;
  margin-bottom: 18px;
}
.showcase-sites {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}

/* Cards, not pills: the page tabs underneath the devices are pills, and the
   two rows must never read as one control. */
.showcase-site {
  position: relative;
  isolation: isolate;        /* keeps the progress fill behind the contents */
  overflow: hidden;
  appearance: none;
  font: inherit;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 7px 20px 7px 7px;
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: 14px;
  /* Frosted glass over the sky; the active one turns solid white. */
  background: rgba(255, 255, 255, 0.6);
  -webkit-backdrop-filter: blur(10px) saturate(1.2);
  backdrop-filter: blur(10px) saturate(1.2);
  color: var(--ink-900);
  text-align: left;
  cursor: pointer;
  box-shadow: 0 12px 26px -16px rgba(var(--shadow-color), 0.4);
  transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease, background 0.18s ease;
}
.showcase-site img {
  display: block;
  width: 96px;
  height: 54px;
  border-radius: 8px;
  object-fit: cover;
  object-position: top left;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);
  flex-shrink: 0;
}
.showcase-site-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.showcase-site-name {
  font-family: "Source Serif 4", Georgia, "Times New Roman", serif;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.15;
}
.showcase-site-place {
  font-size: 13.5px;
  line-height: 1.2;
  color: var(--ink-700);
}

.showcase-site:not(.is-on) .showcase-site-text { opacity: 0.8; }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .showcase-site { background: rgba(255, 255, 255, 0.85); }
}
@media (hover: hover) {
  .showcase-site:hover {
    border-color: #FFFFFF;
    background: rgba(255, 255, 255, 0.75);
    transform: translateY(-2px);
    box-shadow: 0 16px 30px -16px rgba(var(--shadow-color), 0.5);
  }
}
/* Active: raised, and filled with solid white. While the sites take turns
   the white fills in from the left (the ::before below) across a slightly
   denser frost; once someone has stopped the rotation (is-stopped) it is
   simply solid white. Before the first turn starts, while the hero is still
   fading in, it stays frosted like the other. */
.showcase-site.is-on,
.showcase-site.is-on:hover {
  border-color: #FFFFFF;
  background: rgba(255, 255, 255, 0.72);
  box-shadow: 0 16px 34px -14px rgba(20, 30, 60, 0.55);
  transform: none;
  cursor: default;
}
.showcase-picker.is-stopped .showcase-site.is-on { background: #FFFFFF; }
.showcase-site:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }

/* ---- the selected button is also the timer -------------------------------- */

/* While the sites take turns, white fills the selected button's frost from
   the left; when it is full the next site comes up (showcase.js listens for
   the animation's end). The fill sits behind the thumbnail and text. */
.showcase-site::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--bg-raised);
  transform: scaleX(0);
  transform-origin: left center;
  pointer-events: none;
}
.showcase-picker.is-auto .showcase-site.is-on::before {
  animation: showcase-fill var(--dwell) linear forwards;
}
/* Hover, focus, an off-screen hero or a background tab freeze it in place. */
.showcase-picker.is-paused .showcase-site.is-on::before { animation-play-state: paused; }
@keyframes showcase-fill {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

/* .hero .wrap hands pointer events back per element; the card needs them so
   hovering the copy holds the rotation while it is being read. */
.hero .showcase-copy { pointer-events: auto; }

/* ---- the screens cross-fade --------------------------------------------- */

/* showcase.js lays the incoming page over the current one, a window-sized
   slice parked at the screen's scroll position, and fades it in. */
.kiosk-screen .kiosk-fade {
  position: absolute;
  left: 0;
  right: 0;
  z-index: 1;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.45s ease;   /* FADE in showcase.js */
}
.kiosk-screen .kiosk-fade.is-in { opacity: 1; }
.kiosk-screen .kiosk-fade .kiosk-pan { display: block; width: 100%; height: auto; }

/* ---- the copy card swaps with the site ---------------------------------- */

/* The card is a flex column; the panel has to carry that down so the buttons
   still sit under the copy the way they did when the card held them directly. */
.showcase-panel:not([hidden]) {
  display: flex;
  flex-direction: column;
}

/* Side by side, the card is fitted to the devices by scaling --fit and --gap.
   kiosk.css scales the gap between the two buttons too, so a little more air
   wrapped "Visit the live site" onto its own row, a 60px jump the fitting
   could never land between, and the card was left with white space under the
   buttons. Keep the pair on one row with a fixed gap between them. */
@media (min-width: 1400px) {
  .showcase-copy .loa-feature-actions {
    flex-wrap: nowrap;
    column-gap: 12px;
  }
  .showcase-copy .loa-feature-actions .btn {
    flex: 1 1 auto;
    justify-content: center;
    white-space: nowrap;
    padding-left: calc(18px * var(--fit));
    padding-right: calc(18px * var(--fit));
  }
}

/* ---- narrow screens ---------------------------------------------------- */

@media (max-width: 1399px) {
  .showcase-picker { margin-bottom: 0; }
}
@media (max-width: 620px) {
  .showcase-sites {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    width: 100%;
    gap: 10px;
  }
  .showcase-site {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    padding: 6px 6px 10px;
  }
  .showcase-site img { width: 100%; height: auto; aspect-ratio: 16 / 9; }
  .showcase-site-text { padding: 0 4px; }
  .showcase-site-name { font-size: 15.5px; }
  .showcase-site-place { font-size: 12.5px; }
}

@media (prefers-reduced-motion: reduce) {
  .showcase-site, .kiosk-screen .kiosk-fade { transition: none; }
  .showcase-site:hover { transform: none; }
}