/* One uninterrupted camera journey: island, pond, then the journal behind the tree. */
:root { --world-header: 90px; }
.world-journey { position: relative; height: 220svh; min-height: 0; --journey: 0; }
.world-journey .hero-3d { position: sticky; top: var(--world-header); height: calc(100svh - var(--world-header)); min-height: 0; max-height: none; overflow: visible; clip-path: inset(calc(-1 * var(--world-header)) 0 0); background: #f2ede1; isolation: isolate; }
.world-renderer,.world-fallback,.world-reading-light { position: absolute; inset: 0; }
/* Continue the same scene behind the header so the opening membrane never hits a rectangular edge. */
.world-renderer { z-index: 0; top: calc(-1 * var(--world-header)); }
.world-renderer[data-state="fallback"] .world-canvas { visibility: hidden; }
.world-canvas { display: block; width: 100%; height: 100%; touch-action: pan-y; }
.world-fallback { background: #f3efe2; z-index: -1; }
.hero-3d[data-world="fallback"] .world-fallback { background: url('./wonderland.webp') center/cover; }
.world-reading-light { z-index: 1; pointer-events: none; background: linear-gradient(90deg,#f7f4e9aa, #f7f4e930 32%, transparent 52%); transition: opacity 1s; }
.hero-3d .hero-content { position: absolute; top: 12%; left: 6%; margin: 0; width: 37%; max-width: 530px; padding: 0; pointer-events: none; transition: opacity .7s, transform 1s cubic-bezier(.22,1,.36,1), filter .7s; }
.hero-3d .hero-content button,.hero-3d .hero-content a { pointer-events: auto; }
.hero-3d .hero-title { font-size: clamp(82px,8.7vw,132px); line-height: 1; }
.hero-3d .hero-actions { margin-top: 30px; }
.hero-3d .love-clock { width: min(100%,330px); margin-top: 46px; background: #fffcf16b; backdrop-filter: blur(6px); padding: 19px 22px; }
.hero-3d .clock-caption { font-size: 8px; letter-spacing: 2px; }
.hero-3d .clock-number { font-size: 32px; }
.hero-3d .clock-foot { font-size: 8px; }
.hero-3d .daily-letter { right: 5%; bottom: 95px; max-width: 190px; padding: 12px 15px; box-shadow: 0 12px 40px #35524312; }
.hero-3d .daily-letter .letter-meta { min-width: 70px; }
.hero-3d .daily-letter .letter-meta .eyebrow { font-size: 7px; }
.world-letter { transition: opacity .7s; }
.hero-3d .hero-bottom { left: 6%; right: 5%; bottom: 32px; pointer-events: none; }
.hero-3d .hero-bottom button { pointer-events: auto; }
.hero-3d .scroll-cue { font-size: 8px; letter-spacing: 2px; }
.world-controls { position: absolute; left: 6%; right: 5%; bottom: 30px; z-index: 5; pointer-events: none; }
.pond-controls { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.pond-hint { font-size: 9px; letter-spacing: 1px; color: #647566; }
.world-tools { display: flex; gap: 10px; pointer-events: auto; }
.world-touch,.world-return { display: inline-flex; gap: 8px; align-items: center; min-height: 42px; padding: 10px 15px; border: 1px solid #adba9b60; background: #fffbedaa; backdrop-filter: blur(12px); border-radius: 999px; font-size: 10px; letter-spacing: 1px; transition: background .3s,transform .4s; }
.world-touch:hover,.world-return:hover { background: #fffbed; transform: translateY(-2px); }
.is-exploring .hero-content { opacity: 0; transform: translateY(-26px); filter: blur(4px); }
.is-exploring .world-letter { opacity: 0; pointer-events: none; }
.is-exploring .world-reading-light { opacity: 0; }
.journey-progress { position: absolute; bottom: 0; height: 2px; inset-inline: 0; z-index: 5; background: #c3ccae30; }
.journey-progress span { display: block; width: 100%; height: 100%; background: #9ea77b; transform: scaleX(var(--journey)); transform-origin: left; }
.world-support-note { position: absolute; right: 5%; bottom: 170px; padding: 10px 16px; background: #fff9ebd9; font-size: 11px; z-index: 4; }
.book-home { position:absolute; z-index:12; left:4%; top:24px; }
.is-reading .world-support-note { display:none; }
.hero-3d[data-world="fallback"].is-reading .book-projection { visibility:visible!important; transform:none!important; position:relative; width:min(94%,1000px); height:auto; margin:80px auto; opacity:1!important; }
.world-intro .world-title { animation: world-arrival 1.7s cubic-bezier(.22,1,.36,1) both; }
@keyframes world-arrival { from { opacity: 0; transform: translateY(15px); filter: blur(5px); } to { opacity: 1; transform: none; filter: none; } }
.scene-transition { position: fixed; inset: 0; pointer-events: none; z-index: 70; opacity: 0; background: radial-gradient(ellipse at 70% 50%,#f3ebd800 15%,#f5f1e3b3 70%,#f8f5ea); }
.scene-transition.travel { animation: scene-travel .8s cubic-bezier(.22,.7,.3,1) both; }
@keyframes scene-travel { 0% { opacity: 0; transform: scale(1.2); } 35% { opacity: .82; } 100% { opacity: 0; transform: scale(.95); } }
html[data-night="true"] .world-reading-light { background: linear-gradient(90deg,#142e31b0,#142e3130 35%,transparent 55%); }
html[data-night="true"] .pond-hint { color: #d3daca; }
html[data-night="true"] .world-tools button { background: #234137bd; color: #e9ecd9; border-color: #8d9e775e; }
@media(min-width:1600px){ :root { --world-header:98px; } }
@media(min-width:761px) and (max-width:1200px){ :root { --world-header:80px; } .hero-3d .hero-title { font-size:88px; } .hero-3d .love-clock { width:290px; } }
@media(max-width:760px){
  :root { --world-header:74px; }
  .world-journey { height: 215svh; }
  .hero-3d .hero-content { top:26px; bottom:0; left:24px; width:calc(100% - 48px); max-width:none; }
  .hero-3d .hero-title { font-size:clamp(64px,19vw,96px); line-height:1; }
  .hero-3d .hero-actions { margin-top:20px; }
  .hero-3d .hero-actions .button { font-size:10px; padding:12px 18px; }
  .hero-3d .love-clock { position:absolute; top:auto; bottom:105px; left:0; margin:0; width:100%; padding:10px 15px; background:#fffcf3d1; }
  .hero-3d .clock-caption { font-size:7px; margin-bottom:6px; }
  .hero-3d .clock-number { font-size:24px; }
  .hero-3d .clock-label { font-size:6px; }
  .hero-3d .clock-foot,.hero-3d .clock-foot button { font-size:7px; }
  .hero-3d .daily-letter { top:114px; right:24px; left:auto; bottom:auto; width:58px; min-height:50px; padding:6px; transform:rotate(-5deg); }
  .hero-3d .daily-letter .letter-meta { display:none; }
  .hero-3d .daily-letter .envelope-art { width:44px; height:33px; flex-shrink:0; }
  .hero-3d .world-reading-light { background:linear-gradient(#f8f4e870,transparent 30%,transparent 75%,#faf7ef50); }
  .hero-3d .hero-bottom { left:24px; bottom:70px; }
  .world-controls { left:24px; bottom:80px; }
  .world-tools { gap:8px; }
  .world-touch,.world-return { min-height:38px; padding:8px 12px; font-size:9px; }
  .world-support-note { left:24px; right:24px; bottom:250px; font-size:9px; }
}
@media(max-height:540px) and (min-width:600px){
  .hero-3d .hero-content { top:20px; left:4%; width:38%; }
  .hero-3d .hero-title { font-size:64px; }
  .hero-3d .hero-actions { margin-top:12px; }
  .hero-3d .love-clock { display:none; }
  .world-controls,.hero-3d .hero-bottom { bottom:22px; }
}
html[data-quiet="true"] .world-intro .world-title,html[data-quiet="true"] .scene-transition.travel { animation:none; }
@media(prefers-reduced-motion:reduce){.world-intro .world-title,.scene-transition.travel{animation:none}.hero-3d *{transition-duration:.01ms!important}}