/* Homepage Wind: gray 0–250ms, gust 250–550ms, pause 550–600ms, content 600–800ms, redirect 900ms. */
body.home-wind-leaving { animation: none; }
body.home-wind-leaving::after {
  content: ""; position: fixed; inset: 0; z-index: -2; pointer-events: none;
  background: var(--color-wind);
  animation: home-wind-gray 250ms linear forwards;
}
body.home-wind-leaving::before {
  width: clamp(160px, 28vw, 320px); height: 150vmax;
  inset: 50% auto auto 50%;
  background-size: 100% auto;
  background-repeat: repeat-y;
  animation: home-wind-pass 900ms linear forwards;
}
body.home-wind-leaving #home_container {
  pointer-events: none;
  animation: home-wind-away 200ms ease-in 600ms forwards;
}
@keyframes home-wind-gray {
  from { opacity: 0; } to { opacity: 1; }
}
@keyframes home-wind-pass {
  0%, 27.7778% {
    transform: translate(-50%, -50%) translate3d(100vmax, 100vmax, 0) rotate(45deg);
    opacity: 0;
  }
  27.778% {
    transform: translate(-50%, -50%) translate3d(100vmax, 100vmax, 0) rotate(45deg);
    opacity: 1;
  }
  61.1111% {
    transform: translate(-50%, -50%) translate3d(-100vmax, -100vmax, 0) rotate(45deg);
    opacity: 1;
  }
  61.1113%, 100% {
    transform: translate(-50%, -50%) translate3d(-100vmax, -100vmax, 0) rotate(45deg);
    opacity: 0;
  }
}
@keyframes home-wind-away {
  from { transform: translate3d(0, 0, 0) rotate(0); opacity: 1; }
  to { transform: translate3d(-120vw, -120svh, 0) rotate(-6deg); opacity: 0; }
}

/* Audio/Video layout is independent of the four-example galleries. */
body.earth-study #home_container {
  display: grid;
  grid-template-rows: var(--element-title-slot) minmax(0, 1fr) 30%;
  gap: 2svh;
  justify-items: center;
  align-items: center;
}
body.earth-study .video-stage {
  width: 99%;
  height: 100%;
  min-height: 0;
  display: grid;
  place-items: center;
  container-type: size;
  grid-template-rows: minmax(0, 1fr);
}

body.earth-study video {
  display: block;
  width: min(100cqw, calc(100cqh * 1.77777778));
  height: auto;
  aspect-ratio: 16 / 9;
  margin: 0;
  background: #000;
  object-fit: contain;
}
body.earth-study ._blurb-holder {
  position: static;
  height: 100%;
  margin: 0;
}
body.earth-study .glassbox { height: 100%; }
@media (orientation: portrait) {
  body.earth-study #home_container {
    grid-template-rows: var(--element-title-slot) minmax(0, 1fr) 35%;
    gap: 2svh;
  }
  body.earth-study .video-stage { width: 97%; }
  }

/* The four element titles share the bottom lettering of their homepage SVGs.
   Info has its own SVG and deliberately does not use this component. */
body.element-page {
  --element-title-height: clamp(30px, 6svh, 52px);
  --element-title-gap: clamp(2px, .4svh, 5px);
  --element-title-slot: calc(var(--element-title-height) + var(--element-title-gap));
}
body.element-page ._1box {
  position: relative;
  width: min(98vw, calc(var(--element-title-height) * 13));
  left: 50%;
  transform: translateX(-50%);
  height: var(--element-title-height);
  margin: var(--element-title-gap) 0 0;
  align-self: start;
  min-height: 0;
  aspect-ratio: auto;
  overflow: clip;
}
body.element-page ._1box .header-svg {
  position: absolute;
  left: 0;
  bottom: 50%;
  width: 100%;
  height: auto;
  max-height: none;
  aspect-ratio: 1;
  /* Lettering is centered at y=190 on the shared 208-unit SVG canvas. */
  transform: translateY(8.653846%);
}

/* Grass enters 0–300ms, leaves 300–600ms, both sharpen 600–900ms. */
body.home-earth-leaving #footholder {
  animation: earth-grass-focus 900ms linear forwards;
}
body.home-earth-leaving #headholder {
  animation: earth-leaves-focus 900ms linear forwards;
}
@keyframes earth-grass-focus {
  0% { transform: translateY(100%); opacity: 0; filter: blur(12px); }
  33.333%, 66.667% { transform: translateY(0); opacity: 1; filter: blur(12px); }
  100% { transform: translateY(0); opacity: 1; filter: blur(0); }
}
@keyframes earth-leaves-focus {
  0%, 33.333% { transform: translateY(-100%); opacity: 0; filter: blur(12px); }
  66.667% { transform: translateY(0); opacity: 1; filter: blur(12px); }
  100% { transform: translateY(0); opacity: 1; filter: blur(0); }
}

@media (orientation: portrait) {
  .home-page #home_container { height: 80svh; }
  .home-page .elements {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(2, minmax(0, 1fr));
    width: min(94%, 50cqh);
    height: auto;
    gap: 1.2cqh;
    aspect-ratio: 1;
  }
  .home-page .elements ._4box {
    display: block;
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
    margin: 0;
  }
  .home-page #info-btn { max-width: 90vw; max-height: 100%; height: auto; width: 50cqh; }
}

.click_dat, .tap_dat {
  grid-column: 1;
  align-items: center;
  justify-content: center;
  font-size: clamp(12px, 1.5vw, 16px);
  line-height: 1.3;
  min-height: 22px;
  white-space: nowrap;
}
.click_dat { display: flex; }
.tap_dat { display: none; }
@media (hover: none), (pointer: coarse) {
  .click_dat { display: none; }
  .tap_dat { display: flex; }
}

body.element-page #home_container,
body.info-study #home_container {
  width: min(92vw, 142.222222svh);
  height: 76svh;
}

body.element-page #home_container { grid-template-columns:minmax(0,1fr); }