/* Harbor House — Scene System (Rebuild Phase A)
   Dimensional 2.5D stages: planes, light, rigs, camera, mission pattern.
   Rules: transform/opacity animation ONLY. Calm mode = body.hh-calm. */
:root{
  --scene-ease:cubic-bezier(.22,.9,.28,1);
}

/* ── Stage & planes ─────────────────────────────── */
.scene{position:relative;overflow:hidden;border-radius:var(--radius-lg);isolation:isolate}
.scene-world{position:absolute;inset:-4%;will-change:transform;transform:scale(var(--cam-s,1)) translate(var(--cam-x,0),var(--cam-y,0));transition:transform 1.2s var(--scene-ease)}
.scene-layer{position:absolute;inset:0;pointer-events:none;will-change:transform}
.scene-layer > svg{position:absolute;inset:0;width:100%;height:100%}
.scene-content{position:relative;z-index:5}
.scene-haze{background:linear-gradient(180deg,rgba(255,255,255,.16),rgba(255,255,255,0) 55%);mix-blend-mode:screen}
.scene-vignette{background:radial-gradient(ellipse 105% 90% at 50% 42%,transparent 58%,rgba(10,22,40,.28) 100%)}
.scene-glow{background:radial-gradient(circle at 22% 12%,rgba(255,201,60,.34),transparent 46%)}
.contact-shadow{fill:#0a1626;opacity:.28;filter:blur(5px)}

/* Entry push-in: JS adds .scene-live after first frame */
.scene-cam{transform:scale(1.07) translateY(10px);transition:transform 1.6s var(--scene-ease)}
.scene-cam.scene-live{transform:scale(1) translateY(0)}

/* ── Mission banner (clarity pattern) ───────────── */
.mission{display:flex;gap:var(--sp-3);align-items:flex-start;background:linear-gradient(135deg,var(--navy),#1d3f6e);color:#fff;border-radius:var(--radius-lg);padding:var(--sp-4) var(--sp-5);box-shadow:var(--shadow)}
.mission .mission-tag{flex:0 0 auto;font-family:var(--font-display);font-weight:800;text-transform:uppercase;letter-spacing:.06em;font-size:var(--fs-sm);background:var(--sun);color:var(--navy);border-radius:999px;padding:.28em .8em;margin-top:.15em}
.mission p{margin:0;font-size:var(--fs-md);line-height:1.45}
.mission strong{color:var(--sun)}

/* Progress dock: lives ON the activity surface */
.progress-dock{display:flex;align-items:center;gap:var(--sp-3);background:rgba(15,35,64,.88);color:#fff;border-radius:999px;padding:.45rem .9rem;backdrop-filter:blur(3px);box-shadow:var(--shadow-sm)}
.progress-dock .pd-bar{flex:1 1 auto;height:12px;border-radius:99px;background:rgba(255,255,255,.22);overflow:hidden;min-width:90px}
.progress-dock .pd-fill{height:100%;width:0%;border-radius:99px;background:linear-gradient(90deg,#74c69d,#ffc93c);transition:width .35s var(--scene-ease)}
.progress-dock .pd-text{font-family:var(--font-display);font-weight:700;white-space:nowrap;font-size:var(--fs-sm)}

/* Discovery card: appears IN PLACE beside the activity */
.discovery-card{background:var(--paper);border:3px solid var(--sun);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);padding:var(--sp-4) var(--sp-5);animation:disc-in .5s var(--scene-ease)}
.discovery-card h3{margin:0 0 var(--sp-1);color:var(--navy)}
.discovery-card p{margin:0}
@keyframes disc-in{from{opacity:0;transform:translateY(14px) scale(.96)}to{opacity:1;transform:none}}

/* ── Character rigs ─────────────────────────────── */
.rig-breathe{transform-origin:50% 88%;animation:rig-breathe 3.4s ease-in-out infinite}
@keyframes rig-breathe{0%,100%{transform:scaleY(1)}50%{transform:scaleY(1.018)}}
.rig-sway{transform-origin:50% 92%;animation:rig-sway 5.2s ease-in-out infinite}
@keyframes rig-sway{0%,100%{transform:rotate(-1.1deg)}50%{transform:rotate(1.1deg)}}
.rig-bob{animation:rig-bob 3.8s ease-in-out infinite}
@keyframes rig-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
.rig-eyes{transform-origin:center;transform-box:fill-box}
.rig-eyes.blink{animation:rig-blink .18s ease-in-out}
@keyframes rig-blink{0%,100%{transform:scaleY(1)}45%{transform:scaleY(.08)}}
.rig-tail{transform-origin:8% 50%;transform-box:fill-box;animation:rig-tail 4.6s ease-in-out infinite}
@keyframes rig-tail{0%,100%{transform:rotate(-2deg)}50%{transform:rotate(2.6deg)}}
.rig-look{will-change:transform;transition:transform .12s linear}
.react-happy{animation:react-happy .7s var(--scene-ease)}
@keyframes react-happy{0%{transform:scale(1,1)}30%{transform:scale(1.05,.93)}55%{transform:scale(.97,1.05)}78%{transform:scale(1.02,.99)}100%{transform:scale(1,1)}}
.react-wow{animation:react-wow .9s var(--scene-ease)}
@keyframes react-wow{0%{transform:translateY(0) scale(1)}35%{transform:translateY(-10px) scale(1.04)}100%{transform:translateY(0) scale(1)}}

/* Ambient life */
.drift-a{animation:drift-a 26s linear infinite}
.drift-b{animation:drift-a 38s linear infinite reverse}
@keyframes drift-a{from{transform:translateX(-4%)}to{transform:translateX(4%)}}
.float-soft{animation:rig-bob 5.5s ease-in-out infinite}

/* ── Calm / reduced-motion degradation ──────────── */
body.hh-calm .rig-breathe,body.hh-calm .rig-sway,body.hh-calm .rig-tail{animation-duration:9s}
body.hh-calm .drift-a,body.hh-calm .drift-b{animation:none}
body.hh-calm .scene-cam{transform:none;transition:none}
body.hh-calm .discovery-card{animation:none}
@media (prefers-reduced-motion:reduce){
  .rig-breathe,.rig-sway,.rig-tail,.rig-bob,.drift-a,.drift-b,.float-soft{animation:none!important}
  .scene-cam{transform:none;transition:none}
  .discovery-card{animation:none}
}

/* Phase G fix: on narrow screens the mission banner stacks — tag on its own
   line, text full width (a side-by-side row left a tall empty navy void). */
@media (max-width:640px){
  .mission{flex-direction:column;gap:var(--sp-2)}
}