/* /doorstops/ref. Most of the look comes from competition-flow.css (the page
   carries its `cc` scope class); these are the few pieces of its own. Scoped
   under .rf. */

/* the intro: the same white card the fights page opens with */
.rf .rf-why {
  margin: 0 0 30px;
  padding: 22px 24px 20px;
  border: 3px solid #16130f;
  background: #fff;
  box-shadow: 6px 6px 0 #16130f;
}
.rf .rf-why .bf-h3 { margin: 0 0 6px; }
.rf .rf-why p { font-size: 16px; line-height: 1.6; color: var(--bf-ink); margin: 0 0 14px; }
.rf .rf-why p:last-child { margin-bottom: 0; }
.rf .rf-types { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; padding: 0; list-style: none; }
.rf .rf-types li {
  margin: 0;
  padding: 6px 11px;
  border: 2px solid #16130f;
  background: #FDF3D8;
  font-family: var(--dl-font-display);
  font-size: 14px;
  font-weight: var(--dl-fw-semi);
  box-shadow: 2px 2px 0 #16130f;
}
.rf .rf-types li:nth-child(4n + 2) { background: #E6ECFF; }
.rf .rf-types li:nth-child(4n + 3) { background: #FDE7E0; }
.rf .rf-types li:nth-child(4n + 4) { background: #E4F6E9; }

/* ---------------- the classroom ----------------
   A scroll story: the room is pinned (sticky) while four beats scroll past,
   and ref-flow.js sets the scene from whichever beat is in view. Desks
   change mood by class (is-bad, is-good, is-empty), each after its own --d
   delay so a mood ripples out. --p (0 to 1, the section's scroll progress)
   drives a light parallax between the floor, the desks and the front. It
   breaks out of the 800px column to sit the room beside the beats. */
.rf .rf-scrolly {
  --p: 0;
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: clamp(28px, 4vw, 56px);
  width: min(1120px, calc(100vw - 48px));
  margin: 0 0 34px calc(50% - min(560px, 50vw - 24px));
}
.rf .rf-scrolly-pin { position: sticky; top: 104px; align-self: start; }
.rf .rf-class-stage { border: 3px solid #16130f; box-shadow: 6px 6px 0 #16130f; background: #F3EBDC; line-height: 0; overflow: hidden; }
.rf .rf-class-stage svg { display: block; width: 100%; height: auto; }
.rf .rf-scrolly-dots { display: flex; gap: 8px; justify-content: center; margin: 16px 0 0; padding: 0; list-style: none; }
.rf .rf-scrolly-dots li { width: 28px; height: 8px; margin: 0; border: 2px solid #16130f; background: #fff; transition: background .25s ease; }
.rf .rf-scrolly-dots li.is-active { background: #16130f; }

.rf .rf-scrolly-beats { padding: 0 0 30vh; }
.rf .rf-beat {
  min-height: 62vh;
  display: flex; flex-direction: column; justify-content: center;
  opacity: .28; transition: opacity .35s ease;
}
.rf .rf-scrolly:not(.is-live) .rf-beat, .rf .rf-beat.is-active { opacity: 1; }
.rf .rf-beat .bf-h3 { margin: 0; font-size: clamp(26px, 3vw, 36px); line-height: 1.12; letter-spacing: -0.01em; }
.rf .rf-beat p { margin: 12px 0 0; font-size: 18px; line-height: 1.55; color: var(--dl-muted); }
.rf .rf-beat:first-child .bf-h3 { font-size: clamp(30px, 3.6vw, 44px); }
.rf .rf-beat:first-child { justify-content: flex-start; padding-top: 4px; }

/* the room */
.rf .rf-floor { fill: #F3EBDC; }
.rf .rf-px-floor { transform: translateY(calc(var(--p) * -40px)); }
.rf .rf-px-desks { transform: translateY(calc(var(--p) * -14px)); }
.rf .rf-px-front { transform: translateY(calc(var(--p) * -4px)); }
.rf .rf-board { fill: #fff; stroke: #16130f; stroke-width: 3; }
.rf .rf-clock { fill: #fff; stroke: #16130f; stroke-width: 3; }
.rf .rf-hands { fill: none; stroke: #16130f; stroke-width: 2.5; stroke-linecap: round; }
.rf .rf-teacher { fill: #BBD4F5; stroke: #16130f; stroke-width: 3; }

/* a desk */
.rf .rf-desk { --d: 0ms; }
.rf .rf-top { fill: #fff; stroke: #16130f; stroke-width: 3; transition: fill .35s ease var(--d); }
.rf .rf-kid { transition: opacity .4s ease var(--d), transform .4s ease var(--d); transform-box: fill-box; transform-origin: center; }
.rf .rf-body { fill: #BBD4F5; stroke: #16130f; stroke-width: 2.5; stroke-linejoin: round; transition: fill .35s ease var(--d); }
.rf .rf-desk:nth-child(3n) .rf-body { fill: #E4F6E9; }
.rf .rf-desk:nth-child(3n + 1) .rf-body { fill: #FDF3D8; }
.rf .rf-head { fill: #FBF6EC; stroke: #16130f; stroke-width: 2.5; transition: fill .35s ease var(--d); }
.rf .rf-hair { fill: #16130f; }
.rf .rf-desk:nth-child(4n + 2) .rf-hair { fill: #8a5a3c; }
.rf .rf-desk:nth-child(5n + 3) .rf-hair { fill: #c9973f; }

.rf .rf-spark { opacity: 0; transform: scale(.4); transform-box: view-box; transition: opacity .3s ease var(--d), transform .35s cubic-bezier(.3,1.7,.5,1) var(--d); }
.rf .rf-spark path { fill: #FFE07A; stroke: #16130f; stroke-width: 2; stroke-linejoin: round; }

/* moods */
.rf .rf-desk.is-bad .rf-top { fill: #F6B3A0; }
.rf .rf-desk.is-bad .rf-body { fill: #E8664E; }
.rf .rf-desk.is-bad .rf-head { fill: #F6A08C; }
.rf .rf-desk.is-bad .rf-kid { animation: rf-slump 1.6s ease-in-out var(--d) infinite; }
.rf .rf-desk.is-good .rf-top { fill: #3ECFB0; }
.rf .rf-desk.is-good .rf-spark { opacity: 1; transform: none; animation: rf-twinkle 1.4s ease-in-out infinite; }
.rf .rf-desk.is-good .rf-kid { animation: rf-bob .9s ease-in-out var(--d) 3; }
.rf .rf-desk.is-empty .rf-kid { opacity: 0; transform: translateY(6px); }

/* the pencil note on "that kid", only in the scenes about them */
.rf .rf-label { opacity: 0; transition: opacity .4s ease; }
.rf .rf-label text { font-family: var(--dl-caveat), "Comic Sans MS", cursive; font-weight: 700; font-size: 22px; fill: #16130f; }
.rf .rf-label path { fill: none; stroke: #16130f; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.rf .rf-scrolly:not([data-scene="random"]) .rf-label { opacity: 1; }
.rf .rf-scrolly:not([data-scene]) .rf-label { opacity: 0; }

@keyframes rf-slump { 0%, 100% { transform: none; } 50% { transform: translateY(2px) rotate(-6deg); } }
@keyframes rf-bob { 0%, 100% { transform: none; } 50% { transform: translateY(-3px); } }
@keyframes rf-twinkle { 0%, 100% { transform: scale(1) rotate(0deg); } 50% { transform: scale(1.2) rotate(15deg); } }

/* phones and narrow tablets: the room pins to the top and the beats scroll
   up underneath it as cards */
@media (max-width: 820px) {
  .rf .rf-scrolly { grid-template-columns: minmax(0, 1fr); gap: 0; width: auto; margin: 0 0 30px; }
  .rf .rf-scrolly-pin { top: 84px; z-index: 1; padding-bottom: 10px; background: var(--dl-bg-alt); }
  .rf .rf-class-stage { box-shadow: 4px 4px 0 #16130f; }
  .rf .rf-scrolly-dots { margin-top: 10px; }
  .rf .rf-scrolly-beats { padding: 0 0 22vh; }
  .rf .rf-beat { min-height: 55vh; justify-content: flex-end; padding-bottom: 6vh; }
  .rf .rf-beat:first-child { justify-content: flex-start; padding-top: 18px; }
  .rf .rf-beat > * { position: relative; z-index: 2; }
  .rf .rf-beat .bf-h3, .rf .rf-beat:first-child .bf-h3 { font-size: 24px; }
  .rf .rf-beat p { font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .rf .rf-scrolly * { animation: none !important; transition: none !important; }
  .rf .rf-px-floor, .rf .rf-px-desks, .rf .rf-px-front { transform: none; }
}

/* the simulation stands on its own here, not as a band inside a step card */
.rf .cc-sim { margin: 0 0 26px; border: 3px solid #16130f; box-shadow: 6px 6px 0 #16130f; }
.rf .cc-evidence { margin: 0 0 30px; }

/* each problem offers three asks; the odd one out spans the row */
@media (min-width: 640px) {
  .rf .cc-ask:last-child:nth-child(odd) { grid-column: 1 / -1; }
}

/* the pointer to a full guide, under the problem cards */
.rf .rf-full {
  margin: 16px 0 0;
  padding: 12px 14px;
  border: 3px solid #16130f;
  background: #FDF3D8;
  font-size: 15px;
  line-height: 1.55;
}
.rf .rf-full a { color: var(--bf-accent); font-weight: var(--dl-fw-semi); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }

.rf .bf-help { margin-top: 36px; }
.rf .bf-help a { color: var(--bf-accent); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }

@media (max-width: 620px) {
  .rf .rf-why { padding: 18px 18px 14px; box-shadow: 4px 4px 0 #16130f; }
  .rf .cc-sim { margin-left: 0; margin-right: 0; box-shadow: 4px 4px 0 #16130f; }
}