/* ==========================================================================
   Home · office scene with hotspot navigation
   ========================================================================== */
:root { --img-ratio: 1.8484; }          /* img-office is 2048 x 1108 */
html, body { height: 100%; }
body { overflow: hidden; }

/* ---------- Header intro: logo + contact drop in after the room lights up ---------- */
.page-home .logo {
  opacity: 0; transform: translateY(-12px);
  animation: drop .8s var(--ease) 2.1s forwards;
}
.page-home .contact {
  opacity: 0; transform: translateY(-12px);
  animation: drop .8s var(--ease) 2.2s forwards;
}
@media (hover: hover) {
  .page-home .logo.in:hover { transform: rotate(-8deg) scale(1.06); box-shadow: 0 8px 32px -8px rgba(46,207,168,.6); }
}

/* ---------- Viewport + scene ----------
   The scene keeps the image's aspect ratio and is sized to "cover" the viewport,
   so hotspot percentages always land on the same objects in the photo. */
.viewport {
  position: fixed; inset: 0;
  overflow: hidden;
}
.scene {
  position: absolute; left: 50%; top: 50%;
  width:  max(100vw, calc(100dvh * var(--img-ratio)));
  height: max(100dvh, calc(100vw / var(--img-ratio)));
  transform: translate(-50%, -50%);
  overflow: hidden;
}
.scene-img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  display: block; object-fit: cover; user-select: none; -webkit-user-drag: none;
  opacity: 0;
  filter: brightness(.18) saturate(.6) blur(8px);
  transform: scale(1.12);
}
.is-ready .scene-img {
  animation: reveal 2.6s var(--ease) forwards;
}

/* ---------- Lamp glows (lights click on one by one) ---------- */
.glow {
  --breathe-min: .82;
  position: absolute; top: 16.5%;
  width: 18%; aspect-ratio: 1 / 1.25;
  transform: translate(-50%, 0);
  background: radial-gradient(ellipse 50% 60% at 50% 8%, rgba(255,214,150,.5), rgba(255,190,120,.16) 45%, transparent 72%);
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 9%);
          mask-image: linear-gradient(180deg, transparent 0, #000 9%);
  mix-blend-mode: screen;
  pointer-events: none;
  opacity: 0;
}
.glow::before {           /* bright bulb spot under the shade */
  content: ""; position: absolute; left: 50%; top: 8%;
  width: 22%; aspect-ratio: 2.6 / 1; transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255,240,210,.95), rgba(255,210,150,.4) 60%, transparent);
  filter: blur(2px);
}
.is-ready .glow { animation: lampOn 1.1s steps(1, end) forwards, breathe 5s ease-in-out infinite; }
.glow:nth-of-type(1) { left: 38.6%; animation-delay: .5s, 2.5s !important; }
.glow:nth-of-type(2) { left: 46.2%; animation-delay: .75s, 3.1s !important; }
.glow:nth-of-type(3) { left: 53.8%; animation-delay: 1s, 2.8s !important; }
.glow:nth-of-type(4) { left: 61.4%; animation-delay: 1.25s, 3.4s !important; }

/* ---------- Spotlight dim (follows hovered hotspot) ---------- */
.spot {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(circle at var(--hx, 50%) var(--hy, 50%), transparent 0, transparent 9%, rgba(10,6,4,.55) 26%);
  opacity: 0;
  transition: opacity .6s var(--ease);
}
.scene.is-focus .spot { opacity: 1; }

/* Soft vignette for depth */
.vignette {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 75% 70% at 50% 45%, transparent 55%, rgba(12,8,6,.55) 100%),
    linear-gradient(180deg, rgba(12,8,6,.35), transparent 14%);
}

/* ---------- Hotspot buttons ---------- */
.hotspot {
  position: absolute;
  left: var(--x); top: var(--y);
  transform: translate(-50%, -50%);
  z-index: 5;
}
.cat-btn {
  font-family: inherit;
  color: var(--bg); background: var(--fg); border: 0; cursor: pointer;
  padding: calc(12px + var(--cap-shift)) 24px calc(12px - var(--cap-shift)); border-radius: var(--radius-pill);
  position: relative; white-space: nowrap;
  display: inline-flex; align-items: center; gap: 8px;
  text-decoration: none;
  box-shadow: 0 8px 32px -8px rgba(0,0,0,.65);
  opacity: 0; transform: translateY(16px) scale(.85);
  transition: transform .45s var(--ease), background .35s var(--ease), color .35s var(--ease), box-shadow .45s var(--ease);
}
.is-ready .cat-btn { animation: pop .8s var(--ease) forwards; animation-delay: calc(2s + var(--i) * 140ms); }
/* once the intro pop finishes, hand transform back to hover/active */
.is-ready .cat-btn.in, .page-home .logo.in, .page-home .contact.in { opacity: 1; transform: none; animation: none; }
.cat-btn .arrow {
  display: inline-block; width: 0; overflow: hidden; margin-left: -8px;
  opacity: 0;
  transition: width .4s var(--ease), margin .4s var(--ease), opacity .3s var(--ease);
}
.cat-btn .arrow svg { width: 16px; height: 16px; display: block; }
/* The button's padding nudges the label down by --cap-shift so the capitals look centred;
   lift the arrow back by the same amount so it sits on the button's true centre line */
.cat-btn .arrow { position: relative; top: calc(-1 * var(--cap-shift)); }
/* pulsing ring to hint interactivity */
.cat-btn::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  border: 1.5px solid rgba(255,255,255,.8);
  opacity: 0; pointer-events: none;
}
.is-ready .cat-btn::after { animation: ring 3.2s var(--ease) infinite; animation-delay: calc(3.4s + var(--i) * .8s); }

@media (hover: hover) {
  .is-ready .cat-btn.in:hover {
    background: var(--orange); color: var(--bg);   /* #1D1B1A on #FF7336 = 6.3:1, passes WCAG AA */
    transform: translateY(-4px) scale(1.04);
    box-shadow: 0 16px 40px -12px rgba(255,115,54,.7);
  }
  .cat-btn:hover .arrow { width: 16px; margin-left: 0; opacity: 1; }
  .cat-btn:hover::after { animation: none; opacity: 0; }
}
.is-ready .cat-btn.in:active { transform: scale(.96); }
.cat-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }

/* ---------- Page transition: room pushes in behind the curtain ---------- */
.is-leaving .scene { transform: translate(-50%, -50%) scale(1.15); transition: transform .7s var(--ease); }

/* ---------- Mobile menu (button + bottom sheet) ---------- */
.menu-btn, .sheet, .backdrop { display: none; }
.menu-btn {
  position: fixed; right: var(--gutter); bottom: calc(var(--gutter) + env(safe-area-inset-bottom));
  z-index: 26;
  padding-left: 16px;                                    /* .btn-solid component; icon side is tighter */
  box-shadow: 0 12px 32px -8px rgba(0,0,0,.7);
  opacity: 0; transform: translateY(16px) scale(.85);
  transition: transform .35s var(--ease), background .35s var(--ease);
  -webkit-tap-highlight-color: transparent;
}
.is-ready .menu-btn { animation: pop .8s var(--ease) 2s forwards; }
.menu-btn.in { opacity: 1; transform: none; animation: none; }
.menu-btn.in:active { transform: scale(.95); }
.menu-btn .burger { position: relative; width: 16px; height: 10px; }   /* icon drawing: scale-ok */
.menu-btn .burger i {
  position: absolute; left: 0; right: 0; height: 1.6px; border-radius: 2px; background: currentColor;   /* scale-ok */
  transition: transform .4s var(--ease), top .4s var(--ease);
}
.menu-btn .burger i:first-child { top: 0; }
.menu-btn .burger i:last-child  { top: 8.4px; }   /* scale-ok */
.menu-open .menu-btn .burger i:first-child { top: 4.2px; transform: rotate(45deg); }   /* scale-ok */
.menu-open .menu-btn .burger i:last-child  { top: 4.2px; transform: rotate(-45deg); }   /* scale-ok */
.menu-btn .words { position: relative; display: grid; }
.menu-btn .words span { grid-area: 1 / 1; transition: opacity .3s var(--ease), transform .4s var(--ease); }
.menu-btn .w-close { opacity: 0; transform: translateY(8px); }
.menu-open .menu-btn .w-menu  { opacity: 0; transform: translateY(-8px); }
.menu-open .menu-btn .w-close { opacity: 1; transform: none; }

.backdrop {
  position: fixed; inset: 0; z-index: 24;
  background: rgba(10,6,4,.5);
  opacity: 0; pointer-events: none;
  transition: opacity .45s var(--ease);
}
.menu-open .backdrop { opacity: 1; pointer-events: auto; }

/* Full-screen menu: frosted glass over the room, one glass tile per page. The tiles
   share the height, so adding a page just makes every tile shorter (thumbnails
   48–112px); past the 72px minimum the list scrolls. */
.sheet {
  position: fixed; inset: 0; z-index: 25;
  flex-direction: column;
  padding: calc(24px + env(safe-area-inset-top)) 16px calc(96px + env(safe-area-inset-bottom));
  background: rgba(29,27,26,.72);
  backdrop-filter: blur(28px) saturate(1.3); -webkit-backdrop-filter: blur(28px) saturate(1.3);
  transform: translateY(105%);
  transition: transform .55s var(--ease), visibility 0s linear .55s;
  visibility: hidden;
  touch-action: none;
}
.menu-open .sheet { transform: translateY(var(--drag, 0px)); visibility: visible; transition: transform .55s var(--ease), visibility 0s; }
.sheet.dragging { transition: none !important; }
.site-header { transition: opacity .3s var(--ease); }
.menu-open .site-header { opacity: 0; }                 /* logo and Contact would show through the glass */
.sheet-list {
  list-style: none; display: flex; flex-direction: column; gap: 8px;
  flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none;
}
.sheet-list::-webkit-scrollbar { display: none; }
.sheet-list.scrolls { touch-action: pan-y; }            /* set by home.js only when the list overflows */
.sheet-list li { flex: 1 1 0; min-height: 72px; max-height: 176px; display: flex; container-type: size; }
.sheet-link {
  flex: 1; min-width: 0;
  display: flex; align-items: center; gap: 20px;
  padding: 0 16px 0 12px; border-radius: var(--radius-lg);
  background: var(--glass); border: 1px solid var(--line-soft);
  color: var(--fg); text-decoration: none;          /* type: .t-nav role in site.css */
  opacity: 0; transform: translateY(16px);
  transition: opacity .4s var(--ease), transform .5s var(--ease), background .25s var(--ease), border-color .25s var(--ease);
  -webkit-tap-highlight-color: transparent;
}
.menu-open .sheet-link { opacity: 1; transform: none; transition-delay: calc(.12s + var(--i) * 60ms); }
.sheet-link:active { background: var(--orange); border-color: var(--orange); }
.sheet-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.sheet:focus { outline: none; }                       /* focus parked on the menu itself after a tap */
.sheet-link .thumb {
  /* square crop of the room photo; --bx/--by are the crop for a 72×56 thumb, rescaled to --s */
  --s: clamp(48px, calc(100cqh - 26px), 112px);
  flex: none; align-self: center; width: var(--s); height: var(--s); border-radius: var(--radius-md);
  background: url("../../images/img-office.webp") no-repeat;
  background-size: calc(504px * var(--s) / 56px) auto;   /* photo crop: scale-ok */
  background-position: calc((var(--bx) - 36px) * var(--s) / 56px + var(--s) / 2) calc((var(--by) - 28px) * var(--s) / 56px + var(--s) / 2);
  box-shadow: inset 0 0 0 1px var(--line-soft);
}
.sheet-link .txt { flex: 1; min-width: 0; position: relative; top: var(--cap-shift); }
.sheet-link svg {
  flex: none; width: 40px; height: 40px; padding: 11px; box-sizing: border-box;
  border-radius: 50%; border: 1px solid var(--line); transition: border-color .25s var(--ease);
}
.sheet-link:active svg { border-color: var(--fg); }

/* ---------- Mobile: swipe to pan across the room ---------- */
.hint {
  position: fixed; left: var(--gutter); bottom: calc(var(--gutter) + 4px + env(safe-area-inset-bottom));
  z-index: 15; display: none;
  padding: calc(8px + var(--cap-shift)) 16px calc(8px - var(--cap-shift)); border-radius: var(--radius-pill);
  background: rgba(29,27,26,.6); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border: 1px solid var(--line-soft);
  align-items: center; gap: 8px;
  pointer-events: none;
  opacity: 0; transition: opacity .5s var(--ease);
}
.hint svg { width: 16px; height: 16px; animation: nudge 1.6s ease-in-out infinite; }

/* ---------- Footer placement: bottom corners on desktop; inside the menu sheet on mobile ---------- */
.site-foot--page {
  position: fixed; left: var(--gutter); right: var(--gutter); bottom: calc(var(--gutter) - 12px);
  z-index: 15; pointer-events: none;
  opacity: 0; animation: fadeIn .8s var(--ease) 2.4s forwards;
}
.site-foot--page > * { pointer-events: auto; }
.sheet .site-foot { display: none; }

@media (max-width: 768px), (max-aspect-ratio: 1/1) {
  /* Portrait tablets pan the room too, so they get the compact header and mobile gutter */
  :root { --gutter: 16px; }
  .logo { width: 40px; height: 40px; }
  .contact { height: 40px; padding-left: 16px; padding-right: 16px; }
  .viewport {
    overflow-x: auto; overflow-y: hidden;
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
  }
  .viewport::-webkit-scrollbar { display: none; }
  .scene {
    position: relative; left: 0; top: 0;
    width: calc(100dvh * var(--img-ratio)); height: 100dvh;
    min-width: 100vw;
    transform: none;
  }
  .is-leaving .scene { transform: scale(1.1); }
  .hint { display: inline-flex; }
  .hint.show { opacity: 1; }
  .menu-open .hint { opacity: 0; }
  .menu-btn { display: inline-flex; }
  .backdrop { display: block; }
  .sheet { display: flex; }

  /* Room buttons shrink to glowing dots (44px tap target, label kept for screen readers) */
  .cat-btn {
    width: 48px; height: 48px; padding: 0;
    font-size: 0; letter-spacing: 0; gap: 0;
    background: transparent; box-shadow: none;
    justify-content: center;
    -webkit-tap-highlight-color: transparent;
  }
  .cat-btn .arrow { display: none; }
  .cat-btn::before {
    content: ""; width: 16px; height: 16px; border-radius: 50%;
    background: var(--fg);
    box-shadow: 0 0 0 4px rgba(255,255,255,.22), 0 0 16px 4px rgba(255,214,150,.55);
    transition: transform .3s var(--ease), background .3s var(--ease);
  }
  .cat-btn::after { inset: 16px; border-radius: 50%; border-width: 1.5px; }
  .is-ready .cat-btn::after { animation-name: ringDot; }
  .is-ready .cat-btn.in:active { transform: none; }
  .cat-btn:active::before { transform: scale(1.3); background: var(--orange); }

  /* Tapped dot expands back into the original labelled button; tap again to go */
  .hotspot.open { z-index: 8; }
  .hotspot.open .cat-btn, .cat-btn:focus-visible {
    width: auto; height: 40px; padding: calc(var(--cap-shift) * 2) 16px 0 24px;
    font-size: var(--fs-base); letter-spacing: var(--tracking-label); gap: 8px;
    background: var(--fg);
    box-shadow: 0 16px 32px -8px rgba(0,0,0,.75), 0 0 0 8px rgba(255,255,255,.14);
  }
  .is-ready .hotspot.open .cat-btn.in { animation: expand .45s var(--ease); }
  .hotspot.open .cat-btn::before, .cat-btn:focus-visible::before { display: none; }
  .hotspot.open .cat-btn::after, .cat-btn:focus-visible::after { display: none; }
  .hotspot.open .cat-btn .arrow, .cat-btn:focus-visible .arrow { display: inline-block; width: 16px; margin-left: 0; opacity: 1; }
  .hotspot.open .cat-btn:active { background: var(--orange); }

  .site-foot--page { display: none; }
  .sheet .site-foot {
    display: flex; margin: 24px 4px 0; padding-top: 16px;
    border-top: 1px solid var(--line-soft);
    opacity: 0; transition: opacity .4s var(--ease);
  }
  .menu-open .sheet .site-foot { opacity: 1; transition-delay: .4s; }
}

/* ---------- Keyframes (home only) ---------- */
@keyframes reveal {
  0%   { opacity: 0; filter: brightness(.12) saturate(.5) blur(8px); transform: scale(1.12); }
  30%  { opacity: 1; filter: brightness(.22) saturate(.6) blur(3px); }
  60%  { filter: brightness(.55) saturate(.85) blur(0); }
  100% { opacity: 1; filter: brightness(1) saturate(1) blur(0); transform: scale(1); }
}
@keyframes ring {
  0%   { opacity: .8; transform: scale(1); }
  40%  { opacity: 0; transform: scale(1.35, 1.7); }
  100% { opacity: 0; transform: scale(1.35, 1.7); }
}
@keyframes ringDot {
  0%   { opacity: .9; transform: scale(1); }
  45%  { opacity: 0; transform: scale(2.4); }
  100% { opacity: 0; transform: scale(2.4); }
}
@keyframes expand {
  0%   { opacity: .4; transform: scale(.55); }
  60%  { opacity: 1; transform: scale(1.05); }
  100% { opacity: 1; transform: none; }
}
@keyframes nudge { 0%,100% { transform: translateX(-3px); } 50% { transform: translateX(3px); } }