/* Social Night, Halloween edition (SPEC 9.8). OakMUN's Social Night browns and gold, a
   night-sky hero with a moon, a few bats and rising embers. Fun but tidy: no sound, no
   jump-scares, and only transform and opacity move. */

/* ---------- Hero ---------- */

/* Without the glyph portal (no JavaScript, reduced motion) this is the whole hero: the night
   sky with the moon, and the title block. With it, social-night.js moves these parts into the
   portal and the section steps aside (see "Glyph portal" below). */
.sn-hero {
  position: relative;
  overflow: clip;
  display: grid;
  align-items: center;
  min-height: clamp(560px, 92svh, 880px);
  padding: calc(var(--section-pad) + 32px) 0 104px;
}

/* Where the moon sits, as a share of the sky; its glow follows it */
.sn-scene {
  --moon-x: 74%;
  --moon-y: 46%;
  position: absolute;
  inset: 0;
  overflow: clip;
  background:
    radial-gradient(circle at var(--moon-x) var(--moon-y), rgb(var(--sn-gold-rgb) / 0.2), transparent 24%),
    radial-gradient(circle at var(--moon-x) var(--moon-y), rgb(var(--teal-light-rgb) / 0.14), transparent 48%),
    radial-gradient(130% 45% at 50% 108%, rgb(var(--sn-amber-rgb) / 0.42), transparent 70%),
    linear-gradient(180deg, var(--blue-500) 0%, var(--blue-650) 38%, var(--blue-800) 78%, var(--sn-brown-3) 100%);
}

/* The moon: a rendered image (scripts/make-moon.mjs) with a soft gold glow, warmer at the
   edge that faces away from the light */
.sn-moon {
  position: absolute;
  top: var(--moon-y);
  left: var(--moon-x);
  width: clamp(280px, 30vw, 460px);
  overflow: hidden;
  aspect-ratio: 1;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  box-shadow:
    0 0 50px rgb(var(--sn-gold-rgb) / 0.32),
    0 0 140px rgb(var(--sn-gold-rgb) / 0.16),
    0 0 300px rgb(var(--sn-glow-rgb) / 0.08);
}

.sn-moon picture,
.sn-moon img {
  display: block;
  width: 100%;
  height: 100%;
}

.sn-moon::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  box-shadow: inset -18px -14px 44px rgb(var(--sn-amber-rgb) / 0.2);
}

.sn-hero__text {
  position: relative;
  z-index: 3;
}

.sn-hero__text > * {
  max-width: 600px;
}

.sn-hero__title {
  font-size: clamp(3.2rem, 8vw, 7rem);
  font-weight: 900;
  letter-spacing: -0.04em;
  line-height: 0.92;
  color: var(--sn-cream);
  text-shadow: 0 2px 24px rgb(var(--shadow-rgb) / 0.35);
}

.sn-hero__title span {
  display: block;
  margin-top: 0.12em;
  font-size: 0.6em;
  letter-spacing: -0.03em;
  color: var(--sn-pumpkin);
}

.sn-hero__meta {
  margin-top: 28px;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--sn-amber);
}

.sn-btn {
  margin-top: 36px;
  border-color: rgb(var(--sn-gold-rgb) / 0.45);
  color: var(--sn-cream);
}

@media (hover: hover) {
  .sn-btn:hover {
    border-color: var(--sn-amber);
    transform: translateY(-2px);
  }
}

/* ---------- Glyph portal (PLAN.md F22) ---------- */

/* Before the island arrives: a dark screen where the opening frame will be, not the hero. */
.portal-on .sn-intro:not(.has-portal) .sn-hero {
  min-height: 100svh;
  background: var(--sn-brown-3);
}

.portal-on .sn-intro:not(.has-portal) .sn-hero > * {
  visibility: hidden;
}

.has-portal .sn-hero {
  display: none;
}

.sn-portal {
  --gp-paper: var(--sn-brown-3);
  --gp-ink: var(--ink);
  --gp-field: var(--blue-800);
  --gp-foreground: var(--ink);
  font-family: var(--font-sans);
}

/* The sky behind the letters, drawing slightly closer as you go in. Its own layer, so moving
   the letters' clip each frame doesn't repaint the sky, the moon's glow or the bats. */
.sn-portal__scene {
  position: absolute;
  inset: 0;
  transform: scale(var(--gp-field-scale, 1));
  will-change: transform;
}

.sn-portal [data-gp-content] {
  padding: 0;
}

.sn-portal__content {
  padding-block: 112px 72px;
}

/* The opening frame: the edition above the word, the day below, and how to go on */
.sn-front {
  position: absolute;
  inset: 0;
  text-align: center;
}

.sn-front p {
  position: absolute;
  right: var(--gutter);
  left: var(--gutter);
}

.sn-front__eyebrow {
  bottom: calc(100% - var(--gp-word-top, 30%) + 28px);
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--sn-amber);
}

.sn-front__meta {
  top: calc(var(--gp-word-bottom, 60%) + 24px);
  font-size: 1rem;
  font-weight: 600;
  color: var(--ink-85);
}

.sn-front__hint {
  bottom: 88px;
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--ink-60);
}

.sn-portal [data-gp-caption] {
  inset: auto var(--gutter) 28px;
  justify-content: center;
  font: 600 0.85rem/1.4 var(--font-sans);
  color: var(--ink-75);
}

.sn-portal [data-gp-enter] {
  text-decoration: underline;
  text-underline-offset: 4px;
}

.sn-portal [data-gp-enter] > span,
.sn-portal [data-gp-touch-picker] {
  display: none;
}

/* ---------- Bats and embers (built by social-night.js) ---------- */

/* In front of the moon: bats are closer than it is */
.sn-sky {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}

/* A bat is two wings and a body, drawn from below. social-night.js flies it (its transform)
   and beats its wings (theirs), in 3D: the wings swing about the shoulders. Far bats are
   paler (--haze). */
.bat {
  position: absolute;
  top: 0;
  left: 0;
  width: var(--size);
  height: calc(var(--size) * 0.4);
  margin: calc(var(--size) * -0.2) 0 0 calc(var(--size) * -0.5);
  transform-style: preserve-3d;
  will-change: transform;
}

.bat svg {
  display: block;
  width: 100%;
  height: 100%;
  fill: color-mix(in srgb, var(--blue-950), var(--blue-650) var(--haze, 0%));
}

.bat__wing {
  position: absolute;
  top: 8%;
  width: 50%;
  height: 85%;
}

.bat__wing--left {
  left: 0;
  transform-origin: 100% 18%;
}

.bat__wing--right {
  left: 50%;
  transform-origin: 0 18%;
}

.bat__body {
  position: absolute;
  top: 0;
  left: 42%;
  width: 16%;
  height: 85%;
}

.ember {
  position: absolute;
  bottom: -6px;
  left: var(--x);
  width: var(--s);
  height: var(--s);
  border-radius: 50%;
  background: var(--sn-amber);
  box-shadow: 0 0 6px 1px rgb(var(--sn-glow-rgb) / 0.55);
  opacity: 0;
  animation: ember-rise var(--dur) linear var(--delay) infinite;
}

@keyframes ember-rise {
  0% {
    opacity: 0;
    transform: translate3d(0, 0, 0);
  }

  12% {
    opacity: 0.85;
  }

  65% {
    opacity: 0.5;
  }

  100% {
    opacity: 0;
    transform: translate3d(var(--dx), calc(var(--rise) * -1), 0);
  }
}

/* Off-screen or in a hidden tab, nothing moves */
.sn-sky.is-paused * {
  animation-play-state: paused;
}

@media (prefers-reduced-motion: reduce) {
  .sn-sky {
    display: none;
  }
}

/* ---------- Cobwebs: thin keylines in a corner, low opacity ---------- */

.cobweb {
  position: absolute;
  width: 150px;
  height: 150px;
  fill: none;
  stroke: var(--ink);
  stroke-width: 0.7;
  opacity: 0.14;
  pointer-events: none;
}

.cobweb--hero {
  top: 0;
  left: 0;
}

.cobweb--faq {
  top: 0;
  right: 0;
  transform: scaleX(-1);
}

/* ---------- What to expect, what to wear, when and where ---------- */

.sn-info {
  padding: 88px 0;
  background: var(--sn-brown-3);
}

.sn-info__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 48px;
}

.sn-info__item {
  padding-top: 24px;
  border-top: 1px solid rgb(var(--sn-gold-rgb) / 0.22);
}

.sn-info__title {
  font-size: 1.35rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--sn-cream);
}

.sn-info__item p {
  margin-top: 12px;
  color: var(--ink-75);
}

.sn-when {
  display: grid;
  gap: 10px;
  margin-top: 14px;
}

.sn-when div {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  align-items: baseline;
  gap: 12px;
}

.sn-when dt {
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--sn-amber);
}

.sn-when dd {
  color: var(--ink-85);
}

/* ---------- 3D photo booth ---------- */

.sn-booth {
  background: var(--grad-night);
}

.sn-title {
  color: var(--sn-cream);
}

.sn-booth__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: 64px;
}

.sn-booth__lead {
  max-width: 520px;
  margin-top: 24px;
  font-size: var(--fs-lead);
  color: var(--ink-85);
}

.sn-booth__media {
  overflow: hidden;
  max-width: 460px;
  aspect-ratio: 4 / 5;
  border: 1px solid rgb(var(--sn-gold-rgb) / 0.2);
  border-radius: var(--radius-tile);
}

.sn-booth__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.sn-booth__media .photo-tbc {
  background: rgb(var(--sn-gold-rgb) / 0.04);
}

/* ---------- FAQ, in amber instead of teal ---------- */

.sn-faq {
  position: relative;
  background: var(--sn-brown-3);
}

.sn-faq__inner {
  max-width: calc(820px + 2 * var(--gutter));
}

.sn-faq .faq-list {
  margin-top: 40px;
}

.sn-faq .faq-item:hover {
  border-color: rgb(var(--sn-gold-rgb) / 0.2);
}

.sn-faq .faq-item.is-open {
  border-color: rgb(var(--sn-gold-rgb) / 0.35);
  background: rgb(var(--sn-gold-rgb) / 0.05);
}

.sn-faq .faq-item.is-open .faq-toggle {
  border-color: var(--sn-amber);
  background: var(--sn-amber);
  color: var(--sn-brown-3);
}

/* ---------- Phones: the moon sits above the title, smaller ---------- */

@media (max-width: 768px) {
  .sn-hero {
    align-items: end;
    min-height: max(600px, 100svh);
    padding: calc(var(--section-pad) + 40px) 0 56px;
  }

  .sn-scene {
    --moon-x: 50%;
    --moon-y: 34%;
  }

  .sn-moon {
    width: min(52vw, 220px);
    box-shadow:
      0 0 32px rgb(var(--sn-gold-rgb) / 0.32),
      0 0 90px rgb(var(--sn-gold-rgb) / 0.16);
  }

  .sn-hero__meta {
    font-size: 0.78rem;
    letter-spacing: 0.12em;
  }

  .sn-btn {
    margin-top: 28px;
  }

  /* In the portal the title block sits low, under the moon */
  .sn-portal [data-gp-content] {
    align-content: end;
  }

  .sn-portal__content {
    padding-block: 0 56px;
  }

  .sn-front__hint {
    bottom: 80px;
  }

  .cobweb {
    width: 100px;
    height: 100px;
  }

  .sn-info {
    padding: 48px 0 64px;
  }

  .sn-info__grid,
  .sn-booth__grid {
    grid-template-columns: 1fr;
    gap: 36px;
  }
}