/* ============================================
   KALAMARI | Premium motion layer
   Loaded AFTER css/style.css on every page.
   Page transitions · scroll reveals · refined hover.
   Uses the brand :root tokens from style.css.
   ============================================ */

/* ---------- Page transition overlay (element created by js/animations.js) ---------- */
.page-transition {
    position: fixed;
    inset: 0;
    z-index: 100000;
    background: var(--red, #E71F27);
    display: flex;
    align-items: center;
    justify-content: center;
    transform: translateY(0);           /* covers by default; JS lifts it away on load */
    pointer-events: none;
    will-change: transform;
}
.page-transition__mark {
    width: min(42vw, 190px);
    height: auto;
    opacity: 0.97;
    animation: ptMark 1.2s var(--ease, ease) infinite alternate;
}
@keyframes ptMark {
    from { transform: translateY(0) scale(1); }
    to   { transform: translateY(-7px) scale(1.03); }
}

/* ---------- Scroll reveals ----------
   Gated on html.has-anim so that if JS never runs, content stays visible. */
html.has-anim [data-reveal] {
    opacity: 0;
    transform: translateY(32px);
    transition: opacity 0.9s var(--ease, ease), transform 0.9s var(--ease, ease);
    will-change: opacity, transform;
}
html.has-anim [data-reveal="fade"]  { transform: none; }
html.has-anim [data-reveal="left"]  { transform: translateX(-46px); }
html.has-anim [data-reveal="right"] { transform: translateX(46px); }
html.has-anim [data-reveal="clip"] {
    opacity: 1;
    transform: none;
    clip-path: inset(0 0 100% 0);
    transition: clip-path 1.05s var(--ease, ease);
    will-change: clip-path;
}
[data-reveal].is-in {
    opacity: 1 !important;
    transform: none !important;
    clip-path: inset(0 0 0 0) !important;
}

/* ---------- Refined product-card hover (deadbear-style lift) ---------- */
.pdp-related .product-card {
    transition: transform 0.35s var(--ease, ease), box-shadow 0.35s var(--ease, ease), border-color 0.35s var(--ease, ease);
}

/* ---------- Gallery: subtle zoom on the tee mockup ---------- */
.pdp-main:not(.has-design) { overflow: hidden; }
.pdp-main:not(.has-design) #pdpMainImg { transition: transform 0.65s var(--ease, ease); }
.pdp-main:not(.has-design):hover #pdpMainImg { transform: scale(1.05); }

/* ---------- PDP: pronounced scroll-in for the gallery + related cards ---------- */
/* main product image rises + scales in instead of a plain fade */
html.has-anim .pdp-gallery[data-reveal] {
    opacity: 0;
    transform: translateY(46px) scale(0.97);
    transition: opacity 1s var(--ease, ease), transform 1.05s cubic-bezier(0.22, 1, 0.36, 1);
}
/* each "You May Also Like" tee card flies up + scales in, staggered */
html.has-anim .pdp-related .product-card[data-reveal] {
    opacity: 0;
    transform: translateY(70px) scale(0.93);
    transition: opacity 0.7s var(--ease, ease), transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}
html.has-anim .pdp-gallery[data-reveal].is-in,
html.has-anim .pdp-related .product-card[data-reveal].is-in {
    opacity: 1 !important;
    transform: none !important;
}
/* gentle lift once the card has settled in */
html.has-anim .pdp-related .product-card[data-reveal].is-in:hover {
    transform: translateY(-8px) !important;
}

/* ---------- Respect reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
    .page-transition { display: none !important; }
    .page-transition__mark { animation: none !important; }
    html.has-anim [data-reveal] {
        opacity: 1 !important;
        transform: none !important;
        clip-path: none !important;
        transition: none !important;
    }
    .pdp-main:not(.has-design):hover #pdpMainImg { transform: none; }
}