/* Shopicrew — custom overrides that complement Tailwind */

[x-cloak] { display: none !important; }

html { scroll-behavior: smooth; }

body {
    font-feature-settings: "cv02", "cv03", "cv04", "cv11", "ss01";
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* ---------- Display accent ---------- */
.font-display {
    font-feature-settings: "liga", "dlig";
    letter-spacing: -0.01em;
}
.font-display.italic { letter-spacing: -0.02em; }

/* ---------- Reveal-on-scroll ---------- */
.reveal {
    opacity: 0;
    transform: translateY(20px);
    transition:
        opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: opacity, transform;
}
.reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
}
/* Stagger when a parent has .reveal-stagger */
.reveal-stagger > .reveal:nth-child(1) { transition-delay: 0ms; }
.reveal-stagger > .reveal:nth-child(2) { transition-delay: 80ms; }
.reveal-stagger > .reveal:nth-child(3) { transition-delay: 160ms; }
.reveal-stagger > .reveal:nth-child(4) { transition-delay: 240ms; }
.reveal-stagger > .reveal:nth-child(5) { transition-delay: 320ms; }
.reveal-stagger > .reveal:nth-child(6) { transition-delay: 400ms; }

@media (prefers-reduced-motion: reduce) {
    .reveal { opacity: 1; transform: none; transition: none; }
    .animate-marquee, .animate-float, .animate-pulse { animation: none !important; }
    html { scroll-behavior: auto; }
}

/* ---------- Focus ---------- */
:where(a, button, input, select, textarea):focus-visible {
    outline: 2px solid #10b981;
    outline-offset: 3px;
    border-radius: 0.5rem;
}

/* ---------- Selection ---------- */
::selection      { background-color: #064e3b; color: #ecfdf5; }
.dark ::selection { background-color: #34d399; color: #022c22; }

/* ---------- Scrollbars ---------- */
::-webkit-scrollbar        { width: 10px; height: 10px; }
::-webkit-scrollbar-track  { background: transparent; }
::-webkit-scrollbar-thumb  { background: #d1d5db; border-radius: 6px; }
::-webkit-scrollbar-thumb:hover { background: #9ca3af; }
.dark ::-webkit-scrollbar-thumb { background: #334155; }
.dark ::-webkit-scrollbar-thumb:hover { background: #475569; }

/* ---------- Signature patterns ---------- */

/* Fine grid lines — evokes an editorial / blueprint feel */
.bg-grid {
    background-image:
        linear-gradient(to right,  rgba(15, 23, 42, 0.06) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(15, 23, 42, 0.06) 1px, transparent 1px);
    background-size: 56px 56px;
    mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, black 40%, transparent 100%);
    -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, black 40%, transparent 100%);
}
.dark .bg-grid {
    background-image:
        linear-gradient(to right,  rgba(148, 163, 184, 0.10) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(148, 163, 184, 0.10) 1px, transparent 1px);
}

/* Dot grid — softer alternative */
.bg-dots {
    background-image: radial-gradient(circle, rgba(15, 23, 42, 0.12) 1px, transparent 1px);
    background-size: 22px 22px;
    mask-image: radial-gradient(ellipse 70% 80% at 50% 50%, black 40%, transparent 100%);
    -webkit-mask-image: radial-gradient(ellipse 70% 80% at 50% 50%, black 40%, transparent 100%);
}
.dark .bg-dots {
    background-image: radial-gradient(circle, rgba(148, 163, 184, 0.18) 1px, transparent 1px);
}

/* Diagonal hatch — for page headers */
.bg-hatch {
    background-image: repeating-linear-gradient(
        -45deg,
        rgba(6, 78, 59, 0.04) 0,
        rgba(6, 78, 59, 0.04) 1px,
        transparent 1px,
        transparent 10px
    );
}
.dark .bg-hatch {
    background-image: repeating-linear-gradient(
        -45deg,
        rgba(52, 211, 153, 0.06) 0,
        rgba(52, 211, 153, 0.06) 1px,
        transparent 1px,
        transparent 10px
    );
}

/* Subtle grain — adds texture to dark gradients */
.noise::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0.4;
    mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.55 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

/* ---------- Marquee ---------- */
.marquee {
    display: flex;
    overflow: hidden;
    mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
    -webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
}
.marquee__track {
    display: flex;
    gap: 3rem;
    flex-shrink: 0;
    min-width: 100%;
    white-space: nowrap;
}

/* ---------- Fancy underline (hand-drawn feel) ---------- */
.underline-draw {
    position: relative;
    display: inline-block;
}
.underline-draw::after {
    content: '';
    position: absolute;
    left: -2%;
    right: -2%;
    bottom: 0.05em;
    height: 0.32em;
    background: #34d399;
    opacity: 0.35;
    z-index: -1;
    border-radius: 0.5em;
    transform: skewX(-6deg);
}
.dark .underline-draw::after { background: #10b981; opacity: 0.28; }

/* ---------- Button polish ---------- */
.btn-primary {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}
.btn-primary::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg, transparent 0%, rgba(255,255,255,0.18) 50%, transparent 100%);
    transform: translateX(-100%);
    transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
    z-index: -1;
}
.btn-primary:hover::before { transform: translateX(100%); }

/* ---------- Ticker-style numeric monospace look ---------- */
.num { font-variant-numeric: tabular-nums; font-feature-settings: "tnum", "zero"; }

/* ---------- Forms plugin dark-mode override ----------
   @tailwindcss/forms base styles have specificity (0,0,1) on bare selectors
   like `textarea`/`select`, and the Tailwind Play CDN injects utilities at
   varying positions relative to this file. Use !important so the dark bg
   wins deterministically across both light and dark modes. */
html.dark :is([type="text"], [type="email"], [type="url"], [type="password"],
               [type="number"], [type="search"], [type="tel"], textarea, select) {
    background-color: rgb(2 6 23) !important;      /* slate-950 */
    color: rgb(241 245 249) !important;             /* slate-100 */
    border-color: rgb(51 65 85);                     /* slate-700 */
}
html.dark :is(input, textarea, select)::placeholder { color: rgb(100 116 139); }