/* ============================================================
   A India Print House — shared animation styles
   Linked by premium-playing-cards.html and
   promotional-playing-cards.html so both stay identical.
   Relies on CSS variables defined in each page's :root
   (--foil-gold, --paper-cream, --font-sans, --ease-out, …).
   ============================================================ */

/* ---- Eyebrow: always inline-block so RN underline hugs the text, not the full row ---- */
/* Overrides pages that declare display:block in their inline <style>.
   animations.css loads after the inline block so same-specificity wins here. */
.eyebrow { display: inline-block; }

/* ---- Dark concentric-ring backdrop behind transparent product images ----
   Transparent product-box PNGs (KLICK, Paper Matt, etc.) otherwise float on
   flat white/black. This patterned backdrop shows through their transparency
   and is harmlessly hidden behind opaque photo images, so every page matches
   the look of the beer-budies / roya pattern images. Loaded after each page's
   inline <style>, so it overrides the plain backgrounds.
   Applies to deck cards (dark section) and the heritage media frame. */
.deck-card,
.media-frame {
    background-color: #0e1016;
    background-image:
        repeating-radial-gradient(circle at 50% 45%,
            rgba(255, 255, 255, 0.05) 0px,
            rgba(255, 255, 255, 0.05) 1.5px,
            transparent 1.5px,
            transparent 18px),
        radial-gradient(circle at 50% 42%, #161922 0%, #0a0b0f 72%);
    background-position: center;
}

/* ---- Mobile overlay: Collection sub-list ---- */
.no-collection-group {
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    cursor: default;
    pointer-events: all;
}
.no-collection-head {
    display: flex;
    align-items: center;
    gap: 20px;
    font-family: var(--idx-serif);
    font-size: clamp(36px, 6vw, 72px);
    font-weight: 500;
    color: var(--ivory);
    line-height: 1.1;
    transition: color .3s;
}
.no-collection-head:hover { color: var(--gold); }
.no-collection-links {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding-left: calc(20px + 1.5em + 20px); /* align with the text, past the index number */
    margin-top: 8px;
}
.no-col-link {
    font-family: var(--font-sans);
    font-size: 15px;
    letter-spacing: .06em;
    color: var(--ivory-dim);
    padding: 5px 0;
    transition: color .25s, transform .25s var(--ease-out);
    display: block;
}
.no-col-link:hover { color: var(--gold); transform: translateX(8px); }

/* ---- Lenis smooth scroll ---- */
html.lenis,
html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }
.lenis.lenis-scrolling iframe { pointer-events: none; }

/* ---- Header "Collection" hover dropdown ---- */
.hdr-dropdown {
    position: relative;
    display: flex;
    align-items: center;
}

.hdr-caret {
    font-size: 13px;
    margin-left: 6px;
    display: inline-block;
    transition: transform .45s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.hdr-dropdown:hover .hdr-caret,
.hdr-dropdown:focus-within .hdr-caret { transform: rotate(180deg); }

/* invisible bridge keeps menu reachable while cursor crosses the gap */
.hdr-dropdown::after {
    content: '';
    position: absolute;
    top: 100%;
    left: -12px;
    right: -12px;
    height: 18px;
}

/* ── PANEL ──────────────────────────────────────────────────── */
/* Closed (default) — scale collapsed from top, faded out */
.hdr-menu {
    position: absolute;
    top: calc(100% + 16px);
    left: 50%;
    transform: translateX(-50%) translateY(-6px) scaleY(0.9);
    transform-origin: top center;
    min-width: 260px;
    background: rgba(8, 8, 10, 0.97);
    backdrop-filter: blur(20px) saturate(160%);
    -webkit-backdrop-filter: blur(20px) saturate(160%);
    border: 1px solid rgba(192, 33, 37, 0.5);
    border-radius: 14px;
    padding: 8px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    box-shadow:
        0 8px 24px rgba(0, 0, 0, 0.3),
        0 24px 56px rgba(0, 0, 0, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.04);
    /* CLOSE transition — quick ease-in collapse, visibility waits for fade */
    transition:
        opacity    .22s ease-in,
        transform  .25s ease-in,
        visibility  0s linear .22s;
    z-index: 950;
}

/* Open — spring out from the trigger */
.hdr-dropdown:hover .hdr-menu,
.hdr-dropdown:focus-within .hdr-menu {
    opacity: 1;
    visibility: visible;
    pointer-events: all;
    transform: translateX(-50%) translateY(0) scaleY(1);
    /* OPEN transition — bouncy ease-out expand, visibility instant */
    transition:
        opacity    .36s cubic-bezier(0.16, 1, 0.3, 1),
        transform  .42s cubic-bezier(0.16, 1, 0.3, 1),
        visibility  0s linear 0s;
}

/* ── ITEMS ──────────────────────────────────────────────────── */
/* Closed (default) — items are invisible, shifted down slightly.
   On CLOSE they reverse-stagger: item 5 exits first (no delay),
   item 1 exits last (longest delay) — last in, first out. */
.hdr-menu-link {
    display: block;
    padding: 11px 16px;
    font-size: 13px;
    letter-spacing: .04em;
    color: rgba(255, 255, 255, 0.82);
    border-radius: 9px;
    white-space: nowrap;
    opacity: 0;
    transform: translateY(5px);
    /* CLOSE: fast fade, reverse stagger delays set per nth-child below */
    transition:
        opacity    .16s ease-in,
        transform  .16s ease-in,
        background .22s var(--ease-out),
        color      .22s;
}

/* Reverse stagger on close (item 1 lingers longest so order feels natural) */
.hdr-menu-link:nth-child(1) { transition-delay: .14s; }
.hdr-menu-link:nth-child(2) { transition-delay: .12s; }
.hdr-menu-link:nth-child(3) { transition-delay: .10s; }
.hdr-menu-link:nth-child(4) { transition-delay: .08s; }
.hdr-menu-link:nth-child(5) { transition-delay: .06s; }
.hdr-menu-link:nth-child(6) { transition-delay: .04s; }
.hdr-menu-link:nth-child(7) { transition-delay: .02s; }
.hdr-menu-link:nth-child(8) { transition-delay:   0s; }

/* Open — items cascade in top-to-bottom after panel has expanded */
.hdr-dropdown:hover .hdr-menu .hdr-menu-link,
.hdr-dropdown:focus-within .hdr-menu .hdr-menu-link {
    opacity: 1;
    transform: translateY(0);
    transition:
        opacity    .30s cubic-bezier(0.16, 1, 0.3, 1),
        transform  .34s cubic-bezier(0.16, 1, 0.3, 1),
        background .22s var(--ease-out),
        color      .22s;
}
.hdr-dropdown:hover .hdr-menu .hdr-menu-link:nth-child(1),
.hdr-dropdown:focus-within .hdr-menu .hdr-menu-link:nth-child(1) { transition-delay: .08s; }
.hdr-dropdown:hover .hdr-menu .hdr-menu-link:nth-child(2),
.hdr-dropdown:focus-within .hdr-menu .hdr-menu-link:nth-child(2) { transition-delay: .13s; }
.hdr-dropdown:hover .hdr-menu .hdr-menu-link:nth-child(3),
.hdr-dropdown:focus-within .hdr-menu .hdr-menu-link:nth-child(3) { transition-delay: .18s; }
.hdr-dropdown:hover .hdr-menu .hdr-menu-link:nth-child(4),
.hdr-dropdown:focus-within .hdr-menu .hdr-menu-link:nth-child(4) { transition-delay: .22s; }
.hdr-dropdown:hover .hdr-menu .hdr-menu-link:nth-child(5),
.hdr-dropdown:focus-within .hdr-menu .hdr-menu-link:nth-child(5) { transition-delay: .26s; }
.hdr-dropdown:hover .hdr-menu .hdr-menu-link:nth-child(6),
.hdr-dropdown:focus-within .hdr-menu .hdr-menu-link:nth-child(6) { transition-delay: .30s; }
.hdr-dropdown:hover .hdr-menu .hdr-menu-link:nth-child(7),
.hdr-dropdown:focus-within .hdr-menu .hdr-menu-link:nth-child(7) { transition-delay: .34s; }
.hdr-dropdown:hover .hdr-menu .hdr-menu-link:nth-child(8),
.hdr-dropdown:focus-within .hdr-menu .hdr-menu-link:nth-child(8) { transition-delay: .38s; }

.hdr-menu-link:hover {
    background: rgba(192, 33, 37, 0.16);
    color: var(--gold);
    transform: translateX(5px);
}
.hdr-menu-link.is-current {
    color: var(--gold);
    background: rgba(192, 33, 37, 0.09);
}

/* ---- tsParticles hero layer (above image/overlay, below text) ---- */
#hero-particles {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
}
#hero-particles canvas { display: block; }

/* ---- Three.js floating 3D card showcase section ---- */
.card-showcase {
    position: relative;
    min-height: 88vh;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: radial-gradient(circle at 50% 38%, #1d1d20 0%, #0a0a0c 72%);
}
.card-showcase__canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    pointer-events: none;
}
.card-showcase__content {
    position: relative;
    z-index: 3;
    text-align: center;
    pointer-events: none;
}
/* Hug the text so the Rough Notation underline fits the words, not the row */
.card-showcase__content .eyebrow { display: inline-block; }
.card-showcase__title { color: var(--paper-cream); margin-bottom: 20px; }
.card-showcase__text {
    color: rgba(255, 255, 255, 0.62);
    max-width: 560px;
    margin: 0 auto;
    font-family: var(--font-sans);
    font-size: 18px;
    line-height: 1.6;
}

/* ---- Locomotive in-view reveals (additive accents) ---- */
.benefit__title { position: relative; padding-bottom: 8px; }
.benefit__title[data-scroll]::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    height: 2px;
    width: 34px;
    background: var(--foil-gold);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform .7s var(--ease-out);
}
.benefit__title[data-scroll].is-inview::after { transform: scaleX(1); }

.section-head__rule[data-scroll] {
    width: 0;
    transition: width .9s var(--ease-out);
}
.section-head__rule[data-scroll].is-inview { width: 96px; }

/* ---- Lottie accent (Custom section) ---- */
.custom__lottie {
    width: 120px;
    height: 120px;
    margin: 0 auto 32px;
    display: block;
}

/* ---- Atropos 3D tilt wrappers (deck cards) ---- */
.deck-atropos { width: 100%; }
.deck-atropos .atropos-inner {
    border-radius: 0.25rem;
    overflow: hidden;
}

/* ---- Granim animated gradient behind the CTA ---- */
.cta { position: relative; }
#cta-granim {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
}
.cta > .container {
    position: relative;
    z-index: 1;
}

@media (max-width: 768px) {
    .custom__lottie { width: 96px; height: 96px; }
}

@media (prefers-reduced-motion: reduce) {
    .card-showcase__canvas { display: none; }
    .benefit__title[data-scroll]::after { transform: scaleX(1); transition: none; }
    .section-head__rule[data-scroll] { width: 96px; transition: none; }
}

/* ============================================================
   MOBILE NAV OVERLAY — fixes mirrored from the home page's style.css.
   Selectors are id-scoped (#nav-overlay) so they win over each page's inline
   <style> copy of the overlay CSS regardless of load order.
   ============================================================ */

/* align-items:center CLIPPED a menu taller than the viewport — with the ten
   collection links open on a phone the top entries were unreachable. flex-start
   + a scroll container, centring moved to .no-content's auto block margins, so
   it still centres when it fits and scrolls when it doesn't. */
#nav-overlay {
    align-items: flex-start;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}

#nav-overlay .no-content {
    margin-block: auto;
    /* Each page hardcodes padding-top:80px at <=900px, but the header is 100px
       tall until 600px — the first link ("01 Home") sat behind the header bar.
       --hdr-h tracks .hdr-wrap's height; see the responsive layer below. */
    padding-top: calc(var(--hdr-h, 100px) + 24px);
}

/* fixed, not absolute: the overlay scrolls now, and an absolute panel would
   scroll up with it and expose the page underneath. */
#nav-overlay .no-bg-panel {
    position: fixed;
}

#nav-overlay .no-close {
    position: fixed;
    z-index: 3;
}

/* ---- Collection accordion: collapsed until the row is tapped ----
   (initNav in animations.js toggles .open on the group.) */
#nav-overlay .no-collection-head {
    cursor: pointer;
}

#nav-overlay .no-collection-head::after {
    content: '▾';
    font-size: .42em;
    color: var(--gold);
    margin-left: -.35em;
    transition: transform .35s var(--ease-out);
}

#nav-overlay .no-collection-group.open .no-collection-head::after {
    transform: rotate(180deg);
}

#nav-overlay .no-collection-links {
    max-height: 0;
    margin-top: 0;
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    transition: max-height .45s var(--ease-out), margin-top .45s var(--ease-out),
        opacity .3s, visibility .45s;
}

/* Cap, not a real height — comfortably above the ten links so the list is never
   clipped; the visible reveal stops at the content height. */
#nav-overlay .no-collection-group.open .no-collection-links {
    max-height: 640px;
    margin-top: 8px;
    opacity: 1;
    visibility: visible;
}

body .floating-social-group {
    transition: opacity .3s var(--ease-out);
}

@media (max-width: 900px) {
    /* The burger itself turns into an X and sits above the overlay
       (#site-header is z-index 900 vs 890), so this second ✕ was both redundant
       and stranded underneath the header bar. */
    #nav-overlay .no-close {
        display: none;
    }

    /* Keep the suit ornament a tight row rather than a grid stretched across
       the stacked menu. */
    #nav-overlay .no-suits-grid {
        grid-template-columns: repeat(4, max-content);
        justify-content: flex-start;
        gap: 16px;
        font-size: 26px;
    }

    /* The social rail is z-index 999, i.e. on top of the open menu. */
    body.nav-open .floating-social-group {
        opacity: 0;
        pointer-events: none;
    }
}

/* ============================================================
   RESPONSIVE LAYER — product pages + About Us
   Every page that links this file uses the same shell (#site-header lockup,
   .hero, .section/.container grids, footer) and the same inline <style> copy of
   its layout, whose media queries stop at 768px. This file loads after that
   inline block, so same-specificity rules here win; the two inline blocks that
   load *after* it only set deck-card/media-frame decoration (backgrounds and
   border-image), never geometry, so nothing below is overridden.
   Tiers: 900 = burger row, 768 = hero/section rhythm, 600 = header + type,
   400 = smallest phones.
   ============================================================ */

/* Height of .hdr-wrap, so anything sitting under the fixed header can be
   positioned off it instead of a magic number. Kept in step with the .hdr-wrap
   heights in the 600px / 400px tiers below. */
:root {
    --hdr-h: 100px;
}

@media (max-width: 900px) {
    /* .hdr-nav (margin:0 auto) and .hdr-btn are display:none here, and nothing
       else pushes the burger over — it sat glued to the logo instead of the
       right edge of the header. */
    .hdr-burger {
        margin-left: auto;
    }
}

@media (max-width: 768px) {
    /* height:100vh + overflow:hidden clipped the hero once the title wrapped to
       four or five lines on a phone; grow instead, and pad past the fixed
       header rather than nudging with .hero__content's margin-top. svh keeps
       mobile browser chrome out of the calculation. */
    .hero {
        height: auto;
        min-height: 100vh;
        min-height: 100svh;
        padding-block: 124px 88px;
    }

    .hero__content {
        margin-top: 0;
    }

    .hero__text {
        font-size: 16px;
    }

    /* 72% of a full-width single column left a lopsided gap beside the image
       once .heritage__grid collapsed to one column. */
    .media-frame {
        width: min(100%, 460px);
        margin-inline: auto;
    }

    /* Each page's inline block does `.apps__media { display: none }` here, so
       the Applications product shot vanished entirely below 769px. Bring it
       back under the list, roughly square like the 600x600 desktop panel — a
       real height (not aspect-ratio) so the img's height:100% still resolves. */
    .apps__media {
        display: block;
        width: min(100%, 420px);
        height: min(420px, 92vw);
        margin-inline: auto;
    }

    /* 80px between the list and the panel is a desktop column gutter. */
    .apps__grid {
        gap: 40px;
    }

    .card-showcase {
        min-height: 70vh;
    }

    .card-showcase__text {
        font-size: 16px;
    }

    .section-head {
        margin-bottom: 44px;
    }

    .durable__grid {
        gap: 32px;
    }

    .why__benefits-grid {
        row-gap: 32px;
    }

    .btn-cream {
        padding: 18px 40px;
    }

    .btn-gold {
        padding: 20px 44px;
    }
}

@media (max-width: 600px) {
    /* ---- Header lockup ----
       100px tall with a 72px logo and two 25px nowrap words came to ~340px
       before the burger, which overflowed the header on a phone. */
    .hdr-wrap {
        height: 78px;
    }

    .hdr-logo {
        gap: 10px;
        min-width: 0;
    }

    .hdr-logo-img {
        height: 54px;
        width: 54px;
    }

    .hdr-logo-text {
        padding-left: 10px;
        gap: 6px;
    }

    .hlt-main,
    .hlt-sub {
        font-size: 19px;
    }

    /* ---- Rhythm + type ---- */
    :root {
        --hdr-h: 78px;
        --section-gap: 64px;
        --margin-desktop: 20px;
    }

    .section--padded {
        padding-inline: 20px;
    }

    .hero {
        padding-block: 102px 76px;
    }

    .hero__title {
        font-size: 34px;
    }

    .hero__eyebrow {
        letter-spacing: 0.3em;
    }

    .display-lg {
        font-size: 30px;
    }

    .headline-lg {
        font-size: 25px;
    }

    .headline-md {
        font-size: 21px;
    }

    .body-lg {
        font-size: 16px;
    }

    .section-head {
        margin-bottom: 36px;
    }

    .card-showcase {
        min-height: 62vh;
    }

    /* ---- Cards / panels ---- */
    .bento__cell {
        padding: 24px;
    }

    .bento__cell--feature {
        padding: 28px;
    }

    .bento__meta {
        margin-top: 24px;
        padding-top: 24px;
        /* label + tick in a space-between row; let it wrap rather than push the
           card wider on a 320px screen. */
        flex-wrap: wrap;
        gap: 8px;
    }

    .durable__grid {
        gap: 24px;
    }

    .why__quote blockquote {
        border-left-width: 3px;
        padding: 12px 0 12px 20px;
    }

    .custom__icon {
        font-size: 44px;
        margin-bottom: 20px;
    }

    .custom__quote {
        margin-bottom: 32px;
    }

    .cta__title {
        margin-bottom: 28px;
    }

    .cta__contacts {
        margin-bottom: 40px;
    }

    /* ---- Footer ---- */
    .footer-body {
        padding: 44px 20px 32px;
    }

    .ft-links-cols {
        gap: 24px;
    }

    .fbn-inner {
        font-size: clamp(40px, 12vw, 140px);
    }
}

@media (max-width: 400px) {
    #site-header {
        padding: 0 14px;
    }

    .hdr-wrap {
        height: 70px;
    }

    .hdr-logo {
        gap: 8px;
    }

    .hdr-logo-img {
        height: 44px;
        width: 44px;
    }

    .hdr-logo-text {
        padding-left: 8px;
        gap: 4px;
    }

    .hlt-main,
    .hlt-sub {
        font-size: 15px;
    }

    .hdr-burger {
        padding: 8px 0 8px 8px;
    }

    :root {
        --hdr-h: 70px;
        --margin-desktop: 14px;
    }

    .section--padded {
        padding-inline: 14px;
    }

    .hero {
        padding-block: 92px 68px;
    }

    .hero__content {
        padding-inline: 14px;
    }

    .hero__title {
        font-size: 28px;
    }

    .hero__eyebrow {
        font-size: 11px;
        letter-spacing: 0.24em;
    }

    /* 64px of side padding on .btn-gold left barely 150px for the label. */
    .btn-cream {
        padding: 16px 28px;
        font-size: 13px;
    }

    .btn-gold {
        padding: 18px 30px;
        font-size: 13px;
    }

    .bento__cell,
    .bento__cell--feature {
        padding: 20px;
    }

    .footer-body {
        padding: 36px 14px 28px;
    }
}