/* ============================================================
   fx.css — the "dimensional" layer for House of Aria
   Loads AFTER base.css + the brand layer, so it wins on equal
   specificity and inherits each brand's token contract:
     --bg --paper --mute --line --accent --accent-2 --body
   Adds: tactile 3D buttons · pointer-tilt cards · sound dock
   popover · mobile dropdown menu.  Zero dependencies.
   ============================================================ */

/* ---------------------------------------------------------------
   1 · TACTILE 3D BUTTONS  (physical "key" press)
   --------------------------------------------------------------- */
.btn{
  position:relative;border-radius:11px;isolation:isolate;
  transition:transform .16s cubic-bezier(.2,.7,.2,1),box-shadow .16s,
             filter .16s,background .25s,color .25s,border-color .25s;
  will-change:transform;
}
.btn::before{                              /* lit top edge */
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:-1;
  background:linear-gradient(180deg,rgba(255,255,255,.18),rgba(255,255,255,0) 48%);
  opacity:0;transition:opacity .2s;
}
.btn:hover::before{opacity:1}

.btn-solid{
  background:var(--accent);color:#fff;border-color:transparent;
  box-shadow:0 4px 0 color-mix(in srgb,var(--accent) 60%,#000),
             0 12px 24px -8px color-mix(in srgb,var(--accent) 55%,transparent),
             inset 0 1px 0 rgba(255,255,255,.20);
}
.btn-solid:hover{
  background:var(--accent);filter:brightness(1.07);transform:translateY(-2px);
  box-shadow:0 6px 0 color-mix(in srgb,var(--accent) 58%,#000),
             0 18px 32px -10px color-mix(in srgb,var(--accent) 58%,transparent),
             inset 0 1px 0 rgba(255,255,255,.24);
}
.btn-solid:active{
  transform:translateY(2px);
  box-shadow:0 1px 0 color-mix(in srgb,var(--accent) 60%,#000),
             0 6px 12px -6px color-mix(in srgb,var(--accent) 45%,transparent),
             inset 0 2px 7px rgba(0,0,0,.30);
}

.btn-ghost{
  border-color:var(--line);color:var(--mute);
  background:color-mix(in srgb,var(--paper) 3%,transparent);
  box-shadow:0 3px 0 rgba(0,0,0,.30),0 12px 22px -12px rgba(0,0,0,.55),
             inset 0 1px 0 rgba(255,255,255,.06);
}
.btn-ghost:hover{
  color:var(--paper);border-color:var(--accent-2);transform:translateY(-2px);
  box-shadow:0 5px 0 rgba(0,0,0,.32),0 18px 28px -12px rgba(0,0,0,.6),
             inset 0 1px 0 rgba(255,255,255,.10);
}
.btn-ghost:active{transform:translateY(2px);box-shadow:0 1px 0 rgba(0,0,0,.32),inset 0 2px 7px rgba(0,0,0,.3)}

/* ---------------------------------------------------------------
   2 · CARD DEPTH + POINTER TILT
   .tilt + --rx/--ry/glare vars are driven by experience.js
   --------------------------------------------------------------- */
.cre,.pillar,.suite{
  transition:transform .25s cubic-bezier(.2,.7,.2,1),box-shadow .3s,background .3s;
  transform-style:preserve-3d;
}
.tilt{transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateZ(0)}
.cre:hover,.pillar:hover,.suite:hover{box-shadow:0 34px 66px -34px rgba(0,0,0,.72);z-index:3}

.tilt-glare{
  position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;z-index:4;
  background:radial-gradient(440px circle at var(--gx,50%) var(--gy,0%),rgba(255,255,255,.09),transparent 60%);
  transition:opacity .35s;mix-blend-mode:screen;
}
.cre:hover .tilt-glare,.pillar:hover .tilt-glare,.suite:hover .tilt-glare{opacity:1}

/* tighter rows just glide + cast a soft edge */
.cur-row{transition:transform .22s cubic-bezier(.2,.7,.2,1),box-shadow .3s,background .3s}
.cur-row:hover{transform:translateX(5px);box-shadow:-12px 0 32px -22px rgba(0,0,0,.7)}

/* ---------------------------------------------------------------
   3 · SOUND DOCK  (floating control + popover/dropdown)
   --------------------------------------------------------------- */
.snd-dock{
  position:fixed;right:clamp(16px,3vw,28px);bottom:clamp(16px,3vw,28px);z-index:95;
  display:flex;flex-direction:column;align-items:flex-end;gap:12px;font-family:var(--body);
}
.snd-btn{
  width:50px;height:50px;border-radius:50%;cursor:pointer;color:var(--paper);
  border:1px solid var(--line);background:color-mix(in srgb,var(--bg) 68%,transparent);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  display:grid;place-items:center;
  box-shadow:0 4px 0 rgba(0,0,0,.35),0 16px 28px -12px rgba(0,0,0,.6);
  transition:transform .16s,box-shadow .16s,border-color .25s;
}
.snd-btn:hover{border-color:var(--accent-2);transform:translateY(-2px);
  box-shadow:0 6px 0 rgba(0,0,0,.35),0 22px 32px -14px rgba(0,0,0,.6)}
.snd-btn:active{transform:translateY(2px);box-shadow:0 1px 0 rgba(0,0,0,.35),inset 0 2px 6px rgba(0,0,0,.3)}

.snd-eq{display:flex;gap:3px;align-items:flex-end;height:16px}
.snd-eq i{width:3px;height:4px;background:var(--accent-2);border-radius:2px;transform-origin:bottom}
.snd-dock.playing .snd-eq i{animation:eqPulse 1s ease-in-out infinite}
.snd-eq i:nth-child(2){animation-delay:.18s}
.snd-eq i:nth-child(3){animation-delay:.42s}
.snd-eq i:nth-child(4){animation-delay:.1s}
@keyframes eqPulse{0%,100%{height:4px}50%{height:15px}}
.snd-dock.muted .snd-eq{opacity:.4}
.snd-dock.muted .snd-eq i{background:var(--mute)}

.snd-pop{
  width:236px;padding:18px;border-radius:15px;
  border:1px solid var(--line);background:color-mix(in srgb,var(--bg) 88%,transparent);
  -webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);
  box-shadow:0 26px 64px -22px rgba(0,0,0,.72);transform-origin:bottom right;
  transform:translateY(10px) scale(.93);opacity:0;pointer-events:none;visibility:hidden;
  transition:transform .24s cubic-bezier(.2,.7,.2,1),opacity .24s,visibility .24s;
}
.snd-dock.open .snd-pop{transform:none;opacity:1;pointer-events:auto;visibility:visible}
.snd-pop .lab{font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--mute);margin-bottom:15px;line-height:1.6}
.snd-pop .lab b{color:var(--accent-2);font-weight:500}
.snd-row{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:15px}
.snd-row .k{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--mute)}
.snd-toggle{
  appearance:none;cursor:pointer;border:1px solid var(--line);background:transparent;color:var(--paper);
  border-radius:9px;padding:9px 16px;font-family:var(--body);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  box-shadow:0 3px 0 rgba(0,0,0,.3);transition:transform .14s,box-shadow .14s,border-color .2s,background .2s;
}
.snd-toggle[aria-pressed="true"]{background:var(--accent);border-color:transparent;color:#fff;
  box-shadow:0 3px 0 color-mix(in srgb,var(--accent) 60%,#000)}
.snd-toggle:active{transform:translateY(2px);box-shadow:none}
.snd-vol{width:100%;-webkit-appearance:none;appearance:none;height:4px;border-radius:3px;background:var(--line);outline:none}
.snd-vol::-webkit-slider-thumb{-webkit-appearance:none;width:15px;height:15px;border-radius:50%;
  background:var(--accent-2);cursor:pointer;box-shadow:0 1px 5px rgba(0,0,0,.5)}
.snd-vol::-moz-range-thumb{width:15px;height:15px;border:none;border-radius:50%;background:var(--accent-2);cursor:pointer}

/* ---------------------------------------------------------------
   4 · MOBILE DROPDOWN MENU  (button injected by experience.js)
   --------------------------------------------------------------- */
.nav-toggle{display:none;border:none;background:none}
@media(max-width:720px){
  .nav-toggle{
    display:inline-grid;place-items:center;width:42px;height:42px;border-radius:11px;cursor:pointer;
    border:1px solid var(--line);background:color-mix(in srgb,var(--bg) 60%,transparent);color:var(--paper);
    box-shadow:0 3px 0 rgba(0,0,0,.3);transition:transform .14s,box-shadow .14s;
  }
  .nav-toggle:active{transform:translateY(2px);box-shadow:none}
  .nav-toggle span{display:block;width:18px;height:1.7px;background:currentColor;border-radius:2px;
    transition:transform .3s cubic-bezier(.2,.7,.2,1),opacity .25s}
  .nav-toggle span+span{margin-top:5px}
  .nav.nav-open .nav-toggle span:nth-child(1){transform:translateY(6.7px) rotate(45deg)}
  .nav.nav-open .nav-toggle span:nth-child(2){opacity:0}
  .nav.nav-open .nav-toggle span:nth-child(3){transform:translateY(-6.7px) rotate(-45deg)}

  .nav-links{
    display:flex;flex-direction:column;gap:0;
    position:absolute;top:100%;left:0;right:0;
    padding:6px clamp(20px,5vw,64px) 18px;
    background:color-mix(in srgb,var(--bg) 93%,transparent);
    -webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);
    border-bottom:1px solid var(--line);
    transform-origin:top;transform:perspective(900px) rotateX(-12deg) translateY(-10px);
    opacity:0;visibility:hidden;pointer-events:none;
    transition:transform .32s cubic-bezier(.2,.7,.2,1),opacity .3s,visibility .3s;
  }
  .nav.nav-open .nav-links{transform:none;opacity:1;visibility:visible;pointer-events:auto}
  .nav-links a{padding:14px 2px;font-size:12px;border-bottom:1px solid var(--line);width:100%}
  .nav-links a:last-child{border-bottom:none}
  .home-tab{padding-top:16px}
  .snd-dock{bottom:max(16px,env(safe-area-inset-bottom))}
}

/* ---------------------------------------------------------------
   5 · MOTION SAFETY
   --------------------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  .btn,.cre,.pillar,.suite,.cur-row,.snd-btn,.snd-pop,.snd-toggle,
  .nav-links,.nav-toggle span{transition:none!important}
  .tilt{transform:none!important}
  .snd-dock.playing .snd-eq i{animation:none;height:9px}
}