/* Motion layer — two-product template. PRD site-two-product.prd.md, locked by Ravi 9 Oct 2026.
   Vanilla CSS only (CSP: no external libs). Every effect collapses under prefers-reduced-motion. */

/* Scroll reveal. Stagger with --rv-delay on siblings. */
.rv{opacity:0;transform:translateY(18px);transition:opacity .7s ease,transform .7s cubic-bezier(.22,.61,.36,1);transition-delay:var(--rv-delay,0ms)}
.rv.in{opacity:1;transform:none}

/* Ink band with warm glow accents (bento-dark precedent; no pure black, no blue). */
.ink-band{background:#3A2E26;color:#FBF7F1}
.ink-band h2,.ink-band h3{color:#FBF7F1}
.ink-band .product-muted{color:#D9B86A}
.ink-band a{color:#D9B86A}
.ink-glow{position:relative;overflow:hidden}
.ink-glow::before{content:"";position:absolute;top:-45%;right:-15%;width:560px;height:560px;background:radial-gradient(circle,rgba(181,138,60,.30),transparent 65%);pointer-events:none}
.ink-glow::after{content:"";position:absolute;left:-18%;bottom:-60%;width:460px;height:460px;background:radial-gradient(circle,rgba(244,200,168,.15),transparent 65%);pointer-events:none}

/* Floating product card with pointer tilt (JS sets the transform). */
.float-stage{perspective:900px}
.float-card{will-change:transform;animation:floaty 7s ease-in-out infinite;transform-style:preserve-3d}
.float-card.tilt-live{animation:none}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}

/* Factor bars fill when the parent gets .in. */
.factor{height:8px;border-radius:4px;background:#EEE3CE;overflow:hidden;margin:.35rem 0 .75rem}
.factor i{display:block;height:100%;width:0;background:#B58A3C;transition:width 1s cubic-bezier(.22,.61,.36,1) .35s}
.in .factor i{width:var(--w,50%)}

/* Engine marquee. Track holds two identical groups; translateX(-50%) loops seamlessly. */
.marquee{overflow:hidden}
.marquee-track{display:flex;width:max-content;animation:marquee 32s linear infinite}
.marquee-track .mq-group{display:flex;align-items:center;gap:2.75rem;padding:.85rem 1.375rem .85rem 0;white-space:nowrap}
.marquee-track .mq-group strong{font-weight:600;font-size:.8125rem;line-height:1;letter-spacing:.18em;text-transform:uppercase;color:#D9B86A}
.marquee-track .mq-group span{color:#F4C8A8;font-size:.8125rem;line-height:1}
@keyframes marquee{to{transform:translateX(-50%)}}

/* Typing caret and the citation glow. */
.caret::after{content:"▌";color:#B58A3C;animation:blink 1s steps(1) infinite;margin-left:2px}
@keyframes blink{50%{opacity:0}}
.cite-brand{color:#B58A3C;font-weight:600;transition:text-shadow .7s ease}
.cite-glow .cite-brand{text-shadow:0 0 18px rgba(181,138,60,.55)}

/* Score dial: circle draws itself when .in lands on .dial-wrap. r=85 → C≈534. */
.dial-arc{stroke-dasharray:534;stroke-dashoffset:534;transition:stroke-dashoffset 1.4s cubic-bezier(.22,.61,.36,1) .25s}
.in .dial-arc{stroke-dashoffset:var(--dial,534)}

/* Hover micro-lift on stage cards. */
.stages .stage{transition:transform .25s ease}
.stages .stage:hover{transform:translateY(-3px)}

@media (prefers-reduced-motion:reduce){
  .rv{opacity:1;transform:none;transition:none}
  .float-card{animation:none}
  .marquee-track{animation:none}
  .factor i{transition:none;width:var(--w,50%)}
  .dial-arc{transition:none;stroke-dashoffset:var(--dial,534)}
  .caret::after{content:none}
  .stages .stage{transition:none}
}

/* ---- Purchase UX rebuild (option A, 10 Oct 2026): segmented currency, price morph,
   fine-print consent, catalog grid, restrained tilt + button sheen. ---- */

/* Segmented currency control (global toggle and panel-local groups share it). */
.currency-toggle{display:inline-flex;gap:4px;padding:4px;border:1px solid #E4D7C2;border-radius:999px;background:#FFFDF9}
.currency-toggle label{position:relative;display:inline-flex;cursor:pointer}
.currency-toggle input{position:absolute;inset:0;opacity:0;cursor:pointer}
.currency-toggle input + span{display:inline-block;padding:.42rem 1.05rem;border-radius:999px;font-size:.8125rem;font-weight:600;letter-spacing:.06em;color:#6B5A4D;transition:background .2s ease,color .2s ease}
.currency-toggle input:checked + span{background:#B58A3C;color:#FBF7F1}
.currency-toggle input:focus-visible + span{outline:2px solid #B58A3C;outline-offset:2px}

/* Price morph: JS adds .price-out, swaps the text, removes it; the transition does the rest. */
[data-price]{display:inline-block;transition:opacity .15s ease,transform .15s ease,filter .15s ease}
[data-price].price-out{opacity:0;transform:translateY(6px);filter:blur(2px)}

/* Fine-print consent line (replaces the per-card checkbox gate). */
.fine-print{font-size:.78rem;line-height:1.5;color:#6B5A4D;margin:.65rem 0 0}
.fine-print a{color:#8A6A2F}

/* Alternate-currency hint under the big price. */
.product-alt{margin:.1rem 0 0;font-size:.875rem;color:#6B5A4D}

/* Catalog: three equal columns, bundle centered and highlighted. */
.catalog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem;align-items:stretch;perspective:900px}
.catalog-grid .product-panel{display:flex;flex-direction:column;margin:0;transition:transform .3s ease,box-shadow .3s ease;transform-style:preserve-3d;will-change:transform}
.catalog-grid .product-panel:hover{transform:translateY(-4px);box-shadow:0 16px 36px rgba(58,46,38,.10)}
.catalog-grid .card-foot{margin-top:auto}
.details-link{margin-top:.7rem;font-size:.85rem;color:#8A6A2F}
.bundle-card{border:1.5px solid #B58A3C;box-shadow:0 18px 44px rgba(58,46,38,.12)}
.bundle-card:hover{box-shadow:0 22px 50px rgba(58,46,38,.16)}
.bundle-badge{display:inline-block;align-self:flex-start;background:#B58A3C;color:#FBF7F1;font-size:.7rem;font-weight:600;letter-spacing:.09em;text-transform:uppercase;padding:.3rem .7rem;border-radius:999px;margin:0 0 .4rem}

/* Gold sheen sweep across primary buttons on hover (fine pointers only). */
@media (hover:hover) and (pointer:fine){
  .btn-primary{position:relative;overflow:hidden}
  .btn-primary::after{content:"";position:absolute;top:0;left:-80%;width:60%;height:100%;background:linear-gradient(105deg,transparent,rgba(251,247,241,.35),transparent);transform:skewX(-18deg);transition:left .6s ease}
  .btn-primary:hover::after{left:125%}
}

@media (max-width:960px){
  .catalog-grid{grid-template-columns:1fr}
}

@media (prefers-reduced-motion:reduce){
  [data-price]{transition:none}
  [data-price].price-out{opacity:1;transform:none;filter:none}
  .currency-toggle input + span{transition:none}
  .catalog-grid .product-panel{transition:none}
  .btn-primary::after{display:none}
}

/* ---- Catalog v2 (10 Oct 2026): aligned badge slot + footer baseline, darker
   bundle fill, per-tile preview drawer with real workspace screenshots. ---- */

/* Uniform badge slot: cards without the badge reserve the same top space so the
   three headings and taglines align across the row. */
.catalog-grid .product-panel{min-width:0}
.bundle-badge{line-height:1.2}
.bundle-badge-spacer{display:block;height:calc(.7rem*1.2 + .6rem + .4rem);margin:0}

/* Bundle card: darker cream fill to highlight; gold border stays. */
.bundle-card{background:linear-gradient(165deg,#F6EDE0 0%,#EFE2CC 55%,#E9D6B8 100%)}
.bundle-card:hover{background:linear-gradient(165deg,#F3E8D6 0%,#EBDCC0 55%,#E4CFAE 100%)}
.bundle-card .eyebrow{color:#8A6A2F}
.bundle-card .eyebrow::before{background:#8A6A2F}
.bundle-card .product-muted,.bundle-card .product-alt,.bundle-card .fine-print{color:#5F4F41}
.bundle-card .fine-print a,.bundle-card .details-link{color:#7A5D28}

/* Footer block: CTA, consent line, preview toggle, and details link pinned to
   the card bottom so all three cards end on the same baseline. */
.catalog-card .card-foot{display:flex;flex-direction:column;align-items:stretch}
.catalog-card .card-foot .product-cta{margin-top:.85rem}

/* Preview toggle + drawer: opens a FLOATING panel anchored below the clicked
   card only. The drawer is position:absolute so it does not participate in the
   grid row height — the clicked card lifts (shadow + z-index), siblings never move. */
.catalog-grid .catalog-card{position:relative}
.catalog-card.preview-open{z-index:45;box-shadow:0 24px 54px rgba(58,46,38,.18);border-bottom-color:transparent;border-bottom-left-radius:0;border-bottom-right-radius:0}
.preview-toggle{display:inline-flex;align-items:center;gap:.45rem;margin-top:.55rem;padding:0;border:0;background:none;font:inherit;font-size:.85rem;font-weight:600;color:#8A6A2F;cursor:pointer;text-align:left}
.preview-toggle:hover{color:#6B5222;text-decoration:underline}
.preview-toggle .chev{display:inline-block;font-size:.7rem;transition:transform .25s ease}
.preview-toggle[aria-expanded="true"] .chev{transform:rotate(90deg)}
.preview-drawer{position:absolute;top:100%;left:-1px;right:-1px;z-index:40;background:#FFFFFF;border:1px solid #E4D7C2;border-top:0;border-radius:0 0 var(--sp-radius,18px) var(--sp-radius,18px);box-shadow:0 24px 54px rgba(58,46,38,.18);padding:.65rem;overflow:hidden;opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .25s ease,transform .25s ease,visibility .25s ease}
.preview-drawer.open{opacity:1;visibility:visible;transform:none}
/* Bundle: the enlarged box continues the gold border and darker gradient. */
.bundle-card .preview-drawer{left:-1.5px;right:-1.5px;background:linear-gradient(180deg,#E9D6B8 0%,#E4CFAE 100%);border:1.5px solid #B58A3C;border-top:0}
.preview-strip{display:flex;gap:.6rem;overflow-x:auto;padding:.1rem .1rem .35rem;scroll-snap-type:x mandatory}
.preview-strip figure{margin:0;scroll-snap-align:start;flex:0 0 auto;width:min(330px,78vw)}
.preview-strip img{display:block;width:100%;height:auto;border:1px solid #E4D7C2;border-radius:10px;background:#FFFFFF}
.preview-strip figcaption{font-size:.72rem;color:#6B5A4D;margin-top:.3rem}
.bundle-card .preview-strip{border-top-color:#D9BE93}

@media (max-width:960px){
  .preview-strip figure{width:min(300px,82vw)}
}
@media (prefers-reduced-motion:reduce){
  .preview-toggle .chev{transition:none}
  .preview-drawer{transition:none}
  .preview-drawer{transform:none}
}