/* ============================================================
   Grow A Classroom — entrance splash (v4)
   Problem → solution, typewritten, on the brand's dark canopy
   stage; then the screen brightens to the homepage's own paper
   background and the real logo (true colours) settles in large
   with the tagline. No illustration.

   State model:
   - Cumulative classes on #gac-splash for things that, once shown,
     stay shown: is-framed, is-finale, is-logo-in, is-tagline-in,
     is-exit.
   - A single data-line attribute ("1" | "2") for the two story
     lines, which are mutually exclusive — switching/clearing it
     lets a plain opacity transition crossfade between them.
   - .gac-lines and .gac-finale are toggled with display (not
     opacity) so whichever one is "on stage" is the only one the
     outer flex column has to centre — no shared-height guessing
     between a couple of lines of text and a full logo lockup.

   Click-anywhere-to-skip note: every decorative layer in here is
   pointer-events:none (see the bottom of this file) so a click
   always reaches #gac-splash itself, whichever layer is on top.
   ============================================================ */

:root {
  --canopy-deep: #08432A; /* the dark stage — a shade below --canopy */
  --frame:       #04231A; /* near-black letterbox bars               */
}

.gac-splash {
  background-color: var(--canopy-deep);
  transition: opacity .7s ease;
}
.gac-splash.is-exit { opacity: 0; }

/* ---------- cinematic letterbox frame ---------- */
.gac-bar {
  height: 28px;
  background-color: var(--frame);
  transition: transform .7s cubic-bezier(.22,.61,.36,1);
}
@media (min-width: 640px) { .gac-bar { height: 40px; } }
.gac-bar-top    { transform: translateY(-100%); }
.gac-bar-bottom { transform: translateY(100%); }
.gac-splash.is-framed .gac-bar-top,
.gac-splash.is-framed .gac-bar-bottom { transform: translateY(0); }
.gac-splash.is-exit .gac-bar-top    { transform: translateY(-100%); }
.gac-splash.is-exit .gac-bar-bottom { transform: translateY(100%); }

/* ---------- ambient backdrop — the dark stage only ---------- */
.gac-grid {
  background-image:
    linear-gradient(rgba(241,242,234,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(241,242,234,.05) 1px, transparent 1px);
  background-size: 34px 34px;
  mask-image: radial-gradient(circle at 50% 46%, black 0%, transparent 72%);
  -webkit-mask-image: radial-gradient(circle at 50% 46%, black 0%, transparent 72%);
  transition: opacity .8s ease;
}
.gac-glow {
  width: 620px; height: 620px; left: 50%; top: 46%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(140,198,62,.16), rgba(140,198,62,0) 65%);
  animation: gac-pulse 5s ease-in-out infinite;
  transition: opacity .8s ease;
}
@keyframes gac-pulse {
  0%, 100% { opacity: .7; transform: translate(-50%, -50%) scale(1); }
  50%      { opacity: 1;  transform: translate(-50%, -50%) scale(1.06); }
}
.gac-particle {
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--sprout);
  opacity: 0;
  animation: gac-drift 4s ease-out infinite;
}
.gac-particle-1 { left: 30%; top: 68%; animation-delay: .2s;  --drift-x: 16px; }
.gac-particle-2 { left: 68%; top: 62%; animation-delay: 1.2s; --drift-x: -12px; }
.gac-particle-3 { left: 40%; top: 30%; animation-delay: 2.1s; --drift-x: 10px; }
.gac-particle-4 { left: 62%; top: 34%; animation-delay: 2.9s; --drift-x: -18px; }
@keyframes gac-drift {
  0%   { opacity: 0;  transform: translate(0, 0) scale(.6); }
  15%  { opacity: .5; }
  100% { opacity: 0;  transform: translate(var(--drift-x, 10px), -130px) scale(1); }
}
/* fade the whole dark-stage atmosphere out once daylight arrives */
.gac-splash.is-finale .gac-grid,
.gac-splash.is-finale .gac-glow { opacity: 0; }
.gac-splash.is-finale .gac-particle { animation: none; opacity: 0; transition: opacity .6s ease; }

/* ---------- the daylight wipe: dark stage → homepage's own background ---------- */
.gac-daylight {
  background-color: var(--paper);
  clip-path: circle(0vmax at 50% 50%);
  transition: clip-path 1.3s cubic-bezier(.65,0,.35,1);
}
.gac-splash.is-finale .gac-daylight { clip-path: circle(150vmax at 50% 50%); }

/* ---------- the story stage: two lines, typewritten, sharing one slot ---------- */
.gac-lines { min-height: 110px; }
@media (min-width: 640px) { .gac-lines { min-height: 160px; } }
.gac-splash.is-finale .gac-lines { display: none; }

.gac-line {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  opacity: 0;
  transition: opacity .45s ease;
}
.gac-splash[data-line="1"] .gac-line-1 { opacity: 1; }
.gac-splash[data-line="2"] .gac-line-2 { opacity: 1; }

/* blinking caret while a line is actively being typed */
.gac-line.gac-typing .gac-type-visual::after {
  content: '';
  display: inline-block;
  width: 2px; height: .85em;
  margin-left: 3px;
  background: var(--sprout);
  vertical-align: -0.1em;
  animation: gac-caret 1s step-end infinite;
}
@keyframes gac-caret { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }

/* ---------- the finale stage: logo + tagline, homepage colours ---------- */
.gac-finale { display: none; }
.gac-splash.is-finale .gac-finale { display: flex; }

.gac-mark-corner {
  position: absolute; width: 14px; height: 14px;
  border: 1.5px solid var(--sprout);
  opacity: 0;
  pointer-events: none;
}
.gac-mark-corner-tl { top: -12px; left: -12px; border-right: none; border-bottom: none; }
.gac-mark-corner-br { bottom: -12px; right: -12px; border-left: none; border-top: none; }

.gac-mark {
  opacity: 0; transform: scale(.85);
  transition: opacity .9s ease, transform .9s cubic-bezier(.34,1.56,.64,1);
}
.gac-splash.is-logo-in .gac-mark { opacity: 1; transform: scale(1); }
.gac-splash.is-logo-in .gac-mark-corner { opacity: 1; transition: opacity .5s ease .3s; }

.gac-logo { display: block; } /* true colours — no filter; this is why the background had to brighten */

.gac-tagline {
  opacity: 0; transform: translateY(10px); filter: blur(6px);
  transition: opacity .7s ease, transform .7s cubic-bezier(.22,.61,.36,1), filter .7s ease;
}
.gac-splash.is-tagline-in .gac-tagline { opacity: 1; transform: none; filter: blur(0); }

.gac-rule {
  width: 0; height: 2px;
  background-color: var(--sprout);
  transition: width .8s cubic-bezier(.65,0,.35,1) .3s;
}
.gac-splash.is-tagline-in .gac-rule { width: 72px; }

/* ---------- skip control — recolours for the bright finale ---------- */
.gac-skip {
  opacity: 0;
  animation: gac-fade-in .5s ease .5s forwards;
  transition: color .4s ease, border-color .4s ease, background-color .4s ease;
}
@keyframes gac-fade-in { from { opacity: 0; } to { opacity: 1; } }
.gac-splash.is-exit .gac-skip { animation: none; opacity: 0; }
.gac-splash.is-finale .gac-skip { color: rgba(28,28,22,.65); border-color: rgba(28,28,22,.22); }
.gac-splash.is-finale .gac-skip:hover { background-color: rgba(28,28,22,.06); color: var(--ink); }

/* ---------- click-anywhere-to-skip: let clicks fall through every decorative layer ---------- */
.gac-splash * { pointer-events: none; }
.gac-splash #gac-splash-skip { pointer-events: auto; }

/* ---------- reduced motion: same words, same logo, none of the motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .gac-bar, .gac-daylight, .gac-mark, .gac-tagline, .gac-rule, .gac-skip, .gac-grid, .gac-glow {
    transition: opacity .35s ease !important;
    animation: none !important;
    transform: none !important;
    clip-path: none !important;
  }
  .gac-particle { display: none; }
  .gac-line { transition: opacity .35s ease; }
  .gac-line.gac-typing .gac-type-visual::after { display: none; }
  .gac-splash.is-finale .gac-daylight { clip-path: none; }
  .gac-splash.is-logo-in .gac-mark-corner { transition: opacity .3s ease; }
  .gac-rule { width: 72px; }
}

/* ---------- scroll lock while the splash is active ---------- */
html.gac-scroll-lock, html.gac-scroll-lock body { overflow: hidden; height: 100%; }