/* ==========================================================================
   Between Us: shared motion layer (loaded after style.css on every page)
   ========================================================================== */

/* ---------- the 3D room header (home = full height, other pages = shorter) ---------- */
.room-hero{
  --d: 50vmin; --p: 50vmin; --inset: 25%; --px: 50%; --py: 50%;
  position:relative; height:clamp(420px, 64svh, 720px); overflow:hidden; background:#000;
}
.room-hero.full{height:calc(100svh - 61px); min-height:520px;}
.room-hero .scene{position:absolute; inset:0; perspective:var(--p); perspective-origin:var(--px) var(--py); transition:perspective-origin .6s ease-out;}
.room-hero .box{position:absolute; inset:0; transform-style:preserve-3d;}
.room-hero .wall{
  position:absolute; display:flex; align-items:center; justify-content:center;
  color:#fff; font-family:"Anton", Impact, "Arial Narrow", sans-serif; font-weight:400;
  line-height:.8; white-space:nowrap; letter-spacing:-.01em; user-select:none;
  animation: fxWallIn 1.1s cubic-bezier(.2,.8,.2,1) both;
}
.room-hero .wall span{display:block; font-size:calc(var(--d) * .8);}  /* fx.js fits each word to its wall */
.room-hero .wall.top   {left:0; right:0; top:0;    height:var(--d); transform-origin:top;    transform:rotateX(-90deg); animation-delay:.05s;}
.room-hero .wall.bottom{left:0; right:0; bottom:0; height:var(--d); transform-origin:bottom; transform:rotateX(90deg);  animation-delay:.35s;}
.room-hero .wall.left  {top:0; bottom:0; left:0;   width:var(--d);  transform-origin:left;   transform:rotateY(90deg);  animation-delay:.15s;}
.room-hero .wall.right {top:0; bottom:0; right:0;  width:var(--d);  transform-origin:right;  transform:rotateY(-90deg); animation-delay:.25s;}
.room-hero .wall.left span{transform:scaleY(1.9);}
.room-hero .wall.right span{transform:scaleY(2.6);}
@keyframes fxWallIn{from{opacity:0; filter:blur(6px);} to{opacity:1; filter:blur(0);}}

.room-hero .center{
  position:absolute; left:var(--inset); right:var(--inset); top:var(--inset); bottom:var(--inset);
  display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; gap:clamp(10px,2.2vmin,22px);
  animation: fxWallIn 1.1s .5s cubic-bezier(.2,.8,.2,1) both; z-index:2;
}
.room-hero .center h1{font-size:clamp(22px,4.4vmin,46px); margin:0; line-height:1.08;}
.room-hero .center .subtitle{font-size:clamp(12.5px,1.9vmin,18px); margin:0; color:#bdbdbd;}
.room-hero .center .updated{margin:0; font-size:clamp(12px,1.6vmin,15px);}
.hero-line{
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","Segoe UI",sans-serif;
  font-weight:800; font-size:clamp(15px,3.3vmin,34px); letter-spacing:.02em; line-height:1.15; color:#fff; margin:0; text-transform:uppercase;
}
.cta-row{display:flex; gap:clamp(10px,1.8vmin,18px); flex-wrap:wrap; justify-content:center;}
.pill{
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","Segoe UI",sans-serif;
  font-weight:800; letter-spacing:.06em; font-size:clamp(11px,1.5vmin,15px);
  min-width:clamp(92px,13vmin,150px); padding:clamp(10px,1.5vmin,14px) clamp(18px,2.6vmin,28px);
  border-radius:999px; cursor:pointer; text-decoration:none; text-transform:uppercase; text-align:center;
  transition:transform .18s ease, background .2s ease, color .2s ease;
}
.pill.solid{background:#fff; color:#000; border:2px solid #fff;}
.pill.ghost{background:transparent; color:#fff; border:2px solid #fff;}
.pill:hover{transform:translateY(-2px) scale(1.03);}
.pill.ghost:hover{background:#fff; color:#000;}
.whoami{font-size:clamp(11px,1.5vmin,13px); color:#9a9a9a;}
.whoami button{background:none; border:none; color:#cfcfcf; text-decoration:underline; cursor:pointer; font:inherit; padding:0;}
.sr-only{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap;}

@media (max-aspect-ratio: 3/4){
  .room-hero{ --d: 34vw; --p: 68vw; --inset: 16.67%; }
  .room-hero .wall.left span{ transform:scaleY(2.6); }
  .room-hero .wall.right span{ transform:scaleY(3.6); }
}

/* ---------- word ribbon ---------- */
.marquee{overflow:hidden; border-top:1px solid #1f1f1f; border-bottom:1px solid #1f1f1f; padding:14px 0; background:#050505;}
.marquee .track{display:flex; width:max-content; animation:fxMarquee 28s linear infinite;}
.marquee span{font-family:"Anton",Impact,sans-serif; font-size:clamp(20px,3vw,34px); letter-spacing:.04em; color:#fff; white-space:nowrap; padding-right:.6em;}
.marquee span i{font-style:normal; color:#555; padding:0 .45em;}
.marquee:hover .track{animation-play-state:paused;}
@keyframes fxMarquee{to{transform:translateX(-50%);}}

/* ---------- scroll reveal (only when fx.js is running, so content never hides without JS) ---------- */
html.fx .reveal{opacity:0; transform:translateY(26px); filter:blur(4px); transition:opacity .7s cubic-bezier(.2,.8,.2,1), transform .7s cubic-bezier(.2,.8,.2,1), filter .7s ease;}
html.fx .reveal.in{opacity:1; transform:none; filter:none;}

/* ---------- tilt cards with a moving glare ---------- */
.tilt{transform-style:preserve-3d; transition:transform .25s ease, border-color .25s ease; position:relative; will-change:transform;}
.tilt::after{content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; opacity:0; transition:opacity .25s ease;
  background:radial-gradient(360px circle at var(--gx,50%) var(--gy,50%), rgba(255,255,255,.10), transparent 60%);}
.tilt:hover::after{opacity:1;}
.tilt:hover{border-color:#fff;}

/* ---------- voice wave (footer + anywhere with .wave) ---------- */
.wave{display:flex; align-items:center; justify-content:center; gap:4px; height:38px; margin:0 auto 18px;}
.wave b{display:block; width:4px; height:100%; border-radius:4px; background:#fff; opacity:.85; transform-origin:center; animation:fxWave 1.2s ease-in-out infinite;}
@keyframes fxWave{0%,100%{transform:scaleY(.18);} 50%{transform:scaleY(1);}}

/* ---------- nav polish ---------- */
.navlinks a:not(.cta){position:relative;}
.navlinks a:not(.cta)::after{content:""; position:absolute; left:0; right:0; bottom:-6px; height:2px; background:#fff; border-radius:2px; transform:scaleX(0); transform-origin:left; transition:transform .25s ease;}
.navlinks a:not(.cta):hover::after,.navlinks a.active::after{transform:scaleX(1);}
.navlinks a.cta{position:relative; overflow:hidden;}
.navlinks a.cta::before{content:""; position:absolute; top:0; bottom:0; width:40%; left:-60%; background:linear-gradient(90deg,transparent,rgba(0,0,0,.18),transparent); transform:skewX(-20deg); animation:fxShine 3.6s ease-in-out infinite;}
@keyframes fxShine{0%,60%{left:-60%;} 100%{left:130%;}}

/* ---------- strip under the home room ---------- */
.strip{display:flex; justify-content:center; gap:clamp(18px,5vw,64px); padding:34px 20px 6px; flex-wrap:wrap;}
.strip > div{text-align:center; max-width:220px; padding:18px; border-radius:22px; border:2px solid transparent;}
.strip strong{display:block; font-family:"Anton",Impact,sans-serif; font-weight:400; font-size:26px; letter-spacing:.02em;}
.strip small{display:block; color:#8d8d8d; font-size:13.5px; line-height:1.5; margin-top:6px;}

@media (prefers-reduced-motion: reduce){
  .room-hero .wall, .room-hero .center{animation:none;}
  .room-hero .scene{transition:none;}
  .marquee .track, .wave b, .navlinks a.cta::before{animation:none;}
  html.fx .reveal{opacity:1; transform:none; filter:none; transition:none;}
}

/* ---------- brand: bigger mark + "Between Us." wordmark ---------- */
nav.topnav .brand img{width:36px; height:36px;}
nav.topnav .brand span{font-size:20px; font-weight:800; letter-spacing:-.01em;}
nav.topnav .brand span b{color:#fff; font-weight:900;}

/* ---------- phone nav: a menu button instead of a sideways-scrolling row ---------- */
.nav-toggle{display:none; width:44px; height:44px; border-radius:12px; border:1.5px solid #333; background:#0a0a0a; cursor:pointer; position:relative; flex-shrink:0;}
.nav-toggle i{position:absolute; left:12px; right:12px; height:2px; background:#fff; border-radius:2px; transition:transform .3s ease, opacity .2s ease;}
.nav-toggle i:nth-child(1){top:15px;} .nav-toggle i:nth-child(2){top:21px;} .nav-toggle i:nth-child(3){top:27px;}
nav.topnav.open .nav-toggle i:nth-child(1){transform:translateY(6px) rotate(45deg);}
nav.topnav.open .nav-toggle i:nth-child(2){opacity:0;}
nav.topnav.open .nav-toggle i:nth-child(3){transform:translateY(-6px) rotate(-45deg);}
@media (max-width:860px){
  /* a backdrop-filter on the nav would trap the fixed menu inside the 70px bar */
  nav.topnav{backdrop-filter:none; -webkit-backdrop-filter:none; background:rgba(0,0,0,.94);}
  nav.topnav .brand span{display:inline !important; font-size:18px;}
  .nav-toggle{display:block;}
  nav.topnav .navlinks{position:fixed; inset:72px 0 0 0; z-index:49; background:rgba(0,0,0,.96); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
    flex-direction:column; align-items:flex-start; justify-content:flex-start; gap:6px; padding:28px 24px; overflow-y:auto;
    opacity:0; visibility:hidden; transform:translateY(-8px); transition:opacity .25s ease, transform .25s ease, visibility .25s;}
  nav.topnav.open .navlinks{opacity:1; visibility:visible; transform:none;}
  nav.topnav .navlinks a:not(.cta){font-family:"Anton",Impact,sans-serif; font-size:40px; color:#fff; text-transform:uppercase; padding:4px 0; opacity:0; transform:translateY(10px); transition:opacity .35s ease, transform .35s ease;}
  nav.topnav.open .navlinks a{opacity:1; transform:none;}
  nav.topnav.open .navlinks a:nth-child(2){transition-delay:.04s;} nav.topnav.open .navlinks a:nth-child(3){transition-delay:.08s;}
  nav.topnav.open .navlinks a:nth-child(4){transition-delay:.12s;} nav.topnav.open .navlinks a:nth-child(5){transition-delay:.16s;}
  nav.topnav .navlinks a:not(.cta)::after{display:none;}
  nav.topnav .navlinks a.cta{margin-top:18px; font-size:16px; padding:14px 24px;}
  body.menu-open{overflow:hidden;}
}

/* ---------- login popup (the app's own sign-in, in a phone-sized frame) ---------- */
.auth-pop{position:fixed; inset:0; z-index:200; background:rgba(0,0,0,.72); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  display:grid; place-items:center; padding:20px; opacity:0; transition:opacity .25s ease;}
.auth-pop.open{opacity:1;}
.auth-card{position:relative; width:min(420px, 100%); height:min(780px, calc(100dvh - 40px)); border-radius:30px; overflow:hidden; background:#000;
  border:1px solid rgba(255,255,255,.14); box-shadow:0 40px 120px rgba(0,0,0,.8); transform:translateY(16px) scale(.98); transition:transform .3s cubic-bezier(.2,.8,.2,1);}
.auth-pop.open .auth-card{transform:none;}
.auth-card iframe{width:100%; height:100%; border:0; display:block; background:#000;}
.auth-x{position:absolute; top:12px; right:12px; z-index:2; width:38px; height:38px; border-radius:50%; border:1px solid rgba(255,255,255,.25); background:rgba(0,0,0,.6); color:#fff; font-size:22px; line-height:1; cursor:pointer;}
@media (max-width:520px){ .auth-pop{padding:0;} .auth-card{width:100%; height:100dvh; border-radius:0; border:none;} }
body.menu-open{overflow:hidden;}