/* ==========================================================================
   Camp Osprey motion layer (staged for review)
   1. Intro       : 1.4s badge reveal that replaces the 8s / 1 MB video preloader
   2. Rate ladder : animated early-bird price steps with a live "you are here" pin
   3. Sky day     : the Camp Life schedule scrolls from sunrise to starlight
   Everything animates transform/opacity only and respects prefers-reduced-motion.
   ========================================================================== */

/* ---------- 1. INTRO ---------- */
.intro {
  position: fixed; inset: 0; z-index: 10050;
  display: grid; place-items: center;
  background: radial-gradient(ellipse at 50% 42%, #253a66 0%, #15213d 52%, #0b1224 100%);
  pointer-events: none;                       /* never blocks the page underneath */
  animation: introOut .6s var(--ease) 1.35s forwards;
}
.no-intro .intro { display: none; }
.intro-stage {
  position: relative; width: min(44vmin, 250px); aspect-ratio: 1;
  animation: stageOut .6s var(--ease) 1.35s forwards;
}
.intro-glow {
  position: absolute; inset: -30%; border-radius: 50%;
  background: radial-gradient(circle, rgba(249,199,79,.34) 0%, rgba(249,199,79,.08) 38%, transparent 66%);
  opacity: 0; transform: scale(.6);
  animation: glowIn 1.1s var(--ease) .1s forwards;
}
.intro-ring { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; transform: rotate(-90deg); }
.intro-ring circle {
  fill: none; stroke: #f9c74f; stroke-width: 2.4; stroke-linecap: round;
  stroke-dasharray: 578; stroke-dashoffset: 578;
  filter: drop-shadow(0 0 5px rgba(249,199,79,.85));
  animation: ringDraw 1s cubic-bezier(.65,0,.35,1) .05s forwards;
}
.intro-badge {
  position: absolute; inset: 9%; width: 82%; height: 82%; object-fit: contain;
  opacity: 0; transform: scale(.8) rotate(-8deg);
  filter: drop-shadow(0 12px 34px rgba(0,0,0,.45));
  animation: badgeIn .95s cubic-bezier(.2,.9,.25,1.12) .2s forwards;
}
.intro-shine { position: absolute; inset: 9%; border-radius: 50%; overflow: hidden; }
.intro-shine::after {
  content: ''; position: absolute; top: -25%; bottom: -25%; left: 0; width: 38%;
  background: linear-gradient(100deg, transparent 0%, rgba(255,244,214,.6) 50%, transparent 100%);
  transform: translateX(-160%) skewX(-14deg);
  animation: shine .85s ease-in-out .75s forwards;
}
.intro-sparks span {
  position: absolute; left: 50%; top: 50%; width: 5px; height: 5px; margin: -2.5px 0 0 -2.5px;
  border-radius: 50%; background: #fff1c2; box-shadow: 0 0 8px 2px rgba(249,199,79,.85);
  opacity: 0; animation: spark 1.15s cubic-bezier(.15,.75,.3,1) calc(.4s + var(--d)) forwards;
}
.intro-tag {
  position: absolute; left: 50%; top: calc(100% + 16px); white-space: nowrap;
  font-family: var(--font-hand); font-size: clamp(1.25rem, 4.4vmin, 1.75rem); color: #ffe39a;
  opacity: 0; transform: translate(-50%, 10px);
  animation: tagIn .6s var(--ease) .8s forwards;
}
/* hero cascade starts as the curtain lifts, so the intro hands off instead of hiding it */
.intro-on .anim-hero { animation-delay: calc(var(--d) + 1.3s); }

@keyframes ringDraw { to { stroke-dashoffset: 0; } }
@keyframes glowIn  { to { opacity: 1; transform: scale(1); } }
@keyframes badgeIn { to { opacity: 1; transform: scale(1) rotate(0deg); } }
@keyframes shine   { to { transform: translateX(360%) skewX(-14deg); } }
@keyframes tagIn   { to { opacity: 1; transform: translate(-50%, 0); } }
@keyframes spark {
  0%   { opacity: 0; transform: rotate(var(--a)) translateX(40px) scale(.7); }
  18%  { opacity: 1; }
  100% { opacity: 0; transform: rotate(var(--a)) translateX(var(--r)) scale(.25); }
}
@keyframes introOut { to { opacity: 0; visibility: hidden; } }
@keyframes stageOut { to { transform: scale(1.08); } }

/* ---------- 2. RATE LADDER ---------- */
.rate-ladder {
  max-width: 880px; margin: 0 auto 56px; padding: clamp(24px, 4vw, 40px);
  border-radius: var(--radius-xl); color: var(--white); position: relative; overflow: hidden;
  background:
    radial-gradient(ellipse at 88% -10%, rgba(45,212,168,.22), transparent 55%),
    radial-gradient(ellipse at 0% 110%, rgba(249,199,79,.16), transparent 50%),
    linear-gradient(160deg, #22335a 0%, var(--navy) 60%);
  box-shadow: 0 24px 60px rgba(26,39,68,.28);
}
.rl-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 8px 24px; margin-bottom: 30px; }
.rl-eyebrow { display: block; font-family: var(--font-display); font-weight: 600; letter-spacing: .14em; text-transform: uppercase; font-size: .75rem; color: var(--teal); margin-bottom: 6px; }
.rl-title { font-family: var(--font-display); font-size: clamp(1.35rem, 3.2vw, 1.85rem); line-height: 1.15; color: var(--white); }
.rl-countdown { font-family: var(--font-display); font-size: .95rem; color: rgba(255,255,255,.82); }
.rl-days { display: inline-block; min-width: 2ch; font-size: 1.6rem; font-weight: 700; color: var(--gold); margin-right: 2px; font-variant-numeric: tabular-nums; }

.rl-chart { position: relative; }
.rl-steps { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(10px, 2.6vw, 24px); position: relative; z-index: 1; }
.rl-step { display: grid; grid-template-rows: clamp(170px, 22vw, 210px) auto; }
.rl-col { position: relative; }
.rl-bar {
  position: absolute; left: 0; right: 0; bottom: 0; height: var(--h);
  border-radius: 18px 18px 8px 8px;
  background: linear-gradient(180deg, rgba(255,255,255,.2), rgba(255,255,255,.07));
  border: 1px solid rgba(255,255,255,.14);
  transform: scaleY(0); transform-origin: 50% 100%;
  transition: transform .75s cubic-bezier(.2,.9,.25,1.05) var(--delay, 0s);
}
.rl-price {
  position: absolute; left: 50%; top: 14px; transform: translate(-50%, 8px);
  font-family: var(--font-display); font-weight: 700; font-size: clamp(1.25rem, 3.4vw, 2rem); color: var(--white);
  opacity: 0; transition: opacity .45s var(--ease) calc(var(--delay, 0s) + .45s), transform .45s var(--ease) calc(var(--delay, 0s) + .45s);
}
.rl-when { margin-top: 12px; text-align: center; line-height: 1.3; }
.rl-when strong { display: block; font-family: var(--font-display); font-size: .95rem; }
.rl-when span { font-size: .8rem; color: rgba(255,255,255,.7); }

.rl-step.is-now .rl-bar {
  background: linear-gradient(180deg, var(--teal) 0%, var(--teal-dark) 100%); border-color: transparent;
  box-shadow: 0 0 0 1px rgba(45,212,168,.4), 0 14px 36px rgba(45,212,168,.35);
}
.rl-step.is-now .rl-price { color: var(--navy); }
.rl-step.is-past .rl-bar { background: rgba(255,255,255,.05); }
.rl-step.is-past .rl-price { color: rgba(255,255,255,.45); text-decoration: line-through; }
.rl-step.is-past .rl-when { opacity: .55; }

.rl-pin {
  position: absolute; left: 50%; bottom: calc(var(--h) + 14px); white-space: nowrap; z-index: 2;
  padding: 6px 12px; border-radius: 50px; background: var(--sunset); color: var(--white);
  font-family: var(--font-display); font-weight: 700; font-size: .78rem; box-shadow: 0 8px 20px rgba(244,132,95,.4);
  opacity: 0; transform: translate(-50%, -24px);
  transition: opacity .35s var(--ease) 1.05s, transform .55s cubic-bezier(.3,1.6,.5,1) 1.05s;
}
.rl-pin::after { content: ''; position: absolute; left: 50%; bottom: -5px; width: 10px; height: 10px; background: var(--sunset); transform: translateX(-50%) rotate(45deg); border-radius: 2px; }
.rl-step:not(.is-now) .rl-pin { display: none; }

.rl-link { position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; z-index: 0; }
.rl-link path { fill: none; stroke: var(--gold); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 2 9; opacity: 0; transition: opacity .6s var(--ease) .95s; }

.rl-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 24px; margin-top: 28px; }
.rl-note { font-size: .85rem; color: rgba(255,255,255,.75); max-width: 440px; }
.rl-cta { white-space: nowrap; }

.rate-ladder.in-view .rl-bar { transform: scaleY(1); }
.rate-ladder.in-view .rl-price { opacity: 1; transform: translate(-50%, 0); }
.rate-ladder.in-view .rl-pin { opacity: 1; transform: translate(-50%, 0); }
.rate-ladder.in-view .rl-link path { opacity: .85; animation: rise 1.1s linear infinite; }
.rate-ladder.in-view .is-now .rl-bar { animation: nowPulse 2.6s ease-in-out 1.6s infinite; }
@keyframes rise { to { stroke-dashoffset: -11; } }
@keyframes nowPulse { 50% { box-shadow: 0 0 0 1px rgba(45,212,168,.4), 0 14px 46px rgba(45,212,168,.62); } }

@media (max-width: 560px) {
  .rl-when strong { font-size: .85rem; }
  .rl-when span { font-size: .72rem; }
  .rl-pin { font-size: .7rem; padding: 5px 9px; }
  .rl-foot { flex-direction: column; align-items: stretch; text-align: center; }
  .rl-note { max-width: none; }
}

/* ---------- 3. SKY DAY (Camp Life schedule) ---------- */
/* A viewport-sized sky stays pinned (sticky) while the schedule scrolls past it.
   overflow:clip (not hidden) keeps sticky working; padding moves inside so the sky covers edge to edge. */
.life-section.sky-mode { padding: 0; overflow: clip; isolation: isolate; background: #fef3e3; }
.life-section.sky-mode > .container { padding-top: 100px; padding-bottom: 100px; }
.sky { position: sticky; top: 0; height: 100vh; margin-bottom: -100vh; z-index: -1; pointer-events: none; overflow: hidden; }
.sky-layer { position: absolute; inset: 0; opacity: 0; will-change: opacity; }
.sky-dawn   { background: linear-gradient(180deg, #ffc9a3 0%, #ffe3c4 40%, #fef6ea 82%); }
.sky-day    { background: linear-gradient(180deg, #7fbfef 0%, #bfe0f8 44%, #eef7fd 84%); }
.sky-sunset { background: linear-gradient(180deg, #6d4c8d 0%, #e5707a 30%, #f9a65a 60%, #fdd79b 88%); }
.sky-night  { background: linear-gradient(180deg, #070d1c 0%, #111c36 55%, #1a2744 100%); }
.sky-stars {
  background-image:
    radial-gradient(1.5px 1.5px at 8% 12%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 18% 34%, #fff 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 27% 8%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 36% 52%, #fff 50%, transparent 51%),
    radial-gradient(2px 2px at 44% 22%, #fffbe6 50%, transparent 51%), radial-gradient(1px 1px at 53% 64%, #fff 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 62% 14%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 71% 40%, #fff 50%, transparent 51%),
    radial-gradient(2px 2px at 79% 6%, #fffbe6 50%, transparent 51%), radial-gradient(1px 1px at 88% 30%, #fff 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 94% 58%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 12% 70%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 23% 88%, #fff 50%, transparent 51%), radial-gradient(1.5px 1.5px at 67% 82%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 84% 92%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 49% 94%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 4% 46%, #fff 50%, transparent 51%), radial-gradient(1.5px 1.5px at 31% 76%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 58% 38%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 97% 18%, #fff 50%, transparent 51%);
}
.sky-stars.twinkle { animation: twinkle 3.2s ease-in-out infinite alternate; }
@keyframes twinkle { from { filter: brightness(.7); } to { filter: brightness(1.3); } }

.sky-sun, .sky-moon {
  position: absolute; left: 0; top: 0; border-radius: 50%; opacity: 0; will-change: transform, opacity;
  transform: translate3d(calc(var(--x, 10) * 1vw), calc(var(--y, 70) * 1vh), 0);
}
.sky-sun  { width: 120px; height: 120px; margin: -60px 0 0 -60px;
  background: radial-gradient(circle, #fffbe8 0%, #ffe28a 30%, rgba(255,196,84,.5) 50%, transparent 70%); }
.sky-moon { width: 56px; height: 56px; margin: -28px 0 0 -28px; box-shadow: -13px 7px 0 0 #fff4d6;
  filter: drop-shadow(0 0 14px rgba(255,244,214,.5)); }
.sky-fire {
  position: absolute; left: 50%; bottom: -160px; width: 1000px; height: 460px; margin-left: -500px; border-radius: 50%;
  background: radial-gradient(ellipse at 50% 100%, rgba(255,150,70,.45) 0%, rgba(255,120,60,.14) 42%, transparent 70%);
  opacity: 0; will-change: opacity;
}

/* the schedule reads the sky: rail fills as the day passes, the current hour lights up */
.sky-mode .timeline { position: relative; }
.tl-progress {
  position: absolute; left: 88px; top: 0; width: 3px; height: 100%; border-radius: 3px; z-index: 0;
  background: linear-gradient(#ffd166, #f9a65a 60%, #fff4d6);
  transform: scaleY(var(--tlp, 0)); transform-origin: 50% 0; box-shadow: 0 0 10px rgba(255,209,102,.7);
}
.sky-mode .tl-dot { transition: transform .35s var(--ease), box-shadow .35s var(--ease), background .35s var(--ease); }
.sky-mode .tl-item.is-now .tl-dot { transform: scale(1.45); background: var(--gold); box-shadow: 0 0 0 5px rgba(249,199,79,.25), 0 0 18px rgba(249,199,79,.8); }
.sky-mode .tl-item { transition: opacity .35s var(--ease); }
.sky-mode .tl-content {
  margin-left: 20px; padding: 10px 14px; border-radius: 14px;
  background: rgba(255,255,255,.55); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  transition: background .5s var(--ease);
}
.sky-mode .tl-time, .sky-mode .tl-content h3, .sky-mode .tl-content p, .sky-mode .section-header * { transition: color .5s var(--ease); }
.sky-mode .tl-time { text-shadow: 0 0 6px rgba(255,255,255,.95), 0 0 2px #fff; }
.sky-mode.is-night .tl-time { color: #ffe9b0; text-shadow: 0 0 6px rgba(5,10,24,.9); }
.sky-mode.is-night .tl-content { background: rgba(10,18,40,.5); }
.sky-mode.is-night .tl-content h3 { color: #fff; }
.sky-mode.is-night .tl-content p { color: rgba(255,255,255,.8); }
.sky-mode.is-night .tl-dot { border-color: #111c36; }

@media (max-width: 768px) {
  .life-section.sky-mode > .container { padding-top: 60px; padding-bottom: 60px; }
  .sky-sun { width: 86px; height: 86px; margin: -43px 0 0 -43px; }
  .tl-progress { left: 7px; }
  .sky-mode .tl-content { margin-left: 0; }
}

/* ---------- reduced motion: static, instant, still informative ---------- */
@media (prefers-reduced-motion: reduce) {
  .intro { display: none; }
  .intro-on .anim-hero { animation-delay: 0s; }
  .rl-bar, .rl-price, .rl-pin, .rl-link path { transition: none !important; animation: none !important; }
  .rate-ladder .rl-bar { transform: scaleY(1); }
  .rate-ladder .rl-price, .rate-ladder .rl-pin { opacity: 1; transform: translate(-50%, 0); }
  .rate-ladder .rl-link path { opacity: .85; }
  .rate-ladder .is-now .rl-bar { animation: none !important; }
  .sky-stars.twinkle { animation: none; }
}