:root {
  --cottage-paper: #f3e5d9;
  --cottage-cream: #fff4dd;
}

.exterior-frame { position: relative; overflow: hidden; overflow: clip; }
.cottage-visit { overflow: hidden; }
.exterior-door-bounds {
  left: calc(590 / 1105 * 100%);
  top: calc(638 / 1347 * 100%);
  width: calc(103 / 1105 * 100%);
  height: calc(163 / 1347 * 100%);
}
.cottage-threshold {
  position: absolute;
  visibility: hidden;
  pointer-events: none;
  perspective: 440px;
}
.cottage-threshold.is-open { visibility: visible; }
.threshold-light, .cottage-leaf { position: absolute; inset: 0; }
.cottage-leaf { transform-origin: 5% center; backface-visibility: hidden; }
.threshold-light, .cottage-leaf svg, .room-door-leaf svg, .shaped-control svg { display: block; width: 100%; height: 100%; }
[data-light='night'] .cottage-leaf { filter: brightness(.58) saturate(.74); }
.shaped-control {
  position: absolute;
  background: transparent;
  padding: 0;
  border: 0;
  pointer-events: none;
}
.cottage-door { z-index: 5; touch-action: none; }
.shaped-control:focus-visible { outline: none; }
.shape-target {
  fill: var(--cottage-cream);
  fill-opacity: 0;
  pointer-events: fill;
  cursor: pointer;
  transition: fill-opacity .24s ease;
}
.shaped-control:focus-visible .shape-target { fill-opacity: .34; }

.doorway-veil {
  position: fixed;
  z-index: 9;
  inset: 0;
  background: radial-gradient(ellipse at center, var(--cottage-cream), #f4d8b6);
  pointer-events: none;
}
.cottage {
  position: fixed;
  z-index: 10;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  isolation: isolate;
  background: radial-gradient(ellipse at center, #f7ebdc, var(--cottage-paper) 73%, #eeddd2);
}
.cottage[hidden], .doorway-veil[hidden] { display: none; }
.cottage::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 58% 57%, #bcaaac, #b19da5 72%, #a5919d);
  opacity: 0;
  pointer-events: none;
  transition: opacity .95s ease;
}
.room-picture {
  position: relative;
  width: min(100%, 700px, 80svh);
  aspect-ratio: 650 / 812;
  flex: none;
  isolation: isolate;
}
.room-art, .room-effects, .room-tableware, .room-motion {
  position: absolute;
  display: block;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.room-night, .cottage[data-light='night'] .room-day { display: none; }
.cottage[data-light='night'] .room-night { display: block; }
.room-lamplit, .lantern-in-shadow { opacity: 0; transition: opacity .95s ease; }
.lantern-by-window { opacity: 1; transition: opacity .95s ease; }
.cottage[data-curtains='closed']::before,
.cottage[data-curtains='closed'] :is(.room-lamplit, .lantern-in-shadow) { opacity: 1; }
.cottage[data-curtains='closed'] :is(.lantern-by-window, #interior-snow) { opacity: 0; }
/* Each panel bunches up against its side of the window. */
.curtain {
  transform-box: fill-box;
  transform: scaleX(.13);
  transition: transform .86s cubic-bezier(.24,.69,.25,1);
}
.curtain-left { transform-origin: left center; }
.curtain-right { transform-origin: right center; transition-duration: .93s; }
.cottage[data-curtains='closed'] .curtain { transform: scaleX(1); }
.curtain-fabric { fill: #cba39f; stroke: #a36d6b; stroke-width: 1.85; transition: fill .95s ease; }
.curtain-fold { fill: none; stroke: #936574; stroke-width: 1.35; opacity: .55; }
.cottage[data-curtains='closed'] .curtain-fabric { fill: #b48991; }
#curtain-pull-drawing { transform-box: fill-box; transform-origin: 6% top; }
.room-door-bounds {
  left: calc(448 / 650 * 100%);
  top: calc(216 / 812 * 100%);
  width: calc(153 / 650 * 100%);
  height: calc(340 / 812 * 100%);
}
.room-door-stage, .room-door-opening { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.room-door-stage { clip-path: url(#room-door-stage-clip); perspective: 690px; perspective-origin: 69% 48%; }
.room-door-leaf { position: absolute; transform-origin: 1.1% 64%; backface-visibility: hidden; }
#interior-snow { opacity: .82; transition: opacity .8s ease; }
#interior-snow circle { animation: window-fall 11.7s linear infinite; }
#interior-snow circle:nth-child(3n + 1) { animation-duration: 9.8s; animation-delay: -4.4s; }
#interior-snow circle:nth-child(3n + 2) { animation-duration: 14.3s; animation-delay: -7.9s; }
#interior-snow circle:nth-child(3n) { animation-delay: -1.4s; }
@keyframes window-fall {
  0% { opacity: 0; transform: translate(-4px, -25px); }
  20%, 76% { opacity: .88; }
  100% { opacity: 0; transform: translate(9px, 39px); }
}
#interior-glow { opacity: 1; transition: opacity var(--lantern-tempo, 1s) ease-in-out; }
.room-picture[data-lamp='dim'] #interior-glow { opacity: .24 !important; }

.room-picture button {
  position: absolute;
  z-index: 2;
  display: grid;
  place-items: center;
  transform: translate(-50%, -50%);
  border: 0;
  background: none;
  padding: 0;
  cursor: pointer;
  touch-action: manipulation;
}
.room-lantern { top: 62.3%; left: 69.2%; width: max(7%, 40px); height: max(8%, 44px); border-radius: 42%; }
.curtain-pull { top: 34.5%; left: 43.7%; width: 44px; height: 44px; border-radius: 44%; }
.curtain-pull:focus-visible { outline-offset: -4px; }
.room-picture .shaped-control { display: block; transform: none; }
.room-bowl { left: 49.4%; top: 68.7%; width: max(14%, 44px); height: max(7%, 44px); border-radius: 40%; }
.room-envelope {
  left: calc(400 / 650 * 100%);
  top: calc(550 / 812 * 100%);
  width: calc(93 / 650 * 100%);
  height: calc(43 / 812 * 100%);
}
.room-picture[data-letter='up'] .letter-on-table { opacity: 0; }
#interior-steam path { transform-box: fill-box; transform-origin: 50% 100%; animation: steam-rise 5.4s ease-in-out infinite -1.1s; }
#interior-steam path:nth-child(2) { animation-delay: -2.9s; animation-duration: 6.8s; }
@keyframes steam-rise {
  0% { opacity: 0; transform: translate(1px, 6px) scale(.82); }
  24%, 49% { opacity: .82; }
  100% { opacity: 0; transform: translate(4px, -15px) scale(1.15); }
}
@media (hover: hover) {
  .shaped-control:hover .shape-target { fill-opacity: .17; }
  .room-picture:has(.curtain-pull:hover) #curtain-pull-tassel { filter: brightness(1.16); }
}

.cottage-letter {
  width: min(390px, calc(100vw - 38px));
  max-height: calc(100svh - 26px);
  margin: auto;
  padding: 0;
  border: 0;
  background: none;
  color: var(--ink);
  overflow: auto;
}
.cottage-letter::backdrop { background: #593c3237; }
.letter-flight { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; pointer-events: none; }
.letter-paper {
  position: relative;
  min-height: 237px;
  padding: 30px clamp(23px, 7vw, 40px) 32px;
  border: 1px solid #be826a80;
  background: linear-gradient(158deg, #fff6e4 30%, #f8e7cd 100%);
  box-shadow: inset 0 0 10px #9f6b5224;
  text-align: center;
}
.letter-paper::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(0deg, transparent 49.6%, #ae806e20 50%, #fff8ef52 50.4%, transparent 50.8%), url('assets/paper.svg');
  mix-blend-mode: multiply;
  opacity: .29;
}
.letter-paper::after {
  position: absolute;
  inset: 6px;
  border: 1px solid #b7826c44;
  content: '';
  pointer-events: none;
}
.letter-carnation { position: relative; display: block; width: 37px; height: 46px; margin: 0 auto 17px; transform: rotate(-10deg); }
.letter-words { position: relative; font-family: var(--hand); font-size: clamp(17px, 4.9vw, 20px); line-height: 1.72; }
.letter-words p { margin: 0; }
.letter-words p + p { margin-top: 18px; font-size: .91em; }
.letter-close {
  position: absolute;
  z-index: 2;
  top: 7px;
  right: 7px;
  width: 44px;
  height: 44px;
  padding: 12px;
  border: 0;
  background: transparent;
  cursor: pointer;
}
.letter-close svg { display: block; width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; }

@media (max-width: 620px) and (orientation: portrait) {
  .room-picture { width: min(100%, 89svh); }
}
@media (orientation: landscape) and (max-height: 485px) {
  .room-picture { width: min(100%, 84svh); }
  .letter-paper { min-height: 0; padding-block: 18px 20px; }
  .letter-carnation { width: 30px; height: 38px; margin-bottom: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  #interior-snow circle, #interior-steam path { animation: none; }
  #interior-glow { transition: none; }
  .shape-target { transition: none; }
  .cottage::before, .room-lamplit, .lantern-in-shadow, .lantern-by-window,
  .curtain, .curtain-fabric, #interior-snow { transition: none; }
}