/* ThunderGum — local styles
   The heavy lifting (Tailwind utilities, glow classes, colors) comes from the
   external Magic Patterns CSS bundle linked in index.html. This file only adds
   things the static export needs: base font, smooth scrolling, the scroll-reveal
   transition, and the gentle floating animation for the product art. */

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    background: #0A0A0A;
    color: #fff;
    font-family: 'Inter', sans-serif;
    -webkit-font-smoothing: antialiased;
}

/* The header (top bar + nav) is sticky and sits in normal flow, so the hero
   follows it automatically — no manual top offset is needed anymore. */

/* ---- No horizontal overflow ----
   Some decorative layers are wider than the screen (e.g. a 600px blur circle in
   the bottom CTA that has no clipping of its own). On a phone that pushes the
   document wider than the viewport, leaving an unfilled black strip on the
   right and a sideways scroll. Use `overflow-x: clip` (NOT hidden) to clip it —
   `hidden` would turn body into a scroll container and break the sticky header. */
html,
body {
    overflow-x: clip;
    max-width: 100%;
}

/* ---- Small-screen heading sizes ----
   The hero column uses `items-start`, so it shrinks to fit its widest child —
   the huge "INSTANT" headline. At 72px that word is wider than a phone screen,
   which stretches the whole column past the edge and cuts off the paragraph and
   buttons. Scale the two oversized display headings down on phones so the
   headline fits and the column can size to the screen. clamp() keeps them fluid
   between a comfortable minimum and their original size. */
@media (max-width: 767px) {
    [data-id="element-59"] { /* hero "INSTANT BDE" */
        font-size: clamp(2.75rem, 15vw, 4.5rem);
    }

    [data-id="element-37"] { /* final CTA "BECOME THE ALPHA..." */
        font-size: clamp(2rem, 9vw, 3rem);
    }
    /* The hero is a CSS grid. On a phone its single column auto-sizes to its
     content's widest point, stretching past the screen. Pin the column to one
     screen-width track (minmax(0, 1fr)) and let its children shrink into it. */
    [data-id="element-54"] {
        grid-template-columns: minmax(0, 1fr);
    }

    [data-id="element-54"],
    [data-id="element-55"],
    [data-id="element-76"] {
        min-width: 0;
        max-width: 100%;
    }
}

/* Headings in the design use the Archivo Black display face */
h1, h2, h3 {
    font-family: 'Archivo Black', 'Inter', sans-serif;
}

/* ---- Scroll reveal ----
   Many blocks ship with an inline `opacity: 0` (they were faded in by the
   original animation library). script.js adds the `.is-visible` class when a
   block scrolls into view; this transition drives the fade/slide-in. */
.reveal {
    transition: opacity 0.7s ease, transform 0.7s ease;
}

    .reveal.is-visible {
        opacity: 1 !important;
        transform: none !important;
    }

/* ---- Hero / final-CTA "lightning strike" flicker ----
   The hero and the bottom "STOP BEING GOOD ENOUGH" section share a full-bleed
   yellow layer (element-97). Instead of a smooth pulse, drive it like a
   lightning strike: a rapid stutter of sharp flickers, then a faint pulse,
   then darkness before the next strike. The opacity jumps are intentionally
   abrupt (linear timing + tightly-spaced keyframes) so it reads as a flicker,
   not a fade. It sits behind the content (z-0), so only the background
   flashes — the text stays crisp. */
@keyframes tg-flash {
    /* --- strike: a couple of very soft, quick flickers --- */
    0% {
        opacity: 0;
    }

    3% {
        opacity: 0.06;
    }

    5% {
        opacity: 0.01;
    }

    7% {
        opacity: 0.09;
    }

    10% {
        opacity: 0;
    }
    /* --- almost-imperceptible pulse in between strikes --- */
    40% {
        opacity: 0;
    }

    48% {
        opacity: 0.03;
    }

    56% {
        opacity: 0;
    }
    /* --- long calm before the next strike --- */
    100% {
        opacity: 0;
    }
}

[data-id="element-97"] {
    background-color: #FFE600;
    mix-blend-mode: normal; /* normal blend so the yellow actually shows */
    animation: tg-flash 5.5s linear infinite; /* linear keeps the flicker sharp */
    will-change: opacity;
}

/* ---- Floating product art ----
   The two hero SVGs (lightning man + tin) gently bob in the original. */
@keyframes tg-float {
    0%, 100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-12px);
    }
}

.tg-float {
    animation: tg-float 4s ease-in-out infinite;
}

.tg-float-tilt {
    animation: tg-float 5s ease-in-out infinite;
}

/* ---- Mobile hamburger menu ----
   The prebuilt Tailwind bundle is purged to only the classes the original page
   used, so utilities I added (`md:hidden`) have no rule. Define the responsive
   show/hide here with real media queries instead.
     - Below 768px: show the hamburger; the dropdown is toggled by script.js.
     - 768px and up: hide the hamburger and force the dropdown off, so it can
       never appear on desktop where the normal nav links are shown. */
#mobile-menu-toggle {
    display: inline-flex;
}

@media (min-width: 768px) {
    #mobile-menu-toggle {
        display: none;
    }

    #mobile-menu {
        display: none !important;
    }
}

/* When the dropdown opens, script.js sets a top margin on <main> equal to the
   menu's height so the hero is pushed down instead of being covered. This
   transition makes that shift smooth. */
[data-id="element-295"] {
    transition: margin-top 0.25s ease;
}

/* ---- FAQ accordion ----
   Smoothly collapse/expand the answer panels toggled by script.js. */
.faq-panel {
    overflow: hidden;
    height: 0;
    opacity: 0;
    transition: height 0.3s ease, opacity 0.3s ease;
}

    .faq-panel.is-open {
        opacity: 1;
    }