/* ============================================================
   JUST T-SHIRTS — enhance.css
   Additive premium layer. Safe to load after the core styles.
   ============================================================ */

/* ---------- Scroll reveal ---------- */
[data-reveal]{opacity:0;transform:translateY(22px);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1)}
[data-reveal].in{opacity:1;transform:none}
[data-reveal-stagger] > *{opacity:0;transform:translateY(22px);transition:opacity .6s cubic-bezier(.2,.7,.2,1),transform .6s cubic-bezier(.2,.7,.2,1)}
[data-reveal-stagger].in > *{opacity:1;transform:none}
[data-reveal-stagger].in > *:nth-child(1){transition-delay:.04s}
[data-reveal-stagger].in > *:nth-child(2){transition-delay:.10s}
[data-reveal-stagger].in > *:nth-child(3){transition-delay:.16s}
[data-reveal-stagger].in > *:nth-child(4){transition-delay:.22s}
[data-reveal-stagger].in > *:nth-child(5){transition-delay:.28s}
[data-reveal-stagger].in > *:nth-child(6){transition-delay:.34s}
[data-reveal-stagger].in > *:nth-child(7){transition-delay:.40s}
[data-reveal-stagger].in > *:nth-child(8){transition-delay:.46s}

/* ---------- Hero print-in entrance ---------- */
.hero h1 .ink{
  background-image:radial-gradient(rgba(255,255,255,.0) 1.3px,transparent 1.4px);
}
.hero.printin h1{animation:heroRise .9s cubic-bezier(.2,.7,.2,1) both}
.hero.printin .hero__kicker{animation:heroRise .7s cubic-bezier(.2,.7,.2,1) .05s both}
.hero.printin p.lead{animation:heroRise .8s cubic-bezier(.2,.7,.2,1) .12s both}
.hero.printin .hero__cta{animation:heroRise .8s cubic-bezier(.2,.7,.2,1) .2s both}
.hero.printin .hero__meta{animation:heroRise .8s cubic-bezier(.2,.7,.2,1) .28s both}
.hero.printin .range-tile{animation:tilePrint .7s cubic-bezier(.2,.7,.2,1) both}
.hero.printin .range-tile:nth-child(1){animation-delay:.18s}
.hero.printin .range-tile:nth-child(2){animation-delay:.24s}
.hero.printin .range-tile:nth-child(3){animation-delay:.30s}
.hero.printin .range-tile:nth-child(4){animation-delay:.36s}
.hero.printin .range-tile:nth-child(5){animation-delay:.42s}
.hero.printin .range-tile:nth-child(6){animation-delay:.48s}
.hero.printin .range-tile:nth-child(7){animation-delay:.54s}
@keyframes heroRise{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
@keyframes tilePrint{from{opacity:0;transform:translateY(16px) scale(.92);filter:blur(3px)}to{opacity:1;transform:none;filter:none}}

/* ---------- Toast ---------- */
.toast-wrap{position:fixed;left:50%;bottom:28px;transform:translateX(-50%);z-index:120;display:flex;flex-direction:column;gap:.6rem;align-items:center;pointer-events:none}
.toast{display:flex;align-items:center;gap:.7rem;background:var(--ink);color:#fff;border-radius:999px;
  padding:.7rem 1.2rem .7rem .8rem;box-shadow:0 16px 40px rgba(6,40,58,.32);font-family:'Archivo';font-weight:700;font-size:.92rem;
  transform:translateY(20px) scale(.96);opacity:0;transition:all .4s cubic-bezier(.2,.7,.2,1);pointer-events:auto}
.toast.show{transform:none;opacity:1}
.toast__ic{width:30px;height:30px;border-radius:50%;background:var(--c-polos);display:grid;place-items:center;flex-shrink:0}
.toast__ic svg{width:17px;height:17px;color:#fff}
.toast a{color:var(--brand-bright);text-decoration:underline;text-underline-offset:2px;margin-left:.3rem}

/* ---------- Designer realism ---------- */
.dz-stage-wrap{position:relative}
/* fabric shading + soft drop under the garment */
#dzStage::after{content:"";position:absolute;left:18%;right:18%;bottom:4%;height:7%;
  background:radial-gradient(ellipse at center,rgba(6,40,58,.18),transparent 70%);z-index:0;pointer-events:none}
#dzGarment{z-index:1}
#dzStage .gmt-svg{filter:drop-shadow(0 18px 26px rgba(6,40,58,.16))}
/* the printable area guide */
.dz-canvas{z-index:2;outline:1.5px dashed rgba(6,40,58,.22);outline-offset:0;border-radius:4px;
  background:linear-gradient(rgba(0,0,0,.015),rgba(0,0,0,.015))}
.dz-canvas::before{content:"Printable area";position:absolute;top:-20px;left:0;font-family:'Archivo';font-weight:700;
  font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;color:rgba(6,40,58,.4)}
.dz-canvas:empty::after{content:"Add text or upload art";position:absolute;inset:0;display:grid;place-items:center;
  color:rgba(6,40,58,.32);font-family:'Archivo';font-weight:700;font-size:.82rem}
/* uploaded artwork prints into the fabric */
.dz-art img{mix-blend-mode:multiply}
.dz-art .dz-text{text-shadow:0 1px 0 rgba(0,0,0,.04)}
/* 3D flip when switching front/back */
#dzStage{transform-style:preserve-3d;transition:transform .5s cubic-bezier(.4,0,.2,1)}
#dzStage.flip{transform:rotateY(90deg)}

/* ---------- Bulk savings meter ---------- */
.savings{margin-top:.9rem;background:#f3f9fd;border:1px solid #d9ecf7;border-radius:var(--r-sm);padding:.8rem .9rem}
.savings__top{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:.5rem}
.savings__top b{font-family:'Archivo';font-weight:800;color:var(--brand-deep);font-size:.9rem}
.savings__pct{font-family:'Anton';font-size:1.3rem;color:var(--brand);line-height:1}
.savings__bar{height:9px;border-radius:99px;background:#dcebf4;overflow:hidden;position:relative}
.savings__fill{position:absolute;inset:0 100% 0 0;background:linear-gradient(90deg,var(--brand-bright),var(--brand));border-radius:99px;transition:right .6s cubic-bezier(.2,.7,.2,1)}
.savings__ticks{display:flex;justify-content:space-between;margin-top:.4rem;font-size:.62rem;color:var(--text-faint);font-weight:700;font-family:'Archivo'}
.savings__ticks span.hit{color:var(--brand)}

/* ---------- Product page sticky mobile CTA ---------- */
.pd-sticky{position:fixed;left:0;right:0;bottom:0;z-index:70;background:#fff;border-top:1px solid var(--line);
  box-shadow:0 -8px 24px rgba(6,40,58,.1);padding:.7rem var(--gut);display:none;align-items:center;gap:1rem}
.pd-sticky b{font-family:'Anton';font-size:1.3rem;color:var(--ink)}
.pd-sticky .btn{margin-left:auto}
@media (max-width:860px){.pd-sticky.on{display:flex}}

@media (prefers-reduced-motion:reduce){
  [data-reveal],[data-reveal-stagger] > *{opacity:1!important;transform:none!important}
  .hero.printin *{animation:none!important}
  #dzStage{transition:none}
}