/* The fourth chapter turns the same winter park into a gentle sunny morning. */
.experience { overflow: clip; }
.landscape-day {
  background-image: url("assets/sunshine-background.svg");
  z-index: -4;
  opacity: 0;
  transition: opacity 5s ease;
}
.sun-haze, .sun-rays {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 5s ease;
  z-index: -1;
}
.sun-haze {
  background: radial-gradient(ellipse at 75% 24%, #fff1ba77 0%, #f7dba92b 21%, transparent 53%);
}
.sun-rays {
  inset: -8%;
  background: conic-gradient(from 110deg at 74% 24%, transparent 0deg, #ffefd323 9deg, transparent 17deg, transparent 25deg, #fff3cd2e 31deg, transparent 38deg, transparent 48deg, #ffecc31f 54deg, transparent 60deg, transparent 360deg);
  transform-origin: 74% 24%;
  animation: sunshine-drift 16s ease-in-out infinite alternate;
}
.sky-light { transition: opacity 4s; }
.vignette { transition: opacity 4s; }
.couple { transition: filter 4s; }
h1 { transition: opacity .26s, transform .26s; }
h1.changing { opacity: 0; transform: translateY(5px); }
.experience[data-chapter="3"] .landscape-day { opacity: 1; }
.experience[data-chapter="3"] .sun-haze { opacity: .9; }
.experience[data-chapter="3"] .sun-rays { opacity: 1; }
.experience[data-chapter="3"] .sky-light { opacity: .9; }
.experience[data-chapter="3"] .vignette { opacity: .75; }
.experience[data-chapter="3"] .warmth { opacity: 1; }
.experience[data-chapter="3"] .couple { filter: drop-shadow(0 5px 12px #66513d20) brightness(1.09) saturate(1.05); }
.experience[data-chapter="3"] .title-accent { color: #ffe2b6; }
.experience[data-chapter="3"] .story-caption p,
.experience[data-chapter="3"] .english-line { color: #f1ead8; }
.experience[data-chapter="3"] .little-note,
.experience[data-chapter="3"] .footer-quote { color: #e4dbc6; }
.experience[data-chapter="3"] h1 { text-shadow: 0 3px 25px #203c4244; }

/* Character acting: hesitation, a glance, a smile, then a little joyful swing. */
.girl-head {
  transform-origin: 415px 493px;
  transform: rotate(8deg) translateY(3px);
  transition: transform 2.3s cubic-bezier(.2,.7,.25,1);
}
.experience[data-chapter] .girl-face { transform: none; }
.experience[data-chapter="1"] .girl-head { transform: rotate(1deg) translateY(1px); }
.experience[data-chapter="2"] .girl-head { transform: rotate(-4deg); }
.experience[data-chapter="3"] .girl-head { transform: rotate(-7deg) translateY(-3px); }
.expression { transition: opacity .8s ease; }
.expression-sad { opacity: 1; }
.expression-curious, .expression-happy { opacity: 0; }
.experience:is([data-chapter="1"],[data-chapter="2"],[data-chapter="3"]) .expression-sad { opacity: 0; }
.experience:is([data-chapter="1"],[data-chapter="2"]) .expression-curious { opacity: 1; }
.experience[data-chapter="3"] .expression-happy { opacity: 1; }
.expression-curious .girl-eyes {
  transform-box: fill-box;
  transform-origin: 50% 60%;
  animation: gentle-blink 5.6s ease-in-out infinite;
}
.girl-tear {
  animation: falling-tear 3.6s ease-in-out infinite;
}
.girl {
  transform-origin: 416px 600px;
  animation: quiet-breath 5s ease-in-out infinite;
}
.girl-rest-arm { opacity: 1; transition: opacity .9s; }
.girl-happy-arm {
  opacity: 0;
  transform-origin: 438px 516px;
  transform: rotate(7deg);
  transition: opacity .9s, transform 1.5s;
}
.experience[data-chapter="3"] .girl-rest-arm { opacity: 0; }
.experience[data-chapter="3"] .girl-happy-arm {
  opacity: 1;
  transform: rotate(0);
  animation: happy-wave 3.8s 1.6s ease-in-out infinite;
}
.girl-swing-leg { transform-origin: 410px 646px; }
.experience[data-chapter="3"] .girl-swing-leg {
  animation: happy-feet 3.1s 1s ease-in-out infinite;
}
.boy-arrival { transition: transform 3.8s cubic-bezier(.18,.6,.3,1), opacity 1.8s; }
.experience[data-chapter="3"] .boy-arrival { transform: translateX(0); opacity: 1; }
.boy-step-left { transform-origin: 238px 578px; }
.boy-step-right { transform-origin: 276px 578px; }
.experience[data-chapter="1"] .boy-step-left { animation: step-left .8s 4 ease-in-out; }
.experience[data-chapter="1"] .boy-step-right { animation: step-right .8s 4 ease-in-out; }
.boy-head { transform-origin: 265px 390px; transition: transform 2s; }
.boy-expression { transition: opacity 1.1s ease; }
.boy-expression-neutral { opacity: 1; }
.boy-expression-soft,.boy-expression-happy { opacity: 0; }
.experience:is([data-chapter="2"],[data-chapter="3"]) .boy-expression-neutral { opacity: 0; }
.experience[data-chapter="2"] .boy-expression-soft { opacity: 1; }
.experience[data-chapter="3"] .boy-expression-happy { opacity: 1; }
.experience[data-chapter="3"] .boy-head { transform: rotate(4deg); }
.experience[data-chapter="3"] .umbrella { transform: rotate(0); opacity: 1; }
.experience[data-chapter="3"] .umbrella-canopy { transform: scale(1); }
.experience[data-chapter="3"] .holding-hand { opacity: 1; }
.experience[data-chapter="3"] .scarf-tail { animation-duration: 3.5s; }
.experience[data-chapter="3"] .heart-moment {
  opacity: .95;
  transform: translateY(0);
  animation: heart-float 4s ease-in-out infinite;
}
.experience[data-chapter="3"] .scene-annotation { opacity: .9; transform: translateY(0); }
.character-sunlight { opacity: 0; transition: opacity 4s; }
.experience[data-chapter="3"] .character-sunlight { opacity: .6; }
.joy-spark { opacity: 0; }
.experience[data-chapter="3"] .joy-spark { animation: joy-twinkle 3s ease-in-out infinite; }
.experience[data-chapter="3"] .joy-spark:nth-child(2n) { animation-delay: 1.4s; }
.chapter.visited { color: #b9c0ae; }
.chapter.visited i:after { transform: scaleX(1); opacity: .4; }
.song-copy { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.song-copy small { font-size: 8px; letter-spacing: 1px; color: #b4bdb5; }
.sound-button[aria-pressed="true"] .song-copy small { color: #ebcfa8; }
.sound-button[aria-pressed="false"] .sound-bars i { height: 3px; }
.tab-hidden *, .tab-hidden *::before, .tab-hidden *::after { animation-play-state: paused !important; }

@keyframes sunshine-drift { from { transform: rotate(-3deg); } to { transform: rotate(4deg); } }
@keyframes quiet-breath { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-1.4px); } }
@keyframes gentle-blink { 0%,42%,46%,100% { transform: scaleY(1); } 44% { transform: scaleY(.08); } }
@keyframes falling-tear { 0%,30% { opacity: .7; transform: translateY(0); } 65%,100% { opacity: 0; transform: translateY(13px); } }
@keyframes happy-wave { 0%,60%,100% { transform: rotate(0); } 20% { transform: rotate(-7deg); } 40% { transform: rotate(3deg); } }
@keyframes happy-feet { 0%,100% { transform: rotate(0); } 50% { transform: rotate(7deg); } }
@keyframes step-left { 0%,100% { transform: rotate(0); } 25% { transform: rotate(5deg); } 75% { transform: rotate(-4deg); } }
@keyframes step-right { 0%,100% { transform: rotate(0); } 25% { transform: rotate(-4deg); } 75% { transform: rotate(5deg); } }
@keyframes heart-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@keyframes joy-twinkle { 0%,100% { opacity: .1; } 50% { opacity: .9; } }

@media(max-width:1100px) { .chapter-navigation { gap: 20px; } .footer-quote { font-size: 8px; } }
@media(max-width:700px) {
  .header-right { max-width: 145px; }
  .song-copy { gap: 4px; }
  .song-copy small { font-size: 6px; letter-spacing: .6px; }
  #soundLabel { font-size: 9px; letter-spacing: .8px; }
  .sound-button { gap: 5px; }
  .chapter-navigation { gap: 14px; }
  .chapter { gap: 5px; font-size: 8px; letter-spacing: 1px; }
  .chapter-number { font-size: 10px; }
  .snow-button { font-size: 8px; letter-spacing: .5px; }
  .story-caption p { font-size: 10px; letter-spacing: 1px; }
  .sun-haze { background: radial-gradient(ellipse at 80% 20%, #fff0c155, transparent 60%); }
  .sun-rays { background-position: 64% top; }
  .experience[data-chapter="3"] .vignette { opacity: .85; }
}
@media(max-width:370px) {
  .chapter-navigation { gap: 11px; }
  .chapter { gap: 4px; }
  .scene-footer { gap: 9px; }
  .snow-button { gap: 4px; }
  .story-caption p { font-size: 9px; }
}
@media(max-width:700px) and (min-height:930px) {
  .experience { max-height: none; }
  .story-actions { position: absolute; top: calc(86svh - 140px); bottom: auto; }
}
@media(prefers-reduced-motion:reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .experience[data-chapter="3"] .joy-spark { opacity: .7; }
}