/* Causa account visual language, shared across the public site.
   Decoration only: preserve type metrics, spacing, grids and image framing.
   Entrances are opt-in from atmosphere.js; content is visible by default. */
:root{
  --causa-glow-soft:color-mix(in srgb,var(--accent) 16%,transparent);
  --causa-glow-bright:color-mix(in srgb,var(--accent) 34%,transparent);
  --causa-surface-light:color-mix(in srgb,var(--accent) 5%,transparent);
  --causa-edge:color-mix(in srgb,var(--accent) 18%,var(--border-subtle));
  --causa-enter-distance:.65rem;
  --causa-enter-duration:650ms;
}
html[data-theme=light]{
  --causa-glow-soft:color-mix(in srgb,var(--accent) 5%,transparent);
  --causa-glow-bright:color-mix(in srgb,var(--accent) 12%,transparent);
  --causa-surface-light:color-mix(in srgb,var(--accent) 2%,transparent);
}
/* A single continuous film sits behind the page. It is never tiled per
   section, and does not establish a containing block for fixed controls. */
body.causa-films-page{isolation:isolate;}
.causa-page-film{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden;background:var(--surface-page);}
/* Blur is baked in. Dim after decoding to preserve smooth shadow gradients;
   constant opacity needs no live full-screen filters or blend modes. */
.causa-page-film video{width:100%;height:100%;object-fit:cover;opacity:.24;}
html[data-theme=light] .causa-page-film video{opacity:.08;}
@media(max-width:680px){html[data-theme=dark] .causa-page-film video{opacity:.22;}}
.causa-films-page main{background-image:none;}
html[data-theme=dark] .causa-films-page main{
  --text-muted:color-mix(in srgb,var(--e-dark-fg-muted) 65%,var(--e-dark-fg) 35%);
  --color-muted:var(--text-muted);
}
.causa-films-page .home-hero{background:transparent;}
.home-hero h1 span{color:var(--accent);text-shadow:0 0 1.2rem var(--causa-glow-soft);}
.home-storefront h2{text-shadow:none;}
.home-storefront .btn-primary{box-shadow:0 .25rem 1.5rem color-mix(in srgb,var(--accent) 10%,transparent);}
.causa-film-toggle{position:fixed;left:16px;bottom:16px;z-index:34;width:44px;height:44px;
  display:grid;place-items:center;border:1px solid var(--border-strong);border-radius:50%;
  color:var(--text-primary);background:var(--surface-page);cursor:pointer;}
.causa-film-toggle[hidden]{display:none;}
.causa-film-toggle svg{width:16px;height:16px;fill:currentColor;}
.causa-film-toggle .film-play,.causa-film-toggle[aria-pressed=true] .film-pause{display:none;}
.causa-film-toggle[aria-pressed=true] .film-play{display:block;}
.causa-film-toggle:focus-visible{outline:2px solid var(--accent);outline-offset:3px;}
/* The header keeps its dark/light solid surface without sampling moving
   pixels underneath it on every scroll or video frame. */
body[data-route="/"] .nav{background:var(--surface-page);backdrop-filter:none;-webkit-backdrop-filter:none;}

/* Native render skipping retains links, browser find, keyboard access and
   SEO content. Remember each measured size after its first visible render.
   Never contain the main/root, search dropdown, or fixed cart controls. */
@supports (content-visibility:auto) and (container-type:inline-size){
  .home-storefront>section:is(.home-category-shop,.home-bundle-shop,.home-evidence,.home-monthly,.home-buying-help){
    content-visibility:auto;contain-intrinsic-block-size:auto var(--home-section-estimate,500px);
  }
  .home-category-shop{--home-section-estimate:1080px;}
  .home-bundle-shop{--home-section-estimate:810px;}
  .home-evidence{--home-section-estimate:650px;}
  .home-monthly{--home-section-estimate:475px;}
  .home-buying-help{--home-section-estimate:350px;}
  .home-products{container-type:inline-size;--home-card-width:100cqw;--home-card-copy:31rem;}
  .home-product{content-visibility:auto;contain-intrinsic-block-size:auto calc(var(--home-card-width) + var(--home-card-copy));}
  .home-tab-bundles>.home-bundle{content-visibility:auto;contain-intrinsic-block-size:auto 640px;}
  .home-product:focus-within,.home-tab-bundles>.home-bundle:focus-within{content-visibility:visible;}
  body[data-route="/"]>.foot{content-visibility:auto;contain-intrinsic-block-size:auto 1200px;}
  @media(min-width:640px){
    .home-products{--home-card-width:calc((100cqw - var(--space-5)) / 2);--home-card-copy:33rem;}
    .home-category-shop{--home-section-estimate:590px;}
    .home-bundle-shop{--home-section-estimate:1000px;}
    .home-evidence{--home-section-estimate:320px;}
    .home-monthly{--home-section-estimate:370px;}
    .home-buying-help{--home-section-estimate:160px;}
    body[data-route="/"]>.foot{contain-intrinsic-block-size:auto 750px;}
  }
  @media(min-width:960px){
    .home-products{--home-card-width:calc((100cqw - 2 * var(--space-5)) / 3);}
    .home-bundle-shop{--home-section-estimate:580px;}
    .home-evidence{--home-section-estimate:300px;}
    .home-monthly{--home-section-estimate:320px;}
    body[data-route="/"]>.foot{contain-intrinsic-block-size:auto 460px;}
  }
  @media(min-width:1280px){.home-category-shop{--home-section-estimate:330px;}}
}
.home-service-strip[data-motion-offscreen] .marquee-track{animation-play-state:paused;}
body:not([data-route^="/account/"]) main .eyebrow{text-shadow:0 0 .75rem var(--causa-glow-soft);}
.nav{border-bottom-color:var(--causa-edge);}
.foot{border-top-color:var(--causa-edge);}

/* Existing framed surfaces receive the same light as the account panel.
   No extra border width, wrapping elements, clipping or containing blocks. */
:is(.card,.bundle,.hero-plate,.rail-item,.area-card,.facts,.buybox,.coa,.home-monthly-panel,.directory-controls){
  border-color:var(--causa-edge);
  background-image:radial-gradient(ellipse at 50% 0%,var(--causa-surface-light),transparent 65%);
  box-shadow:inset 0 1px 0 var(--causa-glow-soft),0 .75rem 2.5rem color-mix(in srgb,var(--accent) 2%,transparent);
}
:is(.rail-ico,.step-bead){
  box-shadow:inset 0 1px 0 var(--causa-glow-soft);
}
:is(.buybox,.directory-controls,.card,.bundle):focus-within{
  border-color:color-mix(in srgb,var(--accent) 42%,var(--border-subtle));
}
.cart-drawer{border-left-color:var(--causa-edge);}
.cart-drawer-head{background-image:radial-gradient(ellipse at 50% 0%,var(--causa-surface-light),transparent 75%);}

/* Button sheen stays inside its current bounds and never intercepts input.
   clip preserves intrinsic flex sizing; hidden can shrink a narrow CTA. */
.btn-primary:not(.acct-submit){position:relative;isolation:isolate;overflow:clip;}
.btn-primary:not(.acct-submit)::before{
  content:"";position:absolute;top:-60%;bottom:-60%;left:0;width:40%;
  z-index:-1;pointer-events:none;
  background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--text-primary) 23%,transparent),transparent);
  transform:translateX(-180%) skewX(-22deg);
  transition:transform 650ms var(--ease-out);
}
.btn-primary:not(.acct-submit):focus-visible:not(:disabled):not([aria-disabled=true])::before{
  transform:translateX(360%) skewX(-22deg);
}
.btn:disabled,.btn[aria-disabled=true]{transform:none;}
.btn-primary:disabled::before,.btn-primary[aria-disabled=true]::before{display:none;}

@media(hover:hover) and (pointer:fine){
  .btn-primary:not(:disabled):not([aria-disabled=true]):not(.acct-submit):hover{
    box-shadow:0 .35rem 1.5rem color-mix(in srgb,var(--accent) 20%,transparent);
  }
  .btn-primary:not(:disabled):not([aria-disabled=true]):not(.acct-submit):hover::before{
    transform:translateX(360%) skewX(-22deg);
  }
  :is(.card,.bundle,.area-card):hover{border-color:color-mix(in srgb,var(--accent) 36%,var(--border-subtle));}
  :is(.nav-links,.mobile-nav,.foot nav) a:hover,
  :is(.home-category-tile,.directory-row):hover h2 a,
  .home-category-tile:hover .home-category-label{
    text-shadow:0 0 .8rem var(--causa-glow-soft);
  }
  .directory-row:hover{border-top-color:color-mix(in srgb,var(--accent) 32%,var(--border-subtle));}
}

/* Opacity and translation only; no layout animation. No element is hidden
   while waiting for IntersectionObserver or the researcher dialog. */
@keyframes causa-enter{
  from{opacity:.82;transform:translateY(var(--causa-enter-distance));}
  to{opacity:1;transform:none;}
}
@keyframes causa-glow{
  0%,100%{text-shadow:0 0 1.2rem var(--causa-glow-soft);}
  50%{text-shadow:0 0 1.2rem var(--causa-glow-bright);}
}
@media(prefers-reduced-motion:no-preference){
  .causa-entering{animation:causa-enter var(--causa-enter-duration) var(--ease-out) var(--causa-enter-delay,0ms) both;}
  .causa-glowing{animation:causa-glow 2200ms ease-in-out 2;}
  html.gate-open :is(.causa-entering,.causa-glowing),
  html.causa-motion-paused :is(.causa-entering,.causa-glowing){animation-play-state:paused;}
  html:is(.gate-open,.causa-motion-paused) .home-storefront *,
  html:is(.gate-open,.causa-motion-paused) .home-storefront *::before,
  html .home-storefront:has(.marquee-pause input:checked) *,
  html .home-storefront:has(.marquee-pause input:checked) *::before{animation-play-state:paused!important;}
}
@media(max-width:680px){:root{--causa-enter-distance:.35rem;--causa-enter-duration:520ms;}}
@media(prefers-reduced-motion:reduce){
  .causa-film-toggle{display:none;}
  .causa-entering,.causa-glowing{animation:none!important;transform:none!important;opacity:1!important;}
  .btn-primary:not(.acct-submit)::before{display:none;transition:none;}
}
/* Pill feedback is interaction-only: no idle loops or layout animation. */
:is(.order-form,#checkout-form) label.choice:not([hidden]):has(>input[type=radio]),
.drawer-fulfillment label:has(input[type=radio]){
  isolation:isolate;overflow:clip;
  background-image:linear-gradient(180deg,rgb(255 255 255 / .12),transparent 62%);
  box-shadow:inset 0 1px 0 rgb(255 255 255 / .1);
}
@keyframes causa-pill-sheen{
  0%{transform:translateX(-160%) skewX(-20deg);opacity:0;}
  18%{opacity:.7;}
  78%{opacity:.45;}
  100%{transform:translateX(430%) skewX(-20deg);opacity:0;}
}
@media(prefers-reduced-motion:no-preference){
  :is(.order-form,#checkout-form) label.choice:not([hidden]):has(>input[type=radio]),
  .drawer-fulfillment label{
    transition:background-color 180ms ease,color 180ms ease,border-color 180ms ease,
      box-shadow 220ms ease,transform 160ms var(--ease-out);
  }
  :is(.order-form,#checkout-form) label.choice:has(>input[type=radio])::after,
  .drawer-fulfillment label::after{
    content:'';position:absolute;top:-65%;bottom:-65%;left:0;width:32%;
    z-index:-1;pointer-events:none;opacity:0;
    background:linear-gradient(90deg,transparent,rgb(255 255 255 / .25),transparent);
    transform:translateX(-160%) skewX(-20deg);
  }
  :is(.order-form,#checkout-form) label.choice:has(>input[type=radio])::before,
  .drawer-fulfillment label::before{transition:opacity 160ms ease;}
  :is(.order-form,#checkout-form) label.choice:has(>input[type=radio]:focus-visible:not(:disabled)),
  .drawer-fulfillment label:has(input:focus-visible:not(:disabled)){
    box-shadow:inset 0 1px 0 rgb(255 255 255 / .18),0 0 18px color-mix(in srgb,var(--accent) 16%,transparent);
  }
  :is(.order-form,#checkout-form) label.choice:has(>input[type=radio]:focus-visible:not(:disabled))::after,
  .drawer-fulfillment label:has(input:focus-visible:not(:disabled))::after{
    animation:causa-pill-sheen 850ms ease-out 1;
  }
  :is(.order-form,#checkout-form) label.choice:has(>input[type=radio]:not(:disabled)):active,
  .drawer-fulfillment label:has(input:not(:disabled)):active{
    transform:scale(.98);transition-duration:90ms;
  }
  body :is(.drawer-remove,.drawer-secondary button,.drawer-secondary a,.drawer-deal button,
    .filter,.directory-filters button,.home-shop-tabs button,.directory-sizes nav a,.home-vial-stops>a){
    transition:background-color 180ms ease,color 180ms ease,border-color 180ms ease,
      box-shadow 220ms ease,transform 160ms var(--ease-out);
  }
  body :is(.drawer-remove,.drawer-secondary button,.drawer-secondary a,.drawer-deal button,
    .filter,.directory-filters button,.home-shop-tabs button,.directory-sizes nav a,.home-vial-stops>a):not(:disabled):not([aria-disabled=true]):active{
    transform:scale(.98);
  }
  @media(hover:hover) and (pointer:fine){
    :is(.order-form,#checkout-form) label.choice:has(>input[type=radio]:not(:disabled)):hover,
    .drawer-fulfillment label:has(input:not(:disabled)):hover{
      box-shadow:inset 0 1px 0 rgb(255 255 255 / .18),0 0 18px color-mix(in srgb,var(--accent) 16%,transparent);
    }
    :is(.order-form,#checkout-form) label.choice:has(>input[type=radio]:not(:disabled)):hover::after,
    .drawer-fulfillment label:has(input:not(:disabled)):hover::after{
      animation:causa-pill-sheen 850ms ease-out 1;
    }
    body :is(.drawer-remove,.drawer-secondary button,.drawer-secondary a,.drawer-deal button,
      .filter,.directory-filters button,.home-shop-tabs button,.directory-sizes nav a,.home-vial-stops>a):not(:disabled):not([aria-disabled=true]):hover{
      box-shadow:0 0 16px color-mix(in srgb,var(--accent) 13%,transparent);
      border-color:var(--accent);
    }
  }
  html.causa-motion-paused :is(.order-form .choice,.drawer-fulfillment label)::after{animation-play-state:paused;}
}
@media print{
  :is(.order-form,#checkout-form) label.choice:has(>input[type=radio])::after,
  .drawer-fulfillment label::after{display:none;}
  .home-storefront>section,.home-product,.home-tab-bundles>.home-bundle,body[data-route="/"]>.foot{content-visibility:visible!important;contain-intrinsic-block-size:none!important;}
  .causa-entering,.causa-glowing{animation:none!important;transform:none!important;opacity:1!important;}
  main h1,.home-hero h1 span,.home-storefront h2{text-shadow:none!important;animation:none!important;}
  .btn-primary::before{display:none;}
  .causa-page-film,.causa-film-toggle{display:none!important;}
  .home-shop-tools{background-image:none;}
  .home-storefront :is(.hero-field,.home-category-image,.home-monthly-panel,.btn-primary){box-shadow:none;}
}