/* Vision | Sitewide motion system v3
   All elements remain visible without JS. No page interception, full-screen fade or
   third-party animation engine. Original loader and 3D rig remain untouched. */
:root { --vision-ease: cubic-bezier(.18,.78,.22,1); }

/* Site-wide small affordances */
.vision-reading-progress { position:fixed;left:0;right:0;top:0;height:2px;z-index:150;
  pointer-events:none;transform-origin:left;transform:scaleX(var(--vision-scroll,0));
  background:linear-gradient(90deg,#a53a3e,#d2ac69 70%,#f4dda5);
  box-shadow:0 0 10px rgba(214,180,108,.23); }
.vision-back-to-top { position:fixed;bottom:22px;right:22px;z-index:65;
  display:grid;place-items:center;width:42px;height:42px;cursor:pointer;
  color:#f0d9a3;background:rgba(25,15,17,.94);border:1px solid rgba(214,180,108,.33);
  border-radius:13px;font:700 1.25rem var(--font-body);
  box-shadow:0 11px 24px -15px #000;opacity:0;translate:0 12px;pointer-events:none;
  transition:opacity .23s,translate .3s var(--vision-ease),border-color .2s; }
.vision-back-to-top.is-visible {opacity:1;translate:0 0;pointer-events:auto;}
.vision-back-to-top:is(:hover,:focus-visible) {border-color:#edcb86;background:#342020;}
.site-header .nav-links>a:not(.btn) {position:relative;}
.site-header .nav-links>a:not(.btn)::after {content:'';position:absolute;left:20%;right:20%;bottom:.28rem;height:1px;
  background:linear-gradient(90deg,transparent,#ddbd78,transparent);transform:scaleX(0);opacity:0;
  transition:opacity .2s,transform .3s var(--vision-ease);}
.site-header .nav-links>a:not(.btn):is(:hover,:focus-visible,[aria-current="page"])::after {transform:scaleX(1);opacity:1;}

/* Reveal starts ONLY when JS observes an element. No hidden pre-state. */
@media (prefers-reduced-motion:no-preference) {
  .vision-motion-in {
    animation:vision-arrive .62s var(--vision-ease) both;
    animation-delay:calc(var(--vision-order,0) * 50ms);
  }
  @keyframes vision-arrive {
    from {opacity:.42;translate:0 15px;filter:brightness(.84);}
    to {opacity:1;translate:0 0;filter:brightness(1);}
  }
  .vision-motion-in.vision-motion-subtle {animation-duration:.48s;}
  .vision-motion-in:is(.vision-faq-page details,.vision-terms-page h3,.vision-terms-page p) {
    animation-name:vision-arrive-text;animation-duration:.47s;
  }
  @keyframes vision-arrive-text {from{opacity:.5;translate:0 8px;}to{opacity:1;translate:0 0;}}
  /* Do not add heavy effects to the homepage. */
  .hero .cta .btn-primary {transition:box-shadow .27s,transform .25s var(--vision-ease);}
  .hero .cta .btn-primary:hover {box-shadow:0 15px 36px -15px rgba(180,44,47,.68),0 0 0 1px rgba(214,180,108,.23);}
  /* A tactile but restrained store grid. Transform continues to be owned by data-tilt. */
  .vision-shop-page .catalog .row,.catalog.vision-catalog-motion .row {
    transition:border-color .3s,background .3s,box-shadow .34s var(--vision-ease);
  }
  .vision-shop-page .row-thumb img,.catalog.vision-catalog-motion .row-thumb img {
    transition:scale .5s var(--vision-ease),filter .4s ease;
  }
  .vision-shop-page .row:hover .row-thumb img,.catalog.vision-catalog-motion .row:hover .row-thumb img {scale:1.07;filter:saturate(1.11);}
  .vision-shop-page .row .btn,.catalog.vision-catalog-motion .row .btn {transition:background .22s,border-color .24s,translate .3s var(--vision-ease);}
  .vision-shop-page .row:hover .btn,.catalog.vision-catalog-motion .row:hover .btn {translate:2px 0;}
  /* Clips: staggered frames with premium play feedback and understated depth. */
  .vision-clips-page .clip-card {isolation:isolate;transition:translate .35s var(--vision-ease),border-color .26s,box-shadow .35s;}
  .vision-clips-page .clip-card:is(:hover,:focus-visible) {translate:0 -4px;
    box-shadow:0 21px 42px -25px rgba(197,143,82,.45),0 0 0 1px rgba(214,180,108,.13);}
  .vision-clips-page .clip-card .clip-play {transition:scale .3s var(--vision-ease),box-shadow .3s;}
  .vision-clips-page .clip-card:is(:hover,:focus-visible) .clip-play {scale:1.08;
    box-shadow:0 0 0 10px rgba(201,162,75,.075),0 0 28px rgba(201,162,75,.3);}
  .vision-clips-page .clips-head .clips-title {transition:color .25s;}
  .vision-clips-page .clips-group:target .clips-title {color:#ffe0a4;}
  /* Reviews: appear individually, then a subtle elevation on hover. */
  .vision-reviews-page .review {position:relative;overflow:hidden;
    transition:translate .35s var(--vision-ease),border-color .3s,box-shadow .35s;}
  .vision-reviews-page .review::before {content:'';position:absolute;left:0;top:12px;bottom:12px;width:2px;
    border-radius:2px;background:#d6ad68;scale:1 0;transform-origin:top;transition:scale .4s var(--vision-ease);}
  .vision-reviews-page .review:is(:hover,:focus-within) {translate:0 -3px;border-color:rgba(214,180,108,.28);
    box-shadow:0 17px 36px -28px #000;}
  .vision-reviews-page .review:is(:hover,:focus-within)::before {scale:1 1;}
  .vision-reviews-page .stars {transition:filter .3s;}
  .vision-reviews-page .review:hover .stars {filter:drop-shadow(0 0 7px rgba(201,162,75,.23));}
  /* FAQ: compact accordion feedback; native details stays keyboard accessible. */
  .vision-faq-page details {position:relative;margin:0;padding:1.12rem 1.05rem;border-radius:10px;
    transition:background-color .27s,border-color .27s;}
  .vision-faq-page details:first-of-type {border-top:1px solid var(--line-soft);}
  .vision-faq-page details:hover {background:rgba(214,180,108,.035);}
  .vision-faq-page details[open] {background:linear-gradient(110deg,rgba(65,38,38,.26),rgba(18,12,13,.15));
    border-color:rgba(214,180,108,.19);}
  .vision-faq-page details[open] > :not(summary) {animation:vision-answer-in .34s var(--vision-ease) both;}
  @keyframes vision-answer-in {from{opacity:.3;translate:0 -5px;}to{opacity:1;translate:0 0;}}
  .vision-faq-page details summary {transition:color .22s;}
  .vision-faq-page details:is(:hover,[open]) summary {color:#f3dcad;}
  /* Terms: reading rhythm, not a moving document. */
  .vision-terms-page .terms {max-width:780px;}
  .vision-terms-page .terms h3 {position:relative;margin-top:2rem;padding:0 0 0 1rem;
    border-left:2px solid rgba(214,180,108,.3);transition:border-color .3s,color .3s;}
  .vision-terms-page .terms h3:hover {border-left-color:#dfbc80;color:#f6e5c3;}
  .vision-terms-page .terms p {line-height:1.82;max-width:74ch;}
  /* Account dashboard: cards and lists respond, controls remain static and usable. */
  .vision-account-dashboard .stat,.vision-admin-dashboard .stat {position:relative;overflow:hidden;
    transition:translate .33s var(--vision-ease),border-color .28s,box-shadow .32s;}
  .vision-account-dashboard .stat:is(:hover,:focus-within),.vision-admin-dashboard .stat:is(:hover,:focus-within) {
    translate:0 -3px;border-color:rgba(214,180,108,.35);box-shadow:0 18px 32px -25px #000;}
  .vision-account-dashboard .stat::after,.vision-admin-dashboard .stat::after {
    content:'';position:absolute;inset:auto 1rem 0 1rem;height:1px;
    background:linear-gradient(90deg,transparent,rgba(214,180,108,.45),transparent);
    scale:0 1;transition:scale .33s var(--vision-ease);}
  .vision-account-dashboard .stat:hover::after,.vision-admin-dashboard .stat:hover::after{scale:1 1;}
  .vision-account-dashboard .redeem-card {transition:border-color .3s,box-shadow .35s;}
  .vision-account-dashboard .redeem-card:focus-within {border-color:rgba(214,180,108,.45);
    box-shadow:0 0 0 1px rgba(214,180,108,.08),0 20px 36px -25px #000;}
  .vision-account-dashboard .table-wrap tbody tr,.vision-admin-dashboard .table-wrap tbody tr {transition:background-color .2s ease;}
  .vision-account-dashboard .table-wrap tbody tr:hover,.vision-admin-dashboard .table-wrap tbody tr:hover {
    background:rgba(214,180,108,.045);}
  .vision-account-dashboard .actions .btn {transition:border-color .2s,background-color .2s,translate .2s;}
  .vision-account-dashboard .actions .btn:hover {translate:0 -1px;}
  /* Gallery and buy box on the product page. */
  .product-layout .gallery-thumb img {transition:scale .38s var(--vision-ease);}
  .product-layout .gallery-thumb:hover img {scale:1.06;}
  .product-layout .buy-box,.cart-v2-summary {isolation:isolate;}
  .product-layout .buy-box:focus-within,.cart-v2-summary:focus-within {
    box-shadow:0 0 0 1px rgba(214,180,108,.28),0 24px 40px -28px #000;}
}
@media(max-width:640px) {
  .vision-faq-page details{padding:.85rem .65rem;}
  .vision-back-to-top{right:13px;bottom:13px;}
}
@media(prefers-reduced-motion:reduce) {
  .vision-motion-in,.vision-faq-page details[open] > :not(summary) {animation:none!important;opacity:1!important;translate:0 0!important;filter:none!important;}
  .vision-back-to-top {transition:none!important;translate:0 0!important;}
  .vision-reading-progress{box-shadow:none;}
  .vision-clips-page .clip-card,.vision-reviews-page .review,.vision-account-dashboard .stat,
  .vision-admin-dashboard .stat {transition:none!important;translate:0 0!important;}
}


/* Vision | Unified motion pass: clean type, responsive visual feedback.
   Deliberately no carousels, continuous text tickers or page-covering overlays. */
.vision-home-page .hero-copy h1,
.vision-shop-page .page-h1,
.vision-product-page .product-title,
.vision-clips-page .page-h1,
.vision-reviews-page .page-h1,
.vision-help-page .page-h1 {
  font-family:var(--font-body);
  font-weight:700;
  letter-spacing:-.049em;
}
.vision-home-page::after {
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  opacity:0;
  background:radial-gradient(400px circle at var(--vision-light-x,50%) var(--vision-light-y,50%),rgba(227,180,112,.105),transparent 76%);
  transition:opacity .42s ease;
}
.vision-home-page.vision-light-active::after {opacity:1}
.vision-cta-arrow {display:inline-block;transition:translate .26s var(--vision-ease)}
.vision-home-page .cta .btn-primary:is(:hover,:focus-visible) .vision-cta-arrow {translate:3px -3px}

/* Existing cards already had a glow shader; cursor coordinates now make it live. */
.vision-home-benefits .benefit-card {transition:translate .35s var(--vision-ease),border-color .3s ease,box-shadow .35s ease,transform .38s var(--vision-ease)}
.vision-home-benefits .benefit-card:is(:hover,:focus-within) {translate:0 -4px}
.vision-home-benefits .benefit-card.vision-light-active::before {opacity:1}

/* Real three-step sequence: a thin gold progress line draws in on scroll.
   The original timeline stays visible without JS or reduced-motion support. */
.vision-home-steps .steps li {z-index:1}
.vision-home-featured .section-head h2 {position:relative;display:table}
.vision-home-featured .section-head h2::after {
  content:"";
  position:absolute;bottom:-.35rem;left:0;
  width:60px;height:2px;
  background:linear-gradient(90deg,#e2c58b,rgba(211,153,72,.15));
  transform-origin:left center;transform:scaleX(1);
}
.vision-product-page .gallery-main:is(:hover,:focus-visible) {
  box-shadow:0 20px 58px -34px rgba(207,133,74,.42),0 0 0 1px rgba(214,180,108,.26);
}
.vision-product-page .gallery-main {transition:box-shadow .32s ease}
.vision-product-page .buy-box:focus-within {border-color:rgba(224,185,115,.46)}
.vision-shop-page .shop-search-input:focus-within {filter:drop-shadow(0 6px 15px rgba(203,155,88,.12))}
.vision-help-page .help-row:is(:hover,:focus-visible) .help-go {translate:5px 0;color:#eed09a}
.vision-help-page .help-go {transition:translate .28s var(--vision-ease),color .28s ease}
.vision-cart-page .cart-v2-line:is(:hover,:focus-within) {background:rgba(215,178,112,.035)}

@media (prefers-reduced-motion:no-preference) {
  .reveal-ready .vision-home-steps .steps::after {
    content:"";pointer-events:none;position:absolute;
    left:0;right:0;top:21px;height:2px;z-index:0;
    background:linear-gradient(90deg,rgba(223,190,125,.2),#e0bd7b,rgba(213,158,79,.6));
    transform:scaleX(0);transform-origin:left center;
    transition:transform 1.25s cubic-bezier(.18,.78,.22,1) .18s;
  }
  .reveal-ready .vision-home-steps .steps.is-in::after {transform:scaleX(1)}
  .vision-home-featured .section-head.vision-motion-in h2::after {
    animation:vision-line-draw .85s var(--vision-ease) .12s both;
  }
  @keyframes vision-line-draw {
    from {transform:scaleX(0);opacity:.25}
    to {transform:scaleX(1);opacity:1}
  }
  /* Keep actual content in view and give interactive sections distinct timings. */
  .vision-product-page .buy-box.vision-motion-in,
  .vision-cart-page .cart-v2-summary.vision-motion-in {
    animation-duration:.72s;
  }
  .vision-help-page .help-row.vision-motion-in,
  .vision-cart-page .cart-v2-line.vision-motion-in {
    animation-duration:.48s;
  }
}
@media (max-width:900px) and (prefers-reduced-motion:no-preference) {
  .reveal-ready .vision-home-steps .steps::after {
    top:0;bottom:0;left:21px;right:auto;width:2px;height:auto;
    transform-origin:top center;transform:scaleY(0);
  }
  .reveal-ready .vision-home-steps .steps.is-in::after {transform:scaleY(1)}
}
@media (prefers-reduced-motion:reduce) {
  .vision-home-page::after {opacity:0!important}
  .vision-home-benefits .benefit-card,
  .vision-home-benefits .benefit-card:is(:hover,:focus-within),
  .vision-help-page .help-go,
  .vision-cta-arrow {translate:none!important}
}