/* CardMySeniorYear atmosphere: people, light and gold behind and in front of the words.

   Every layer here is decoration. It is aria-hidden with no alt text, it sits in its own box so it never moves the
   layout, and it moves only with transform and opacity. The last block freezes all of it for anyone who asks their
   phone for reduced motion. The pictures come from tools/make-atmosphere.py, the people are cut out with
   tools/make-cutouts.py, and the file is shared by the landing page and the search pages.

   The idea: the page is a song. The words are the verse and the cards are the hook. This is everything else, the
   people who laugh and cry and walk away, the gold caps in the air, the light. */

/* ---------- boxes and helpers ---------- */
section{overflow-x:clip}
/* a box that holds decoration inside a section */
.layer{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.fx{pointer-events:none;user-select:none;-webkit-user-drag:none}
img.fx{display:block}

/* breathing: a slow rise and a slight swell, then back. Different lengths and starts, so nothing moves in step. */
.breathe{transform-origin:50% 100%;animation:breathe 11s ease-in-out infinite alternate;will-change:transform}
.breathe.slow{animation-duration:15s;animation-delay:-4s}
.breathe.quick{animation-duration:8.5s;animation-delay:-2s}
@keyframes breathe{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(0,-9px,0) scale(1.03)}}

/* parallax (Chrome and Safari today, everything else simply stays still): the wrapper drifts against the scroll */
@supports (animation-timeline:view()){
  .par{animation:par linear both;animation-timeline:view();animation-range:cover 0% cover 100%}
  @keyframes par{from{transform:translate3d(0,46px,0)}to{transform:translate3d(0,-46px,0)}}
}

/* a gold cap or tiara sitting behind a heading */
.mark{position:absolute;z-index:-1;width:var(--w,320px);height:auto;opacity:var(--o,.07);pointer-events:none;user-select:none;-webkit-user-drag:none}

/* a gold cap in the air */
.cap{position:absolute;width:var(--s,56px);aspect-ratio:520/485;background:url(cap-gold.webp) center/contain no-repeat;opacity:var(--o,.3);filter:blur(var(--b,0px));animation:toss var(--t,13s) ease-in-out infinite;animation-delay:var(--d,0s);will-change:transform}
@keyframes toss{0%,100%{transform:translate3d(0,22px,0) rotate(var(--r0,-16deg))}50%{transform:translate3d(var(--dx,10px),-30px,0) rotate(var(--r1,14deg))}}

/* gold dust drifting up. A tile that repeats, moved by exactly one tile so it never jumps. */
.dust{position:absolute;left:0;right:0;top:0;height:calc(100% + 900px);background-repeat:repeat;background-size:600px 900px;animation:dustRise 90s linear infinite;will-change:transform}
.dust.far{background-image:url(dust-far.webp);opacity:.7}
.dust.near{background-image:url(dust-near.webp);opacity:.55;animation-duration:56s}
@keyframes dustRise{from{transform:translate3d(0,0,0)}to{transform:translate3d(0,-900px,0)}}

/* ---------- hero: a crowd, caps in the air, light ---------- */
.hero-layer .orbs{position:absolute;inset:0;background-repeat:no-repeat;mix-blend-mode:screen;opacity:.85;-webkit-mask-image:linear-gradient(90deg,rgba(0,0,0,.28) 0%,rgba(0,0,0,.55) 40%,#000 66%);mask-image:linear-gradient(90deg,rgba(0,0,0,.28) 0%,rgba(0,0,0,.55) 40%,#000 66%)}
/* ORBS:START (python tools/make-atmosphere.py hero writes this) */
.hero-layer .orbs{background-image:radial-gradient(circle at 94.8% 39.5%,rgba(255,214,140,0.08) 0,rgba(255,214,140,0.07) 15px,transparent 28px),radial-gradient(circle at 9.4% 58.3%,rgba(240,190,110,0.08) 0,rgba(240,190,110,0.06) 23px,transparent 42px),radial-gradient(circle at 41.8% 24.1%,rgba(214,160,80,0.08) 0,rgba(214,160,80,0.06) 19px,transparent 35px),radial-gradient(circle at 12.4% 22.3%,rgba(255,214,140,0.18) 0,rgba(255,214,140,0.14) 24px,transparent 44px),radial-gradient(circle at 5.0% 22.1%,rgba(240,190,110,0.13) 0,rgba(240,190,110,0.10) 18px,transparent 33px),radial-gradient(circle at 54.1% 57.1%,rgba(240,190,110,0.09) 0,rgba(240,190,110,0.07) 9px,transparent 17px),radial-gradient(circle at 63.9% 37.2%,rgba(255,214,140,0.18) 0,rgba(255,214,140,0.14) 24px,transparent 44px),radial-gradient(circle at 49.6% 53.2%,rgba(255,236,190,0.16) 0,rgba(255,236,190,0.13) 11px,transparent 21px),radial-gradient(circle at 36.2% 24.8%,rgba(240,190,110,0.20) 0,rgba(240,190,110,0.16) 20px,transparent 37px),radial-gradient(circle at 8.2% 30.0%,rgba(214,160,80,0.24) 0,rgba(214,160,80,0.19) 12px,transparent 23px),radial-gradient(circle at 28.8% 98.0%,rgba(255,214,140,0.17) 0,rgba(255,214,140,0.13) 19px,transparent 36px),radial-gradient(circle at 75.7% 15.2%,rgba(214,160,80,0.15) 0,rgba(214,160,80,0.12) 9px,transparent 18px),radial-gradient(circle at 76.5% 57.3%,rgba(255,236,190,0.13) 0,rgba(255,236,190,0.11) 6px,transparent 12px),radial-gradient(circle at 59.4% 58.0%,rgba(214,160,80,0.08) 0,rgba(214,160,80,0.07) 16px,transparent 30px),radial-gradient(circle at 94.5% 47.4%,rgba(255,214,140,0.08) 0,rgba(255,214,140,0.07) 7px,transparent 13px),radial-gradient(circle at 64.7% 99.3%,rgba(214,160,80,0.12) 0,rgba(214,160,80,0.10) 14px,transparent 27px),radial-gradient(circle at 88.7% 34.7%,rgba(214,160,80,0.14) 0,rgba(214,160,80,0.11) 17px,transparent 32px),radial-gradient(circle at 49.4% 21.8%,rgba(255,236,190,0.09) 0,rgba(255,236,190,0.08) 8px,transparent 15px),radial-gradient(circle at 39.8% 91.7%,rgba(214,160,80,0.09) 0,rgba(214,160,80,0.07) 12px,transparent 23px),radial-gradient(circle at 40.2% 27.8%,rgba(240,190,110,0.23) 0,rgba(240,190,110,0.18) 19px,transparent 36px),radial-gradient(circle at 27.8% 41.5%,rgba(255,236,190,0.20) 0,rgba(255,236,190,0.16) 23px,transparent 43px),radial-gradient(circle at 95.8% 15.1%,rgba(240,190,110,0.10) 0,rgba(240,190,110,0.08) 17px,transparent 32px),radial-gradient(circle at 1.2% 83.1%,rgba(240,190,110,0.12) 0,rgba(240,190,110,0.10) 12px,transparent 22px),radial-gradient(circle at 14.6% 53.5%,rgba(255,236,190,0.25) 0,rgba(255,236,190,0.20) 4px,transparent 8px),radial-gradient(circle at 95.0% 65.5%,rgba(255,214,140,0.16) 0,rgba(255,214,140,0.13) 22px,transparent 40px),radial-gradient(circle at 39.2% 39.9%,rgba(255,214,140,0.16) 0,rgba(255,214,140,0.13) 23px,transparent 43px),radial-gradient(circle at 6.2% 6.7%,rgba(240,190,110,0.15) 0,rgba(240,190,110,0.12) 18px,transparent 33px),radial-gradient(circle at 34.0% 5.3%,rgba(255,214,140,0.18) 0,rgba(255,214,140,0.14) 8px,transparent 15px),radial-gradient(circle at 10.1% 36.4%,rgba(255,214,140,0.08) 0,rgba(255,214,140,0.07) 23px,transparent 42px),radial-gradient(circle at 61.4% 14.9%,rgba(255,236,190,0.25) 0,rgba(255,236,190,0.20) 11px,transparent 21px),radial-gradient(circle at 36.4% 12.3%,rgba(214,160,80,0.26) 0,rgba(214,160,80,0.21) 25px,transparent 46px),radial-gradient(circle at 48.0% 31.2%,rgba(240,190,110,0.09) 0,rgba(240,190,110,0.07) 20px,transparent 37px),radial-gradient(circle at 74.0% 47.9%,rgba(240,190,110,0.17) 0,rgba(240,190,110,0.13) 15px,transparent 29px),radial-gradient(circle at 95.1% 52.8%,rgba(240,190,110,0.20) 0,rgba(240,190,110,0.16) 11px,transparent 21px),radial-gradient(circle at 75.8% 29.8%,rgba(255,214,140,0.20) 0,rgba(255,214,140,0.16) 4px,transparent 9px),radial-gradient(circle at 51.8% 90.8%,rgba(255,236,190,0.22) 0,rgba(255,236,190,0.17) 13px,transparent 24px),radial-gradient(circle at 54.2% 50.3%,rgba(240,190,110,0.19) 0,rgba(240,190,110,0.15) 23px,transparent 42px),radial-gradient(circle at 80.6% 81.8%,rgba(240,190,110,0.11) 0,rgba(240,190,110,0.09) 11px,transparent 20px),radial-gradient(circle at 35.6% 2.9%,rgba(255,214,140,0.22) 0,rgba(255,214,140,0.18) 21px,transparent 39px),radial-gradient(circle at 25.9% 69.3%,rgba(255,236,190,0.15) 0,rgba(255,236,190,0.12) 20px,transparent 38px),radial-gradient(circle at 95.5% 36.5%,rgba(240,190,110,0.09) 0,rgba(240,190,110,0.07) 16px,transparent 30px),radial-gradient(circle at 19.7% 20.4%,rgba(255,214,140,0.16) 0,rgba(255,214,140,0.13) 20px,transparent 38px),radial-gradient(circle at 80.0% 8.5%,rgba(255,214,140,0.24) 0,rgba(255,214,140,0.19) 16px,transparent 30px),radial-gradient(circle at 47.8% 17.9%,rgba(255,236,190,0.09) 0,rgba(255,236,190,0.07) 11px,transparent 20px),radial-gradient(circle at 46.3% 74.3%,rgba(255,214,140,0.21) 0,rgba(255,214,140,0.17) 18px,transparent 33px),radial-gradient(circle at 99.3% 2.8%,rgba(214,160,80,0.22) 0,rgba(214,160,80,0.18) 9px,transparent 18px),radial-gradient(circle at 61.2% 59.6%,rgba(214,160,80,0.19) 0,rgba(214,160,80,0.16) 9px,transparent 17px),radial-gradient(circle at 15.6% 54.8%,rgba(255,214,140,0.07) 0,rgba(255,214,140,0.06) 16px,transparent 30px),radial-gradient(circle at 52.7% 93.4%,rgba(214,160,80,0.26) 0,rgba(214,160,80,0.21) 7px,transparent 14px),radial-gradient(circle at 82.6% 21.1%,rgba(255,236,190,0.11) 0,rgba(255,236,190,0.09) 11px,transparent 20px),radial-gradient(circle at 24.1% 58.6%,rgba(255,236,190,0.17) 0,rgba(255,236,190,0.14) 22px,transparent 40px),radial-gradient(circle at 6.1% 74.0%,rgba(214,160,80,0.20) 0,rgba(214,160,80,0.16) 8px,transparent 16px),radial-gradient(circle at 42.1% 91.8%,rgba(240,190,110,0.17) 0,rgba(240,190,110,0.14) 22px,transparent 41px),radial-gradient(circle at 51.1% 87.3%,rgba(240,190,110,0.19) 0,rgba(240,190,110,0.15) 22px,transparent 41px),radial-gradient(circle at 17.2% 47.3%,rgba(255,214,140,0.18) 0,rgba(255,214,140,0.14) 9px,transparent 17px),radial-gradient(circle at 68.2% 53.1%,rgba(214,160,80,0.22) 0,rgba(214,160,80,0.18) 15px,transparent 28px),radial-gradient(circle at 88.3% 5.7%,rgba(240,190,110,0.12) 0,rgba(240,190,110,0.10) 7px,transparent 14px),radial-gradient(circle at 50.8% 56.2%,rgba(255,214,140,0.15) 0,rgba(255,214,140,0.12) 7px,transparent 14px),radial-gradient(circle at 60.6% 19.9%,rgba(255,236,190,0.16) 0,rgba(255,236,190,0.12) 22px,transparent 40px),radial-gradient(circle at 80.7% 50.8%,rgba(240,190,110,0.20) 0,rgba(240,190,110,0.16) 23px,transparent 42px),radial-gradient(circle at 92.3% 89.3%,rgba(240,190,110,0.23) 0,rgba(240,190,110,0.18) 13px,transparent 24px),radial-gradient(circle at 41.7% 39.2%,rgba(255,236,190,0.08) 0,rgba(255,236,190,0.07) 8px,transparent 16px),radial-gradient(circle at 42.8% 21.3%,rgba(255,236,190,0.22) 0,rgba(255,236,190,0.18) 12px,transparent 23px),radial-gradient(circle at 94.0% 64.3%,rgba(255,236,190,0.10) 0,rgba(255,236,190,0.08) 9px,transparent 17px)}
/* ORBS:END */
.hero-layer .halo{position:absolute;right:2%;top:8%;width:min(62vw,820px);aspect-ratio:1;background:radial-gradient(circle,rgba(201,162,75,.17),transparent 66%)}
.hero-layer .crowdbox{position:absolute;right:-6%;bottom:-6px;width:min(58vw,830px)}
.hero-layer .crowd{display:block;width:100%;height:auto;opacity:.58;-webkit-mask-image:linear-gradient(to bottom,#000 68%,transparent 100%);mask-image:linear-gradient(to bottom,#000 68%,transparent 100%)}
.hero-layer::after{content:"";position:absolute;left:0;right:0;bottom:0;height:140px;background:linear-gradient(180deg,transparent,rgba(14,12,16,.9))}

/* ---------- one last time: the year as a reel, August to June ---------- */
.year{background:radial-gradient(ellipse 70% 50% at 50% 0%,rgba(201,162,75,.10),transparent 70%),radial-gradient(ellipse 50% 40% at 50% 100%,rgba(70,90,150,.10),transparent 70%)}
.reel{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:18px;max-width:1120px;margin:70px auto 0;padding-bottom:44px}
.frame{position:relative;margin:0;aspect-ratio:4/5;border-radius:8px;overflow:hidden;background:var(--ink2);box-shadow:0 28px 64px rgba(0,0,0,.62),0 0 0 1px rgba(201,162,75,.3)}
.frame:nth-child(even){transform:translateY(36px)}
.frame img{display:block;width:100%;height:100%;object-fit:cover;transition:transform 1.6s cubic-bezier(.2,.7,.2,1)}
.frame:hover img{transform:scale(1.07)}
.frame::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(14,12,16,0) 40%,rgba(14,12,16,.92) 100%);pointer-events:none}
.frame figcaption{position:absolute;left:14px;right:14px;bottom:15px;z-index:2}
.frame figcaption i{display:block;font-style:normal;font-size:10.5px;letter-spacing:.34em;color:var(--gold);text-transform:uppercase;margin-bottom:5px}
.frame figcaption b{display:block;font-family:var(--serif);font-style:italic;font-weight:500;font-size:22px;line-height:1.12;color:var(--text)}
/* the colour drains out of the year as it goes */
.frame:nth-child(1) img{filter:saturate(1.08)}
.frame:nth-child(3) img{filter:saturate(.94)}
.frame:nth-child(4) img{filter:saturate(.86)}
.yearclose{text-align:center;margin-top:34px}
.yearclose p{font-family:var(--serif);font-style:italic;font-size:clamp(24px,3vw,34px);color:var(--gold-hi);margin-bottom:22px}

/* ---------- how it works: a senior stands behind each step ---------- */
.steps{margin-top:252px}
.peek{position:absolute;bottom:100%;left:0;right:0;margin:0 auto;height:210px;width:auto;pointer-events:none;user-select:none;-webkit-user-drag:none;filter:drop-shadow(0 0 30px rgba(201,162,75,.24))}

/* ---------- no signal: golden hour behind the words ---------- */
.offscene{position:absolute;inset:0;background:url(scene-offline.webp) center/cover no-repeat;opacity:.26;-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 30%,#000 60%,transparent 100%);mask-image:linear-gradient(180deg,transparent 0,#000 30%,#000 60%,transparent 100%)}
#offline .layer::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse 52% 60% at 50% 48%,rgba(14,12,16,.72),transparent 100%)}
#offline .board{background:linear-gradient(180deg,rgba(34,27,15,.9),rgba(22,18,13,.92))}

/* ---------- ways people use it: a photo behind every card, two families behind the grid ---------- */
.uses{position:relative;margin-top:236px}
.use{position:relative;overflow:hidden;isolation:isolate}
.use .ub{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.42;z-index:-1;transition:opacity .6s,transform 1.4s cubic-bezier(.2,.7,.2,1)}
.use::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(95deg,rgba(21,18,24,.93) 0%,rgba(21,18,24,.68) 50%,rgba(21,18,24,.3) 100%)}
.use:hover .ub{opacity:.62;transform:scale(1.06)}
.uses>.fig{position:absolute;bottom:100%;height:clamp(200px,24vw,300px);width:auto;pointer-events:none;user-select:none;-webkit-user-drag:none;filter:drop-shadow(0 0 30px rgba(201,162,75,.22));opacity:.94}
.uses>.fig.l{left:1%}
.uses>.fig.r{right:1%}

/* ---------- the quote: five friends and the last of the light ---------- */
.band{position:relative;overflow:hidden;padding:120px 0 0}
.bandgrid{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:30px;align-items:end;max-width:1080px;margin:0 auto;padding:0 24px}
.bandtxt{text-align:left;align-self:center;padding-bottom:110px}
.bandtxt blockquote{margin:0 0 26px;padding:0;max-width:560px;text-shadow:0 2px 20px rgba(14,12,16,.8)}
.chorusbox{position:relative;justify-self:center;width:min(400px,100%)}
.chorusbox::before{content:"";position:absolute;inset:0;background:radial-gradient(closest-side at 50% 50%,rgba(201,162,75,.2),transparent)}
.chorus{position:relative;display:block;width:100%;height:auto;opacity:.86;-webkit-mask-image:linear-gradient(to bottom,#000 76%,transparent 100%);mask-image:linear-gradient(to bottom,#000 76%,transparent 100%)}

/* ---------- sign up: two of them wait beside the form ---------- */
.signup>.layer{z-index:0}
.signup .sub-h{max-width:500px}
.signup>.flank{position:absolute;bottom:0;height:min(270px,29vw);width:auto;pointer-events:none;user-select:none;-webkit-user-drag:none;z-index:0;filter:drop-shadow(0 0 28px rgba(201,162,75,.2))}
.signup>.flank.l{left:2.5%}
.signup>.flank.r{right:2%}
.signup>.form{position:relative;z-index:1}

/* ---------- the search pages ---------- */
.pagebg{position:absolute;top:0;left:0;right:0;height:660px;overflow:hidden;pointer-events:none;z-index:0}
.pagebg .pgimg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.46}
.pagebg::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(14,12,16,.94) 0%,rgba(14,12,16,.62) 46%,rgba(14,12,16,.28) 100%),linear-gradient(180deg,rgba(14,12,16,.5) 0%,transparent 34%,var(--ink) 100%)}
.pagefig{position:absolute;right:max(2%,calc((100vw - 1120px) / 2));top:96px;height:auto;width:auto;max-width:min(460px,38vw);max-height:min(500px,40vw);pointer-events:none;user-select:none;-webkit-user-drag:none;opacity:.62;-webkit-mask-image:linear-gradient(to bottom,#000 70%,transparent 100%);mask-image:linear-gradient(to bottom,#000 70%,transparent 100%)}

/* ---------- smaller screens ---------- */
@media(max-width:1100px){
  .peek{height:180px}
  .uses>.fig{height:210px}
}
@media(max-width:920px){
  .hero-layer .crowdbox{width:104vw;right:-16vw}
  .hero-layer .crowd{opacity:.4}
  /* one step under another: every step needs its own head room */
  .steps{grid-template-columns:1fr;gap:150px 0;margin-top:150px;background:none;border:0}
  .step{border:1px solid var(--line-soft)}
  .peek{height:150px}
  .uses>.fig{display:none}
  .uses{margin-top:40px}
  .signup>.flank{display:none}
  .bandgrid{grid-template-columns:1fr;gap:0}
  .bandtxt{padding-bottom:20px;text-align:center}
  .bandtxt blockquote{margin-left:auto;margin-right:auto}
  .chorusbox{width:min(340px,80%)}
  .band{padding-top:90px}
  .reel{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;padding:0 24px 56px;margin:48px -24px 0;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .reel::-webkit-scrollbar{display:none}
  .frame{flex:0 0 64%;max-width:290px;scroll-snap-align:center}
  .frame:nth-child(even){transform:none}
  .pagefig{display:none}
  .pagebg{height:520px}
}
@media(max-width:600px){
  .hero-layer .halo{right:-30%;width:120vw}
  .cap.desk{display:none}
  .peek{height:130px}
  .steps{gap:130px 0;margin-top:130px}
  .frame{flex-basis:72%}
  .mark{--w:220px!important}
}

/* ---------- reduced motion: keep the pictures, freeze everything ---------- */
@media (prefers-reduced-motion:reduce){
  .breathe,.cap,.dust,.par{animation:none!important}
  .frame img,.use .ub{transition:none}
}