/* Main-scene feature window: a softly asymmetric, sunlit arch. */
.window{
  overflow:hidden;
  isolation:isolate;
  border:10px solid #b98e62;
  border-radius:50% 50% 10% 10% / 30% 30% 10% 10%;
  background:
    radial-gradient(circle at 78% 17%,rgba(255,249,207,.95) 0 5%,rgba(255,238,173,.38) 17%,transparent 40%),
    linear-gradient(146deg,#b8dce0 0%,#e6eff0 43%,#f7d586 100%);
  box-shadow:0 0 0 5px rgba(223,187,133,.62),0 20px 31px rgba(38,67,109,.22),inset 0 0 32px rgba(255,255,255,.6);
  transform:none;
}

.window::before{
  content:"";
  position:absolute;
  width:62%;
  aspect-ratio:1;
  right:auto;
  left:19%;
  top:-20%;
  border-radius:50%;
  background:radial-gradient(circle,rgba(255,249,206,.75) 0 14%,rgba(255,235,163,.34) 42%,transparent 72%);
  filter:blur(2px);
  pointer-events:none;
  z-index:1;
}

.window::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  background:radial-gradient(ellipse at 50% 20%,rgba(255,255,255,.35),transparent 58%);
  pointer-events:none;
  z-index:3;
  animation:windowGlow 8s ease-in-out infinite alternate;
}

.window-illustration{position:absolute;inset:0;z-index:0;width:100%;height:100%;object-fit:cover;object-position:center center}
.room-doodle{position:absolute;inset:0;z-index:1;width:100%;height:100%;object-fit:cover;object-position:center center}
.room-doodle.gallery-entering{animation:roomPhotoEnter .52s ease-out both}
@keyframes roomPhotoEnter{from{opacity:.42;transform:scale(1.025)}to{opacity:1;transform:scale(1)}}

.window-cross{position:absolute;inset:0;z-index:2}
.window-cross::before,.window-cross::after{background:#b78960;box-shadow:0 0 0 1px rgba(255,237,193,.35)}
.window-cross::before{left:50%;top:7%;width:7px;height:93%;transform:translateX(-50%);border-radius:7px}
.window-cross::after{top:55%;left:5%;width:92%;height:7px;border-radius:7px}

.curtain{top:-9%;height:116%;background:linear-gradient(90deg,rgba(255,255,251,.92),rgba(255,251,231,.28));box-shadow:inset -10px 0 15px rgba(174,132,82,.08)}
.curtain-left{left:-22%;border-radius:54% 12% 68% 10%;transform:skewY(-4deg);animation:none}
.curtain-right{right:-22%;border-radius:12% 54% 10% 68%;transform:skewY(4deg);animation:none}

.weather{top:-43px;right:-97px;border-radius:18px 18px 18px 6px;box-shadow:0 9px 18px rgba(25,49,87,.17)}

@keyframes windowGlow{
  from{opacity:.62;transform:translateX(-2%) scale(.98)}
  to{opacity:1;transform:translateX(3%) scale(1.04)}
}

@media (prefers-reduced-motion:reduce){
  .window::after{animation:none}
}

@media (max-width:720px){
  .window{border-width:7px;box-shadow:0 0 0 3px rgba(223,187,133,.58),0 13px 22px rgba(38,67,109,.18)}
  .weather{top:-36px;right:-74px;transform:scale(.83);transform-origin:top right}
}

.metric-presets{margin:14px 0 12px}
.metric-presets p{margin:0 0 7px;color:#68726d;font-size:12px}
.metric-presets>div{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
.metric-presets button{border:1px solid #dcd8ce;border-radius:11px;padding:9px 7px;background:#fffdf7;color:#35528d;font:600 12px inherit;cursor:pointer;transition:border-color .18s,background .18s,color .18s}
.metric-presets button:hover,.metric-presets button:focus-visible,.metric-presets button.selected{border-color:#4566a5;background:#4566a5;color:#fff;outline:none}

/* Profile header: a protected brand bar with the return control left unchanged. */
.profile-view .light-topbar{max-width:none;background:#34528d;min-height:96px;height:auto;padding-top:14px;padding-bottom:14px;box-shadow:0 9px 24px rgba(25,47,91,.17)}
.profile-view .light-topbar .dark-brand{color:#fff}
.profile-view .light-topbar .dark-brand small{color:#f6ead4;opacity:1}
.profile-view .light-topbar .year-tag{color:#f6ead4}

/* Keep the furniture in a deliberate depth order. */
.floor{z-index:1}
.sofa{z-index:2}

/* A restrained gradient and only a handful of distant stars for the home backdrop. */
#home-view::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background:radial-gradient(circle at 11% 18%,rgba(255,244,190,.62) 0 1px,transparent 1.8px),radial-gradient(circle at 24% 67%,rgba(220,233,255,.48) 0 1px,transparent 1.7px),radial-gradient(circle at 39% 12%,rgba(255,246,201,.5) 0 1px,transparent 1.8px),radial-gradient(circle at 54% 76%,rgba(219,232,255,.46) 0 1px,transparent 1.7px),radial-gradient(circle at 72% 16%,rgba(255,244,190,.5) 0 1px,transparent 1.8px),radial-gradient(circle at 89% 52%,rgba(219,232,255,.42) 0 1px,transparent 1.7px),linear-gradient(135deg,rgba(105,139,199,.12),transparent 40%,rgba(16,39,91,.1) 78%)}
.living-room{z-index:1}
.living-room>.sunlight,.living-room>.wall-texture,.living-room>.window,.living-room>.sofa,.living-room>.plant,.living-room>.floor{display:none}
.living-room>.scene-object{z-index:5}
.living-room>.scene-object span{background:rgba(255,253,244,.9);border:1px solid rgba(61,86,120,.16);box-shadow:0 5px 12px rgba(54,66,81,.16)}
.home-stars{position:absolute;inset:0;z-index:1;pointer-events:none}
.home-star{position:absolute;color:#ffe38b;font-size:22px;line-height:1;transform:scaleX(.88) scaleY(1.35);filter:drop-shadow(0 0 10px rgba(255,222,113,.92));opacity:.96}
.home-star:nth-child(1){left:13%;top:18%;font-size:30px}.home-star:nth-child(2){left:28%;top:66%;font-size:22px}.home-star:nth-child(3){left:44%;top:14%;font-size:25px}.home-star:nth-child(4){left:61%;top:79%;font-size:22px}.home-star:nth-child(5){left:78%;top:20%;font-size:28px}.home-star:nth-child(6){left:90%;top:57%;font-size:22px}

/* The achievement markers stay in place, but read clearly over the photo. */
.living-room{--room-shift-x:0px;--room-shift-y:0px;--room-rotate-x:0deg;--room-rotate-y:0deg;transform-style:preserve-3d;will-change:transform;transition:transform .42s cubic-bezier(.22,1,.36,1)}
.living-room>.scene-object span{background:rgba(25,53,102,.72);border:1px solid rgba(255,230,161,.58);color:#ffe3a1;box-shadow:0 0 0 1px rgba(255,241,193,.22),0 0 18px rgba(255,218,121,.66),0 6px 14px rgba(12,30,67,.32);filter:drop-shadow(0 0 7px rgba(255,230,160,.76))}
.living-room>.scene-object small{margin-top:2px;padding:3px 7px;border-radius:999px;background:rgba(255,252,237,.9);color:#23477d;box-shadow:0 3px 9px rgba(18,41,78,.16);line-height:1.2}
.living-room>.star-object small,.living-room>.book-object small,.living-room>.letter-object small,.living-room>.compass-object small,.living-room>.leaf-object small{background:rgba(20,49,96,.76);color:#fff;box-shadow:0 3px 9px rgba(8,26,62,.28)}

@media (min-width:761px){
  .living-room{transform:translate3d(var(--room-shift-x),var(--room-shift-y),0) rotateX(var(--room-rotate-x)) rotateY(var(--room-rotate-y))}
}

/* Page changes feel continuous without delaying the next interaction. */
.view.view-entering{animation:pageEnter .38s cubic-bezier(.22,1,.36,1) both}
::view-transition-old(root){animation:pageExit .18s ease-out both}
::view-transition-new(root){animation:pageEnter .42s cubic-bezier(.22,1,.36,1) both}
@keyframes pageExit{to{opacity:0;transform:translateY(-8px)}}
@keyframes pageEnter{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}

@media (max-width:760px){
  .profile-view .light-topbar{min-height:78px;padding-top:10px;padding-bottom:10px}
  .living-room{transform:translateX(50%) translate3d(var(--room-shift-x),var(--room-shift-y),0)}
}

@media (prefers-reduced-motion:reduce){
  .view.view-entering,::view-transition-old(root),::view-transition-new(root){animation:none}
}
