/* Decorative layers only: scoped to the Foundation Day homepage. */
.foundation-page { --foundation-wave: clamp(54px, 6.5vw, 112px); --foundation-dark: #101d58; --foundation-light: #edf6ff; background: #edf6ff; }
.foundation-page #main { overflow-x: clip; }
.foundation-page #main > section { position: relative; isolation: isolate; }
.foundation-page .foundation-transition { position: absolute; left: 0; right: 0; height: var(--foundation-wave); pointer-events: none; z-index: 1; }
.foundation-page .foundation-transition::before, .foundation-page .foundation-transition::after { content: ''; position: absolute; inset: 0; pointer-events: none; mask-size: 100% 100%; mask-repeat: no-repeat; }

/* Two differently curved masks give each light-to-dark boundary depth. */
.foundation-page .foundation-transition--light-dark { top: calc(-1 * var(--foundation-wave) + 1px); }
.foundation-page .foundation-transition--light-dark::before { background: linear-gradient(180deg, #c7edff33, #5979ce80 56%, var(--foundation-dark)); mask-image: url('assets/transitions/wave-rise.svg'); }
.foundation-page .foundation-transition--light-dark::after { background: linear-gradient(180deg, #557bcf00 15%, #28498dc4 56%, var(--foundation-dark) 96%); mask-image: url('assets/transitions/wave-crest.svg'); }
.foundation-page .foundation-transition--dark-light { bottom: calc(-1 * var(--foundation-wave) + 5px); }
.foundation-page .foundation-transition--dark-light::before { background: linear-gradient(180deg, var(--foundation-dark) 0%, #183b84f2 30%, #4586d38c 65%, #a2d7ff00 100%); mask-image: url('assets/transitions/wave-fall.svg'); }
.foundation-page .foundation-transition--dark-light::after { background: linear-gradient(180deg, #183266b3, #686ddc40 38%, #6cbcf94d 64%, transparent 96%); mask-image: url('assets/transitions/wave-rise.svg'); }
.foundation-page .foundation-transition--dark-light::before, .foundation-page .foundation-transition--dark-light::after { filter: blur(1.5px); }
.foundation-page .foundation-transition--sky { bottom: -1px; height: clamp(28px, 4vw, 64px); }
.foundation-page .foundation-transition--sky::before { background: linear-gradient(transparent, #d3ecff88 45%, var(--foundation-light)); mask-image: url('assets/transitions/wave-rise.svg'); }
.foundation-page .foundation-transition--sky::after { background: linear-gradient(transparent 20%, #e8f5ff8c 62%, var(--foundation-light)); mask-image: url('assets/transitions/wave-crest.svg'); }
.foundation-page .foundation-transition--hero { display: none; }
.foundation-page .foundation-transition--footer { top: -22px; height: 23px; }
.foundation-page .foundation-transition--footer::before { background: linear-gradient(transparent, #f8faff8c 60%, #f8faff); mask-image: url('assets/transitions/wave-rise.svg'); }
.foundation-page .foundation-transition--footer::after { background: linear-gradient(transparent 30%, #f8faff); mask-image: url('assets/transitions/wave-crest.svg'); }

/* Shared edge ribbons bridge adjacent sections without entering reading columns. */
.foundation-page .foundation-ribbon { position: absolute; top: -26%; width: clamp(34px, 4.2vw, 78px); height: 160%; background: url('assets/transitions/ribbon-sweep.svg') center / 100% 100% no-repeat; opacity: .94; pointer-events: none; filter: drop-shadow(1px 3px 3px #76521a24); }
.foundation-page .foundation-ribbon--left { left: -1.6vw; transform: rotate(-8deg); }
.foundation-page .foundation-ribbon--right { right: -1.6vw; transform: scaleX(-1) rotate(-6deg); }

/* Light chapters share a cloud-colored base rather than rectangular panels. */
.foundation-page .hero { z-index: 1; mask-image: linear-gradient(#000, #000), url('assets/transitions/wave-fall.svg'); mask-size: 100% calc(100% - 18px), 100% 28px; mask-position: center top, center bottom; mask-repeat: no-repeat; }
.foundation-page .hero-content, .foundation-page .passion { z-index: 3; }
.foundation-page .hero::after { display: none; }
.foundation-page .journey { z-index: 1; overflow: visible; }
.foundation-page .journey .stats, .foundation-page .journey .timeline, .foundation-page .journey .section-head { z-index: 3; }
.foundation-page .journey > .stats { translate: 0 -20px; }
.foundation-page .journey .section-head { position: relative; }
.foundation-page .gallery { width: auto; max-width: none; margin: 0; z-index: 2; background: var(--foundation-light); padding-bottom: calc(28px + var(--foundation-wave) * .66); }
.foundation-page .foundation-gallery-sky { position: absolute; inset: 0; z-index: -1; pointer-events: none; background: url('assets/memories-sky.webp') center top / cover no-repeat; mask-image: linear-gradient(transparent, #000 12%, #000 78%, transparent); }
.foundation-page .foundation-gallery-sky::after { content: ''; position: absolute; inset: 0 0 auto; height: clamp(120px, 10vw, 180px); background: linear-gradient(#edf6fff5, #edf6ffcc 65%, transparent); }
.foundation-page .gallery-inner { position: relative; z-index: 3; }

/* The dramatic middle chapter fades at both ends; the existing trophy is reused. */
.foundation-page .milestones { background: var(--foundation-dark); overflow: visible; z-index: 3; }
.foundation-page .milestones > .section-head, .foundation-page .milestones > .achievement-row { position: relative; z-index: 3; }
.foundation-page .foundation-milestone-atmosphere { position: absolute; inset: 0; pointer-events: none; z-index: 0; background: radial-gradient(ellipse at 20% 70%, #1554bf66, transparent 55%), radial-gradient(ellipse at 90% 48%, #4a168b80, transparent 45%); mask-image: linear-gradient(transparent, #000 18%, #000 80%, transparent); }
.foundation-page .foundation-milestone-atmosphere::before, .foundation-page .foundation-milestone-atmosphere::after { content: ''; position: absolute; width: clamp(120px, 14vw, 230px); aspect-ratio: 1; background-image: url('assets/celebration-stage.png'); background-size: 650% auto; mask-image: radial-gradient(circle, #000 0%, #0009 35%, transparent 72%); opacity: .5; animation: foundation-firework-glow 11s ease-in-out infinite alternate; }
.foundation-page .foundation-milestone-atmosphere::before { left: 6%; top: -4%; background-position: left top; }
.foundation-page .foundation-milestone-atmosphere::after { right: 25%; bottom: -6%; background-position: right top; animation-delay: -5s; }
.foundation-page .milestones::before { opacity: .28; }
.foundation-page .milestones::after { z-index: 1; mask-image: linear-gradient(to right, transparent, #000 42%), linear-gradient(to bottom, transparent, #000 7%, #000 96%, transparent); mask-composite: intersect; }

/* Games keeps its original cards and artwork, with only a little room for the wave. */
.foundation-page .competitions { z-index: 2; padding-top: calc(52px + var(--foundation-wave) * .35); }
.foundation-page .competitions::before { top: calc(var(--foundation-wave) * .55); mask-image: linear-gradient(transparent, #000 10%, #000 45%, transparent 72%); }
.foundation-page .games-wrap { position: relative; z-index: 3; }

/* Cake and its physical branding stay in front of the incoming night-sky wave. */
.foundation-page .celebration { --foundation-dark: #0b1548; z-index: 4; border-bottom: 0; }
.foundation-page .celebration .foundation-transition { z-index: 0; }
.foundation-page .celebration .foundation-transition--light-dark { height: calc(var(--foundation-wave) * .82); top: calc(var(--foundation-wave) * -.82 + 1px); }
.foundation-page .celebration .celebration-layout { z-index: 3; }
.foundation-page .footer { z-index: 5; display: block; width: auto; }
.foundation-page .footer-inner { display: flex; align-items: center; justify-content: space-between; gap: 25px; }
.foundation-page .footer > .foundation-transition { left: 0; right: 0; }

@keyframes foundation-firework-glow { from { opacity: .32; } to { opacity: .55; } }
@media (max-width: 1200px) {
  .foundation-page .footer-inner { flex-wrap: wrap; justify-content: center; }
}
@media (max-width: 1024px) {
  .foundation-page { --foundation-wave: clamp(44px, 7vw, 72px); }
  .foundation-page .gallery { padding-bottom: calc(27px + var(--foundation-wave) * .66); }
  .foundation-page .competitions { padding-top: calc(40px + var(--foundation-wave) * .35); }
  .foundation-page .milestones::after { mask-image: linear-gradient(transparent, #000 20%, #000 96%, transparent); }
  .foundation-page .foundation-gallery-sky { opacity: .72; background-size: auto 100%; }
  .foundation-page .foundation-ribbon { opacity: .7; }
  .foundation-page .foundation-milestone-atmosphere::after { right: 5%; }
  .foundation-page .footer-inner { gap: 22px; }
}
@media (max-width: 640px) {
  .foundation-page { --foundation-wave: 42px; }
  .foundation-page .gallery { padding-bottom: 56px; }
  .foundation-page .competitions { padding-top: calc(36px + var(--foundation-wave) * .35); }
  .foundation-page .foundation-gallery-sky { opacity: .43; }
  .foundation-page .foundation-ribbon { width: 32px; opacity: .45; }
  .foundation-page .foundation-ribbon--left { left: -13px; }
  .foundation-page .foundation-ribbon--right { right: -13px; }
  .foundation-page .foundation-milestone-atmosphere::before { opacity: .24; animation: none; }
  .foundation-page .foundation-milestone-atmosphere::after { display: none; }
  .foundation-page .foundation-transition--footer { top: -15px; height: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .foundation-page .foundation-milestone-atmosphere::before, .foundation-page .foundation-milestone-atmosphere::after { animation: none; opacity: .4; }
}