/* ===========================================================================
   BarberOne · the chooser at "/"
   "I want:" A Content / B Retention / C Reviews.
   < 900px: three stacked 100dvh cards with scroll-snap and a dot indicator.
   >= 900px: a triptych. The panel under the pointer or keyboard opens to ~46%.
   Tokens are the canonical ones from css/app.css.
   =========================================================================== */
:root{
  --bg:#000; --bg2:#070708; --card:#0c0c0c; --card2:#101012; --fill:#1c1c1e;
  --text:#fff; --sec:#8e8e93; --sec2:#636366;
  --border:rgba(255,255,255,.08); --border2:rgba(255,255,255,.14);
  --gold:#d4af37; --gold-soft:rgba(212,175,55,.14);
  --f:-apple-system,BlinkMacSystemFont,"Helvetica Neue",Helvetica,Arial,sans-serif;
  --ease:cubic-bezier(.32,.72,0,1);
  --pad:24px;
  --footh:0px;
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent;}
html{background:#000;}
body{
  background:radial-gradient(70% 55% at 70% 38%,#0d0c0a 0%,#040404 55%,#000 100%);
  background-color:#000;color:var(--text);font-family:var(--f);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
a{color:inherit;text-decoration:none;}
img{display:block;}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;}

.skip{position:fixed;left:14px;top:-80px;z-index:100;background:var(--gold);color:#0a0a0a;
  padding:10px 14px;border-radius:10px;font-size:14px;font-weight:700;}
.skip:focus{top:calc(env(safe-area-inset-top) + 12px);}

.grain{position:fixed;inset:0;z-index:30;pointer-events:none;opacity:.035;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");}

/* ---- nav: logo, the question, page links ---- */
.nav{position:fixed;top:0;left:0;right:0;z-index:40;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  padding:calc(env(safe-area-inset-top) + 18px) max(22px,env(safe-area-inset-right)) 18px max(22px,env(safe-area-inset-left));
  pointer-events:none;}
.nav::before{content:"";position:absolute;left:0;right:0;top:0;height:calc(100% + 70px);z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,rgba(0,0,0,.66) 0%,rgba(0,0,0,.34) 50%,rgba(0,0,0,0) 100%);}
.nav a{pointer-events:auto;}
.brand{justify-self:start;display:inline-flex;align-items:center;padding:6px 0;}
.brandlogo{height:22px;width:auto;}
.iwant{justify-self:center;font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);
  text-shadow:0 1px 12px rgba(0,0,0,.6);}
.links{justify-self:end;display:none;align-items:center;gap:10px;font-size:14px;}
.links a{color:rgba(255,255,255,.74);padding:6px 2px;transition:color .15s;}
.links a:hover,.links a:focus-visible,.links a.on{color:#fff;}
.links span{color:rgba(255,255,255,.3);}

:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:4px;}

/* ---- a card ---- */
.opt{position:relative;display:block;height:100vh;height:100dvh;overflow:hidden;isolation:isolate;color:#fff;background:#050505;}
.opt:focus-visible{outline:none;}
.opt:focus-visible::after{content:"";position:absolute;inset:0;z-index:6;pointer-events:none;
  box-shadow:inset 0 0 0 2px var(--gold);}

.ph,.ph img{position:absolute;inset:0;width:100%;height:100%;}
.ph img{object-fit:cover;object-position:50% 50%;transform:scale(1.08);transform-origin:50% 40%;
  transition:transform 2.4s var(--ease);}
.opt.in .ph img{transform:scale(1);}

/* two layers of shade: .scrim darkens the whole frame (eased off on the open
   panel), .body::before is the tight floor under the words and never moves */
.scrim{position:absolute;inset:0;z-index:1;pointer-events:none;transition:opacity .6s var(--ease),background-color .6s var(--ease);
  background:linear-gradient(0deg,rgba(0,0,0,.5) 0%,rgba(0,0,0,.18) 55%,rgba(0,0,0,.3) 100%);}
.opt-b .scrim{background-color:rgba(0,0,0,.2);}   /* Axe Club is a bright, white shop */

.body{position:absolute;left:0;right:0;bottom:0;z-index:3;
  padding:0 var(--pad) calc(env(safe-area-inset-bottom) + 86px);}
.body::before{content:"";position:absolute;left:0;right:0;bottom:0;top:-34vh;z-index:-1;pointer-events:none;
  background:linear-gradient(0deg,rgba(0,0,0,.92) 0%,rgba(0,0,0,.8) 30%,rgba(0,0,0,.45) 62%,rgba(0,0,0,0) 100%);}

.letter{display:flex;align-items:center;gap:12px;font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);}
.letter::after{content:"";width:28px;height:1px;background:rgba(212,175,55,.55);}
.word{margin-top:12px;font-size:clamp(46px,15vw,76px);font-weight:800;letter-spacing:-.035em;line-height:1;white-space:nowrap;}
.sub{margin-top:14px;max-width:32ch;font-size:17px;line-height:1.45;color:rgba(255,255,255,.84);}
.go{display:inline-flex;align-items:center;gap:14px;margin-top:22px;font-size:15px;font-weight:600;color:#fff;}
.go i{flex:0 0 46px;width:46px;height:46px;border-radius:50%;display:grid;place-items:center;color:var(--gold);
  border:1px solid rgba(212,175,55,.6);background:rgba(0,0,0,.25);
  transition:background-color .35s var(--ease),color .35s var(--ease),border-color .35s var(--ease),box-shadow .35s var(--ease);}
.go svg{transition:transform .35s var(--ease);}
.opt:hover .go i,.opt:focus-visible .go i,.opt:active .go i{background:var(--gold);color:#0a0a0a;border-color:var(--gold);box-shadow:0 12px 40px rgba(212,175,55,.22);}
.opt:hover .go svg,.opt:focus-visible .go svg{transform:translateX(3px);}

/* words settle in as each card arrives (only when JS is running) */
.js .body>*{opacity:0;transform:translateY(14px);transition:opacity .7s var(--ease),transform .9s var(--ease);}
.js .opt.in .body>*{opacity:1;transform:none;}
.js .opt.in .body>:nth-child(2){transition-delay:.06s;}
.js .opt.in .body>:nth-child(3){transition-delay:.14s;}
.js .opt.in .body>:nth-child(4){transition-delay:.22s;}

.swipe{position:absolute;left:50%;bottom:calc(env(safe-area-inset-bottom) + 20px);z-index:4;transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:2px;
  font-size:10.5px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:rgba(255,255,255,.62);
  transition:opacity .4s ease;}
.swipe svg{animation:bob 1.8s ease-in-out infinite;}
@keyframes bob{0%,100%{transform:translateY(0);}50%{transform:translateY(4px);}}
body.moved .swipe{opacity:0;}

/* ---- stacked (phones, small tablets) ---- */
@media (max-width:899px){
  html{scroll-snap-type:y mandatory;}
  .opt{scroll-snap-align:start;scroll-snap-stop:always;}
  .dots{position:fixed;z-index:41;right:max(10px,env(safe-area-inset-right));top:50%;transform:translateY(-50%);
    display:flex;flex-direction:column;align-items:center;gap:7px;pointer-events:none;}
  .dots i{display:block;width:5px;height:5px;border-radius:5px;background:rgba(255,255,255,.38);
    transition:height .45s var(--ease),background-color .45s var(--ease);}
  .dots i.on{height:18px;background:var(--gold);}
  body.atfoot .dots{opacity:0;}
  .foot{scroll-snap-align:end;display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:6px 10px;
    padding:30px 22px calc(env(safe-area-inset-bottom) + 30px);background:#000;border-top:1px solid var(--border);
    font-size:12.5px;line-height:1.6;color:var(--sec);}
  .foot a{color:rgba(255,255,255,.72);}
  .foot .grp{display:flex;gap:10px;white-space:nowrap;}
  .foot .sep-mid{display:none;}
  .foot .sep{color:var(--sec2);}
}
@media (max-width:899px) and (min-width:600px){
  :root{--pad:48px;}
  .sub{font-size:19px;}
}
/* phones on their side: short and wide, keep the words compact */
@media (max-width:899px) and (orientation:landscape){
  .body{padding-bottom:calc(env(safe-area-inset-bottom) + 28px);padding-left:max(var(--pad),env(safe-area-inset-left));}
  .word{font-size:clamp(38px,9vh,56px);}
  .sub{margin-top:8px;font-size:15px;max-width:44ch;}
  .go{margin-top:12px;}
  .swipe{display:none;}
}

/* ---- triptych (desktop) ---- */
@media (min-width:900px){
  :root{--pad:clamp(24px,2.8vw,52px);--footh:46px;}
  .links{display:flex;}
  .dots,.swipe{display:none;}
  body{overflow:hidden;}
  .choose{display:flex;height:100vh;height:100dvh;overflow:hidden;}
  .opt{flex:1 1 0;min-width:0;height:100%;transition:flex-grow .6s var(--ease);}
  .opt+.opt{box-shadow:inset 1px 0 0 rgba(255,255,255,.07);}

  /* 16:9 frames in tall panels: aim the crop at each subject */
  .opt-a .ph img{object-position:73% 50%;}
  .opt-b .ph img{object-position:62% 50%;}
  .opt-c .ph img{object-position:42% 50%;}

  .ph img{transform:scale(1.06);transition:transform 1.4s var(--ease);}
  .opt.in .ph img{transform:scale(1.06);}

  /* the open panel: JS sets .is-on (hover, focus, nav hover); CSS covers no-JS */
  .opt.is-on,html:not(.js) .opt:hover,html:not(.js) .opt:focus-visible{flex-grow:1.7;}
  .opt.is-on .ph img,html:not(.js) .opt:hover .ph img{transform:scale(1);}
  .opt.is-on .scrim,html:not(.js) .opt:hover .scrim{opacity:.5;}

  /* the others step back */
  .opt .body::after{content:"";position:absolute;inset:-100vh 0 0;z-index:-1;pointer-events:none;background:#000;opacity:0;
    transition:opacity .6s var(--ease);}
  .choose.has-on .opt:not(.is-on) .body::after{opacity:.34;}

  /* words keep a fixed measure so nothing reflows while panels resize */
  .body{right:auto;width:33.34vw;padding-bottom:calc(var(--pad) + var(--footh));}
  .body::before{right:-100vw;top:-44vh;
    background:linear-gradient(0deg,rgba(0,0,0,.94) 0%,rgba(0,0,0,.86) 34%,rgba(0,0,0,.5) 66%,rgba(0,0,0,0) 100%);}
  .word{font-size:clamp(34px,3.7vw,76px);}
  /* four lines reserved so the words and arrows line up across all three panels */
  .sub{font-size:clamp(15px,1.15vw,19px);max-width:34ch;min-height:calc(1.45em * 4);transition:opacity .35s ease;}
  .js .opt.in .body>*{transition-delay:0s;}
  .js .opt.in .body>.sub,.js .opt.in .body>.go{transition:opacity .35s ease,transform .9s var(--ease);}
  .go{transition:opacity .35s ease;}
  .choose.has-on .opt:not(.is-on) .sub,
  .choose.has-on .opt:not(.is-on) .go{opacity:0;}

  .foot{position:fixed;left:0;right:0;bottom:0;z-index:20;height:var(--footh);display:flex;justify-content:center;align-items:center;gap:10px;
    font-size:12px;color:rgba(255,255,255,.5);pointer-events:none;}
  .foot a{pointer-events:auto;color:rgba(255,255,255,.62);transition:color .15s;}
  .foot a:hover{color:#fff;}
  .foot .sep{color:rgba(255,255,255,.28);}
  .foot .grp{display:flex;gap:10px;}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:.01ms!important;transition-delay:0s!important;animation:none!important;}
  .ph img,.opt.in .ph img{transform:none!important;}
  .js .body>*{transform:none;}
}