/* LOOK-AROUND MODE: desktop and a mini version for phones */
html.look3d,html.look3d body{overflow:hidden;height:100%;overscroll-behavior:none}
html.look3d #scroller{position:fixed;inset:0;display:block;width:100%;height:100%;overflow:visible;z-index:1;
  scroll-snap-type:none;transform-style:preserve-3d;will-change:transform;pointer-events:none}
html.look3d .panel{position:absolute;left:50%;top:50%;flex:none;width:100vw;height:100vh;min-height:0;
  scroll-snap-align:none;backface-visibility:hidden;-webkit-backface-visibility:hidden;
  pointer-events:auto;overflow:visible}
html.look3d .chrome-explore{display:none}
html.look3d body{cursor:grab}
html.look3d body.la-drag{cursor:grabbing;user-select:none}

#la-bg{position:fixed;inset:-12%;z-index:0;pointer-events:none;
  background:radial-gradient(rgba(237,233,224,.12) 1px,transparent 1.6px) 0 0/38px 38px,
  radial-gradient(ellipse at center,#14180f 0%,var(--bg) 70%)}

.la-hint{position:fixed;z-index:210;display:flex;align-items:center;gap:10px;font-family:var(--fb);
  font-size:.58rem;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);cursor:pointer;
  background:rgba(9,9,9,.55);backdrop-filter:blur(6px);border:1px solid rgba(237,233,224,.12);
  border-radius:100px;padding:10px 16px;transition:color .3s,border-color .3s,opacity .4s}
.la-hint:hover{color:var(--accent);border-color:var(--accent)}
.la-hint.off{opacity:0;pointer-events:none}
.la-ar{font-size:.9rem;letter-spacing:0}

/* ---------- DESKTOP ---------- */
@media(min-width:901px){
  html.look3d{touch-action:none}
  html.look3d .work-reel{touch-action:pan-x}
  .la-u{top:28px;left:50%;transform:translateX(-50%)}
  .la-d{bottom:28px;left:50%;transform:translateX(-50%)}
  .la-l{left:72px;bottom:88px}
  .la-r{right:72px;bottom:88px}

  html.look3d #p-home::before{background:radial-gradient(ellipse 45% 60% at 50% 50%,rgba(151,172,135,.1) 0%,transparent 70%)}
  html.look3d .home-img-wrap{right:auto;left:50%;height:80vh;
    transform:translateX(-50%) translate(calc(var(--mx,0)*-14px),calc(var(--my,0)*-8px));transition:transform .25s ease-out}
  html.look3d #p-home .panel-inner{display:grid;grid-template-columns:1fr minmax(260px,34vw) 1fr;
    grid-template-rows:auto auto auto;align-content:center;align-items:end;column-gap:2vw;padding:0 8vw}
  html.look3d #p-home .home-badge{grid-column:1/-1;grid-row:1;justify-content:center;margin-bottom:2.4rem}
  html.look3d #p-home .giant{grid-column:1;grid-row:2;font-size:clamp(2.2rem,4.6vw,5.6rem);
    transform:translate(calc(var(--mx,0)*10px),calc(var(--my,0)*6px));transition:transform .25s ease-out}
  html.look3d #p-home .tagline{grid-column:3;grid-row:2;margin-top:0;max-width:340px;justify-self:end}
  html.look3d #p-home .home-actions{grid-column:3;grid-row:3;margin-top:1.6rem;justify-self:end}
}

/* ---------- PHONE (mini version) ---------- */
@media(max-width:900px){
  html.look3d{touch-action:pan-y}
  html.look3d .panel{height:100vh;height:100dvh}
  /* each section scrolls inside its own card; swipe sideways (or pull past the edge) to look around */
  html.look3d .panel-inner,html.look3d .work-outer{position:relative;inset:auto;width:100%;height:100%;
    overflow-y:auto;overflow-x:hidden;touch-action:pan-y;overscroll-behavior:contain;
    justify-content:flex-start;padding:84px 7vw 104px!important;opacity:1;transform:none;scrollbar-width:none}
  html.look3d .panel-inner::-webkit-scrollbar,html.look3d .work-outer::-webkit-scrollbar{display:none}
  html.look3d .work-reel{touch-action:pan-x pan-y}
  html.look3d .chrome-counter,html.look3d .chrome-dots{display:none}

  .la-hint{padding:9px 13px;gap:6px;font-size:.5rem;letter-spacing:.16em}
  .la-u{top:calc(18px + env(safe-area-inset-top,0px));left:50%;transform:translateX(-50%)}
  .la-d{bottom:calc(16px + env(safe-area-inset-bottom,0px));left:50%;transform:translateX(-50%)}
  .la-l{left:12px;bottom:calc(16px + env(safe-area-inset-bottom,0px))}
  .la-r{right:12px;bottom:calc(16px + env(safe-area-inset-bottom,0px))}

  /* HOME: photo centred, text below */
  html.look3d #p-home::before{background:radial-gradient(ellipse 80% 40% at 50% 30%,rgba(151,172,135,.12) 0%,transparent 70%)}
  html.look3d .home-img-wrap{right:auto;left:50%;top:9vh;bottom:auto;height:36vh;
    transform:translateX(-50%);border-width:3px}
  html.look3d .home-img{opacity:1;right:unset;height:100%}
  html.look3d .name-sticker{font-size:.95rem;right:-14vw;top:-4%}
  html.look3d #p-home .panel-inner{justify-content:flex-end;align-items:center;text-align:center;overflow:visible}
  html.look3d #p-home .giant{font-size:clamp(2rem,9.5vw,3.2rem)}
  html.look3d #p-home .tagline{font-size:.78rem;line-height:1.6;margin-top:.9rem;max-width:34ch}
  html.look3d #p-home .home-badge{justify-content:center;font-size:.5rem;margin-bottom:1rem;text-align:center}
  html.look3d #p-home .home-actions{margin-top:1.2rem;justify-content:center;gap:1.4rem}
}