/* ====================================================================
   SEX SHOP DORAL — /theme.css · additive motion + polish layer
   Pairs with /motion.js. All scroll-reveal base states are gated
   behind html.m-on, which motion.js sets ONLY when JS runs and the
   user has NOT requested reduced motion — crawlers, no-JS visitors
   and reduced-motion users always see the full, static page.
   Animates transform / opacity / filter / shadow only. No layout,
   copy, link, schema or metadata changes. Loads after each page's
   inline styles, so its overrides win the cascade deliberately.
   ==================================================================== */

/* ---------- universal finish ---------- */
::selection{background:#2F6B4F;color:#fff}
::-moz-selection{background:#2F6B4F;color:#fff}
:focus-visible{outline:2px solid #4C9A72;outline-offset:2px}
html{scrollbar-width:thin;scrollbar-color:#222 #0b0b0b}
::-webkit-scrollbar{width:11px;height:11px}
::-webkit-scrollbar-track{background:#0b0b0b}
::-webkit-scrollbar-thumb{background:#222;border-radius:6px;border:2px solid #0b0b0b}
::-webkit-scrollbar-thumb:hover{background:#2F6B4F}

/* ---------- scroll reveal (html.m-on only) ----------
   motion.js tags targets with .m-r and per-parent --m-d stagger,
   then flips .m-in when they enter the viewport. The from-only
   keyframe leaves no forwards-fill lock, so element hover
   transitions keep their own fast timing after the reveal. */
html.m-on .m-r{opacity:0}
html.m-on .m-r.m-in{opacity:1;animation:m-rise .68s cubic-bezier(.22,.61,.36,1) both;animation-delay:var(--m-d,0ms)}
@keyframes m-rise{from{opacity:0;transform:translateY(18px)}}

/* ---------- header: shrink + shadow past 40px (html.m-scrolled) ---------- */
.site-head,header{transition:box-shadow .3s ease}
.logo img,.hi img{transition:height .3s ease}
html.m-scrolled .site-head,html.m-scrolled header{box-shadow:0 10px 30px rgba(0,0,0,.55)}
html.m-scrolled .logo img{height:38px}
html.m-scrolled .hi img{height:36px}
@media(max-width:900px){html.m-scrolled .logo img{height:34px}}

/* ---------- hero: slow ken-burns, kicker breath, gradient drift ---------- */
html.m-on .hero-media video,html.m-on .hero-media img{animation:m-kb 18s ease-in-out infinite alternate;will-change:transform}
@keyframes m-kb{from{transform:scale(1)}to{transform:scale(1.07)}}
html.m-on .kicker{animation:m-glow 4s ease-in-out infinite}
@keyframes m-glow{0%,100%{box-shadow:0 0 0 0 rgba(76,154,114,0)}50%{box-shadow:0 0 24px 2px rgba(76,154,114,.26)}}
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  html.m-on h1 .grn{background-size:220% 100%;animation:m-grad 8s ease-in-out infinite alternate}
}
@keyframes m-grad{from{background-position:0% 50%}to{background-position:100% 50%}}

/* ---------- buttons: sheen sweep + lift + press ---------- */
.btn,.card-cta,.buy,.cart-go,.head-cta,a.b{position:relative;overflow:hidden}
.btn::after,.card-cta::after,.buy::after,.cart-go::after,.head-cta::after,a.b::after{content:"";position:absolute;top:-60%;bottom:-60%;left:-20%;width:38%;background:linear-gradient(105deg,transparent,rgba(255,255,255,.24) 50%,transparent);transform:translateX(-140%) skewX(-18deg);pointer-events:none}
.btn:hover::after,.card-cta:hover::after,.buy:hover::after,.cart-go:hover::after,.head-cta:hover::after,a.b:hover::after{transform:translateX(320%) skewX(-18deg);transition:transform .7s ease}
.btn{transition:background .2s,border-color .2s,color .2s,transform .22s ease,box-shadow .25s ease}
.btn:hover{transform:translateY(-2px);box-shadow:0 10px 26px rgba(47,107,79,.32)}
.btn:active{transform:translateY(0) scale(.98);box-shadow:0 4px 12px rgba(47,107,79,.25)}
.btn-outline:hover{box-shadow:0 10px 26px rgba(255,255,255,.08)}
.head-cta{transition:background .2s,transform .22s ease,box-shadow .25s ease}
.head-cta:hover{transform:translateY(calc(-50% - 2px));box-shadow:0 8px 22px rgba(47,107,79,.4)}
.head-cta:active{transform:translateY(-50%) scale(.97)}
.card-cta,.buy,.cart-go{transition:background .2s,transform .18s ease}
.card-cta:active,.buy:active,.cart-go:active,a.b:active{transform:scale(.98)}

/* ---------- cards & cells: refined hover ---------- */
.card{transition:transform .25s cubic-bezier(.22,.61,.36,1),border-color .25s,background .25s,box-shadow .25s}
.card:hover{transform:translateY(-4px);border-color:#2F6B4F;box-shadow:0 14px 32px rgba(0,0,0,.5),0 6px 20px rgba(47,107,79,.2)}
.card-media{overflow:hidden}
.card-media img{transition:transform .45s cubic-bezier(.22,.61,.36,1)}
.card:hover .card-media img{transform:scale(1.05)}
.cat-cell,.rel-cell{transition:transform .25s cubic-bezier(.22,.61,.36,1),border-color .25s,background .25s,box-shadow .25s}
.cat-cell:hover,.rel-cell:hover{transform:translateY(-4px);border-color:#2F6B4F;box-shadow:0 12px 26px rgba(0,0,0,.45),0 5px 16px rgba(47,107,79,.16)}
.hotel-cell,.step{transition:transform .3s ease,border-color .3s,box-shadow .3s}
.hotel-cell:hover,.step:hover{transform:translateY(-2px);border-color:rgba(76,154,114,.5);box-shadow:0 8px 20px rgba(0,0,0,.35)}

/* ---------- ticker: soft edge masks (marquee already has them) ---------- */
.ticker{-webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}

/* ---------- zones table: green bar reveal + one-shot ETA pulse ---------- */
table.zones tbody tr{transition:background .22s}
table.zones tbody tr:hover{background:rgba(47,107,79,.1)}
table.zones tbody td:first-child{transition:box-shadow .25s}
table.zones tbody tr:hover td:first-child{box-shadow:inset 3px 0 0 #2F6B4F}
html.m-on table.zones tbody tr.m-in .eta{animation:m-eta 1s ease both;animation-delay:calc(var(--m-d,0ms) + .5s)}
@keyframes m-eta{0%{opacity:0}55%{opacity:1;text-shadow:0 0 16px rgba(76,154,114,.9)}100%{opacity:1;text-shadow:0 0 0 rgba(76,154,114,0)}}

/* ---------- trust icons: springy pop on reveal, then gentle float ---------- */
html.m-on .trust-cell svg{opacity:0}
html.m-on .trust-cell.m-in svg{opacity:1;animation:m-icon .7s cubic-bezier(.34,1.56,.64,1) both,m-float 7s ease-in-out infinite;animation-delay:calc(var(--m-d,0ms) + .15s),calc(var(--m-d,0ms) + 2.4s)}
@keyframes m-icon{from{opacity:0;transform:scale(.35) rotate(-10deg)}to{opacity:1;transform:scale(1) rotate(0deg)}}
@keyframes m-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}

/* ---------- FAQ: spinning +/− and soft answer drop ---------- */
.faq summary{transition:color .25s}
.faq summary:hover{color:#B2E2D8}
.faq summary::after{transition:transform .35s cubic-bezier(.22,.61,.36,1),color .25s}
.faq details[open] summary::after{transform:translateY(-50%) rotate(180deg)}
html.m-on .faq details[open] p{animation:m-drop .45s cubic-bezier(.22,.61,.36,1)}
@keyframes m-drop{from{opacity:0;transform:translateY(-6px)}}

/* ---------- age gate: backdrop fade + card settle (only when shown) ---------- */
.gate{animation:m-fade .3s ease}
.gate-card,.gm{animation:m-gate .4s cubic-bezier(.22,.61,.36,1)}
@keyframes m-fade{from{opacity:0}}
@keyframes m-gate{from{opacity:0;transform:translateY(12px) scale(.95)}}

/* ---------- cart drawer: depth, item stagger, badge pop ---------- */
.cart-dr{box-shadow:-20px 0 50px rgba(0,0,0,.5)}
html.m-on .cart-it{animation:m-item .38s cubic-bezier(.22,.61,.36,1) both}
html.m-on .cart-it:nth-child(2){animation-delay:.05s}
html.m-on .cart-it:nth-child(3){animation-delay:.1s}
html.m-on .cart-it:nth-child(4){animation-delay:.15s}
html.m-on .cart-it:nth-child(5){animation-delay:.2s}
html.m-on .cart-it:nth-child(n+6){animation-delay:.25s}
@keyframes m-item{from{opacity:0;transform:translateX(16px)}}
.bag-n.bag-pop{animation:m-pop .5s cubic-bezier(.34,1.56,.64,1)}
@keyframes m-pop{0%{transform:scale(1)}40%{transform:scale(1.45)}100%{transform:scale(1)}}

/* ---------- reduced motion: kill the entire layer ----------
   motion.js already bails (no html.m-on) when this media query
   matches at load; this block also covers a mid-session OS
   preference flip. Content stays fully visible, nothing loops,
   nothing reveals, nothing drifts. */
@media (prefers-reduced-motion:reduce){
  html.m-on .m-r,html.m-on .m-r.m-in{opacity:1;animation:none!important}
  html.m-on .trust-cell svg,html.m-on .trust-cell.m-in svg{opacity:1;animation:none!important}
  .hero-media video,.hero-media img,.kicker,h1 .grn,.gate,.gate-card,.gm,.cart-it,.bag-n.bag-pop,.faq details[open] p{animation:none!important}
  html.m-on table.zones tbody tr.m-in .eta{animation:none!important}
  .btn::after,.card-cta::after,.buy::after,.cart-go::after,.head-cta::after,a.b::after{content:none}
  .card,.card:hover,.cat-cell:hover,.rel-cell:hover,.hotel-cell:hover,.step:hover,.btn:hover,.btn:active,.card-cta:active,.buy:active,.cart-go:active,a.b:active{transform:none!important}
  .head-cta:hover,.head-cta:active{transform:translateY(-50%)!important}
  .card:hover .card-media img{transform:none!important}
  .card,.card-media img,.cat-cell,.rel-cell,.hotel-cell,.step,.logo img,.hi img,.site-head,header,.faq summary::after{transition:none!important}
  html.m-scrolled .logo img{height:48px}
  html.m-scrolled .hi img{height:44px}
}
@media (prefers-reduced-motion:reduce) and (max-width:900px){
  html.m-scrolled .logo img{height:40px}
}

/* fix: keep header CTA absolutely positioned (sheen rule made it relative) */
.head-inner .head-cta,.hi .head-cta{position:absolute}