/* Off the Record immersive tabletop — V78-approved precomposited frame build v79. */
:root{
  --offrecord-gold:#d8ad54;
  --offrecord-gold-bright:#f3d58a;
  --offrecord-green:#143a28;
  --offrecord-cream:#f3e8cf;
  --offrecord-ink:#080603;
}

/* Scene backdrops and scene-state handoff. */
.offrecord-backdrop{
  position:absolute;inset:-56px;z-index:0;overflow:hidden;pointer-events:none;
  background:url("../../images/off-record-v79/off-the-record-table-v79.webp") center/cover no-repeat;
  filter:blur(31px) brightness(.60) saturate(.92);
  transform:scale(1.045);transform-origin:center;opacity:0;
}
body.scene-offrecord .bedroom-backdrop,html.direct-offrecord .bedroom-backdrop{opacity:0}
body.scene-offrecord .offrecord-backdrop,html.direct-offrecord .offrecord-backdrop{opacity:.99}

.offrecord-scene-shell{z-index:2;opacity:0;visibility:hidden;pointer-events:none}
body.scene-offrecord .bedroom-scene-shell,html.direct-offrecord .bedroom-scene-shell{opacity:0;visibility:hidden;pointer-events:none}
body.scene-offrecord .offrecord-scene-shell,html.direct-offrecord .offrecord-scene-shell{z-index:4;opacity:1;visibility:visible;pointer-events:auto}
html.direct-offrecord .cinematic-gate{display:none!important}
html.direct-offrecord .room-experience{opacity:1!important;visibility:visible!important}
html.direct-offrecord .music-player{opacity:1!important}

.offrecord-stage{overflow:hidden;isolation:isolate;background:transparent}
.offrecord-stage:focus{outline:none}
.offrecord-scene-image{
  position:absolute;inset:0;z-index:1;width:100%;height:100%;object-fit:contain;object-position:center;
  user-select:none;-webkit-user-drag:none;pointer-events:none;filter:saturate(1.01) contrast(1.006)
}

/* V79 plays one precomposited 900 x 450 media crop. The crop contains the
   physical frame and surrounding tabletop, while only the picture opening moves.
   This keeps the browser from independently reconstructing the perspective. */
.living-picnic-photo{
  position:absolute;z-index:5;left:54.6875%;top:0;width:35.15625%;height:35.15625%;overflow:hidden;
  background:transparent;pointer-events:none
}
.living-picnic-video{
  position:absolute;inset:0;width:100%;height:100%;object-fit:fill;object-position:center;
  opacity:0;transition:opacity .24s ease;background:transparent
}
.living-picnic-video.is-live{opacity:1}
.living-picnic-glass,.living-picnic-bezel{display:none!important}

/* The album and loose photographs form one gallery object. The visible
   treatment is a full-scene transparent image with no clipped or sharp edge. */
.offrecord-album-glow{
  position:absolute;inset:0;z-index:6;width:100%;height:100%;object-fit:contain;pointer-events:none;
  opacity:0;transition:opacity .34s cubic-bezier(.2,.72,.2,1),filter .34s ease;
  mix-blend-mode:screen;filter:saturate(1.03) brightness(1.01);user-select:none;-webkit-user-drag:none
}
.offrecord-stage[data-active="album"] .offrecord-album-glow{opacity:.94;filter:saturate(1.05) brightness(1.035)}

.offrecord-hotspot-layer{position:absolute;inset:0;z-index:12;pointer-events:none}
.offrecord-hotspot{
  position:absolute;pointer-events:auto;margin:0;padding:0;border:0;background:transparent;cursor:pointer;outline:none;
  -webkit-tap-highlight-color:transparent
}
.offrecord-hotspot-album{
  left:30.7%;top:62.4%;width:44.8%;height:37.6%;
  clip-path:polygon(0 20%,38% 0,91% 6%,100% 72%,94% 100%,0 100%,0 38%)
}

.offrecord-return{
  position:absolute;z-index:18;left:1.25%;top:1.65%;display:flex;align-items:center;gap:.35rem;
  padding:.48cqw .67cqw;border:1px solid rgba(224,184,91,.42);border-radius:.23cqw;
  background:linear-gradient(180deg,rgba(42,27,12,.90),rgba(12,8,4,.88));color:#efd48b;
  font:900 clamp(8px,.72cqw,14px)/1 Inter,Segoe UI,Arial,sans-serif;letter-spacing:.10em;text-transform:uppercase;
  box-shadow:0 .25cqw .65cqw rgba(0,0,0,.46);cursor:pointer
}
.offrecord-return span{font-size:1.35em;line-height:.7}
.offrecord-return:hover,.offrecord-return:focus-visible{border-color:#f3d98f;box-shadow:0 .25cqw .65cqw rgba(0,0,0,.50),0 0 .55cqw rgba(220,169,70,.32);outline:none}

.offrecord-transition-veil{
  position:fixed;inset:-8%;z-index:23;opacity:0;visibility:hidden;pointer-events:none;
  background:
    radial-gradient(circle at 34% 76%,rgba(255,226,145,.76),rgba(174,108,34,.50) 24%,rgba(45,27,12,.90) 53%,rgba(5,4,3,.985) 82%),
    radial-gradient(circle at 58% 48%,rgba(218,151,59,.26),transparent 42%),
    linear-gradient(rgba(5,4,3,.995),rgba(5,4,3,.995));
  filter:blur(10px);transform:scale(.96);will-change:opacity,transform,filter;contain:strict
}
body.scene-switching .offrecord-transition-veil{visibility:visible}

body.scene-offrecord .music-player{left:auto;right:max(.45rem,env(safe-area-inset-right));top:max(.25rem,env(safe-area-inset-top));transform:none;--player-width:clamp(245px,14vw,315px)}
body.scene-offrecord .music-player:hover{transform:translateY(.08rem)}

/* Gallery */
.offrecord-overlay{
  position:fixed;inset:0;z-index:230;display:none;grid-template-rows:minmax(0,1fr);padding:clamp(.55rem,2vw,1.5rem);
  background:radial-gradient(circle at 50% 16%,rgba(43,82,57,.22),transparent 38rem),rgba(3,4,3,.94);
  backdrop-filter:blur(13px);opacity:0
}
.offrecord-overlay.open{display:grid;opacity:1;animation:offrecordOverlayIn .26s ease both}
@keyframes offrecordOverlayIn{from{opacity:0}to{opacity:1}}
.offrecord-dialog{
  min-width:0;min-height:0;width:min(96vw,1660px);height:min(94vh,1030px);margin:auto;
  display:grid;grid-template-rows:auto minmax(0,1fr) auto auto;overflow:hidden;
  border:1px solid rgba(229,190,100,.40);border-radius:.55rem;
  background:linear-gradient(160deg,#14251a,#080b08 38%,#100c06);
  box-shadow:0 2rem 6rem rgba(0,0,0,.74),inset 0 0 0 1px rgba(255,236,184,.05);
  transform:translateY(.7rem) scale(.985);animation:offrecordDialogIn .32s cubic-bezier(.2,.72,.2,1) forwards
}
@keyframes offrecordDialogIn{to{transform:none}}
.offrecord-dialog-head{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:clamp(.8rem,1.5vw,1.25rem) clamp(1rem,2vw,1.75rem);
  border-bottom:1px solid rgba(229,190,100,.24);background:linear-gradient(180deg,rgba(37,56,41,.92),rgba(11,15,11,.88))
}
.offrecord-dialog-head small{display:block;color:#dfbe70;text-transform:uppercase;letter-spacing:.15em;font-size:.62rem;font-weight:900}
.offrecord-dialog-head h2{margin:.2rem 0 0;font-family:Georgia,serif;font-size:clamp(1.65rem,3vw,3rem);line-height:1;text-transform:uppercase;color:#f4ead4}
.offrecord-dialog-close{flex:0 0 auto;width:2.6rem;height:2.6rem;border:1px solid rgba(229,190,100,.36);border-radius:50%;background:rgba(6,8,6,.72);color:#eed58f;font-size:1.55rem;line-height:1;cursor:pointer}
.offrecord-dialog-close:hover,.offrecord-dialog-close:focus-visible{border-color:#f5db94;background:#1a241b;outline:none;box-shadow:0 0 1rem rgba(223,183,84,.24)}
.offrecord-gallery-stage{min-height:0;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:stretch;gap:.65rem;padding:clamp(.65rem,1.2vw,1rem);background:#030503}
.offrecord-gallery-media{position:relative;min-width:0;min-height:0;overflow:hidden;background:#020302;display:block}
.offrecord-gallery-media img,.offrecord-gallery-media video{position:absolute;inset:0;display:block;width:100%;height:100%;max-width:none;max-height:none;object-fit:contain;object-position:center;background:#020302;box-shadow:none}
.offrecord-gallery-media video[hidden],.offrecord-gallery-media img[hidden]{display:none}
.offrecord-gallery-arrow{align-self:center;width:clamp(2.4rem,3.2vw,3.4rem);height:clamp(4.5rem,8vh,6rem);border:1px solid rgba(229,190,100,.24);background:rgba(7,12,8,.80);color:#efd58d;font-size:2rem;cursor:pointer}
.offrecord-gallery-arrow:hover,.offrecord-gallery-arrow:focus-visible{border-color:#f5db94;outline:none;background:#17251b}
.offrecord-gallery-caption{padding:.75rem 1.4rem .7rem;text-align:center;border-top:1px solid rgba(229,190,100,.16);background:#0a100b}
.offrecord-gallery-caption small{display:block;color:#d9b35d;text-transform:uppercase;letter-spacing:.13em;font-size:.58rem}
.offrecord-gallery-caption h3{margin:.35rem 0 .2rem;font-family:Georgia,serif;font-size:clamp(1.25rem,2.4vw,2rem);color:#f3e8cf}
.offrecord-gallery-caption p{max-width:780px;margin:0 auto;color:#9eaaa1;font-size:.78rem;line-height:1.5}
.offrecord-gallery-thumbs{display:flex;gap:.5rem;overflow-x:auto;padding:.65rem 1rem .85rem;border-top:1px solid rgba(229,190,100,.13);background:#070a07;scrollbar-color:#8f6c2d #080b08}
.offrecord-gallery-thumb{position:relative;flex:0 0 auto;width:84px;height:58px;padding:0;border:1px solid rgba(229,190,100,.18);background:#060806;opacity:.48;cursor:pointer}
.offrecord-gallery-thumb img{width:100%;height:100%;object-fit:cover}
.offrecord-gallery-thumb.active{opacity:1;border-color:#efd58d;transform:translateY(-3px);box-shadow:0 0 .6rem rgba(221,171,68,.25)}
.offrecord-gallery-thumb[data-video="true"]::after{content:"▶";position:absolute;right:.22rem;bottom:.18rem;display:grid;place-items:center;width:1.1rem;height:1.1rem;border-radius:50%;background:rgba(5,7,4,.84);color:#efd58d;font-size:.52rem;pointer-events:none}

/* Atomic scene handoff. */
.bedroom-backdrop,.offrecord-backdrop,.bedroom-scene-shell,.offrecord-scene-shell{transition:none!important}
body.scene-switching .bedroom-scene-shell,body.scene-switching .offrecord-scene-shell{pointer-events:none!important;transition:none!important;will-change:opacity,visibility}
body.scene-switching .bedroom-backdrop,body.scene-switching .offrecord-backdrop{transition:none!important;will-change:opacity}
body.scene-switching .music-player{opacity:0!important;pointer-events:none!important;transition:opacity .14s ease!important}

@media(max-width:760px){
  .offrecord-return{left:1.4%;top:2%}
  .offrecord-dialog{height:min(96vh,1000px)}
  .offrecord-gallery-stage{grid-template-columns:2.3rem minmax(0,1fr) 2.3rem;gap:.32rem;padding:.45rem}
  .offrecord-gallery-arrow{width:2.3rem;height:4rem;font-size:1.45rem}
  .offrecord-gallery-thumb{width:68px;height:46px}
}
@media(max-width:700px) and (orientation:portrait){
  body.scene-offrecord .rotate-note{display:block}
}
@media(prefers-reduced-motion:reduce){
  .living-picnic-video{display:none!important}
  .offrecord-album-glow{transition:none!important}
}