/**
 * landing.css — public marketing pages only.
 * ---------------------------------------------------------------------------
 * The scroll-driven gallery, 3D hero phone and reveal animations are used by
 * templates/landing/* and nothing else. They used to live in head.php, which
 * meant every signed-in student downloaded ~200 lines of carousel CSS they
 * would never see.
 *
 * Loaded only when templates/layouts/landing.php sets $isLanding.
 * Depends on the tokens in theme.css (--glass-*, --ease).
 */

/* ── Scroll-driven school gallery (3D carousel) ──────────────────────────── */
.sg-section {
  position: relative;
  height: calc(100vh + (var(--sg-count, 8) - 1) * 55vh);
}

.sg-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #F4F0EC;
  transition: background .3s ease;
}

html.dark .sg-sticky {
  background: #121212;
}

.sg-sticky::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 10;
  pointer-events: none;
  background:
    linear-gradient(90deg, #F4F0EC 0%, transparent 10%, transparent 90%, #F4F0EC 100%),
    linear-gradient(180deg, rgba(244, 240, 236, .5) 0%, transparent 16%, transparent 84%, rgba(244, 240, 236, .6) 100%);
  transition: background .3s ease;
}

html.dark .sg-sticky::before {
  background:
    linear-gradient(90deg, #121212 0%, transparent 10%, transparent 90%, #121212 100%),
    linear-gradient(180deg, rgba(18, 18, 18, .5) 0%, transparent 16%, transparent 84%, rgba(18, 18, 18, .6) 100%);
}

.sg-head {
  position: absolute;
  top: 5vh;
  left: 0;
  right: 0;
  text-align: center;
  z-index: 20;
}

.sg-ring {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  perspective: 1400px;
  perspective-origin: 50% 50%;
}

.sg-card {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
  will-change: transform, filter, opacity;
  transition: transform .45s cubic-bezier(.22, 1, .36, 1),
              filter .45s cubic-bezier(.22, 1, .36, 1),
              opacity .45s cubic-bezier(.22, 1, .36, 1);
}

.sg-card__face {
  width: var(--sg-w, 300px);
  height: var(--sg-h, 400px);
  border-radius: 20px;
  overflow: hidden;
  background: #E9E2DB;
  box-shadow: 0 20px 60px -15px rgba(0, 0, 0, .25);
  flex-shrink: 0;
}

html.dark .sg-card__face {
  background: #1E1E1E;
  box-shadow: 0 20px 60px -15px rgba(0, 0, 0, .6);
}

.sg-card.is-active .sg-card__face {
  box-shadow:
    0 28px 80px -10px rgba(0, 0, 0, .3),
    0 0 60px -10px rgba(255, 107, 0, .15);
}

html.dark .sg-card.is-active .sg-card__face {
  box-shadow:
    0 28px 80px -10px rgba(0, 0, 0, .7),
    0 0 60px -10px rgba(255, 107, 0, .15);
}

.sg-card__face img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.sg-card__label {
  margin-top: 14px;
  font-family: var(--serif, 'Fraunces', serif);
  font-size: .95rem;
  letter-spacing: .02em;
  opacity: 0;
  transition: opacity .4s ease;
  white-space: nowrap;
  pointer-events: none;
  color: #1E1E1E;
}

html.dark .sg-card__label {
  color: #fff;
}

.sg-card.is-active .sg-card__label {
  opacity: 1;
}

.sg-hint {
  position: absolute;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 20;
  color: rgba(0, 0, 0, .25);
  animation: sg-bob 2s ease-in-out infinite;
  transition: opacity .4s ease;
}

html.dark .sg-hint {
  color: rgba(255, 255, 255, .25);
}

@keyframes sg-bob {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50%      { transform: translateX(-50%) translateY(6px); }
}

@media (max-width: 900px) { .sg-ring { --sg-w: 240px; --sg-h: 320px; } }
@media (max-width: 620px) { .sg-ring { --sg-w: 180px; --sg-h: 250px; } }
@media (max-width: 400px) { .sg-ring { --sg-w: 150px; --sg-h: 210px; } }

/* ── Scroll-reveal animations ────────────────────────────────────────────── */
.o-reveal {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity .7s cubic-bezier(.22, 1, .36, 1), transform .7s cubic-bezier(.22, 1, .36, 1);
}

.o-reveal.is-visible {
  opacity: 1;
  transform: none;
}

.o-reveal-item {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .5s cubic-bezier(.22, 1, .36, 1), transform .5s cubic-bezier(.22, 1, .36, 1);
  transition-delay: var(--d, 0ms);
}

.o-reveal.is-visible .o-reveal-item {
  opacity: 1;
  transform: none;
}

/* ── Scroll-driven phone stage + shuffle gallery ─────────────────────────── */
.o-glow {
  background: radial-gradient(closest-side, rgba(234, 106, 30, .28), transparent);
}

.o-stage-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.o-shot {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
  opacity: 0;
  transform: scale(1.04);
  transition: opacity .5s ease, transform .8s ease;
}

.o-shot.on {
  opacity: 1;
  transform: scale(1);
}

.o-tile {
  opacity: 0;
  transform: translateY(48px) rotate(var(--r, 0deg)) scale(.86);
  transition: opacity .7s cubic-bezier(.22, 1, .36, 1), transform .7s cubic-bezier(.22, 1, .36, 1);
  transition-delay: calc(var(--i, 0) * 90ms);
}

.o-gallery.in .o-tile {
  opacity: 1;
  transform: none;
}

/* ── 3D hero phone ───────────────────────────────────────────────────────── */
.hero-phone {
  width: 260px;
  margin: 0 auto;
}

@media (min-width: 640px) {
  .hero-phone { width: 300px; }
}

.hero-phone__body {
  position: relative;
  border-radius: 2.4rem;
  background: #1a1a1a;
  padding: 12px;
  box-shadow: 0 25px 60px rgba(0, 0, 0, .3), 0 4px 16px rgba(0, 0, 0, .15);
  transform: rotateY(-12deg) rotateX(4deg);
  transform-style: preserve-3d;
}

html.dark .hero-phone__body { background: #000; }

.hero-phone__screen {
  position: relative;
  border-radius: 1.9rem;
  overflow: hidden;
  background: #fff;
  aspect-ratio: 9 / 19.5;
}

html.dark .hero-phone__screen { background: #1e1e2e; }

.hero-phone__notch {
  position: absolute;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
  height: 20px;
  width: 80px;
  border-radius: 999px;
  background: #1a1a1a;
}

html.dark .hero-phone__notch { background: #000; }

.hero-phone__slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
  opacity: 0;
  transform: scale(1.06);
  transition: opacity .6s ease, transform .8s cubic-bezier(.22, 1, .36, 1);
}

.hero-phone__slide.is-active { opacity: 1; transform: scale(1); }
.hero-phone__slide.is-prev   { opacity: 0; transform: scale(.94); }

/* ── Motion preference ───────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .sg-section { height: auto; }
  .sg-sticky  { position: relative; height: auto; min-height: 80vh; padding: 40px 0; }
  .sg-ring    { flex-wrap: wrap; gap: 16px; perspective: none; position: static; justify-content: center; }
  .sg-card    { position: static !important; transform: none !important; filter: none !important; opacity: 1 !important; transition: none !important; }
  .sg-card__label { opacity: 1; }
  .sg-hint    { display: none; }

  .o-reveal,
  .o-reveal-item { opacity: 1; transform: none; transition: none; }
  .o-shot { transition: none; }
  .o-tile { transition: none; opacity: 1; transform: none; }
  .hero-phone__slide { transition: none !important; }
}