/* ============================================
   17Sector — Premium Gourmet Popcorn
   Mobile-First Responsive Stylesheet
   ============================================ */

:root {
    --red: #C41E3A;
    --red-dark: #8B0000;
    --red-light: #E8302A;
    --gold: #FFD700;
    --gold-dark: #DAA520;
    --cream: #FFF8DC;
    --cream-dark: #F5DEB3;
    --caramel: #D4A574;
    --bg: #1A0A0A;
    --bg-alt: #140808;
    --txt: #FFF8DC;
    --txt2: #D4A574;
    --txt3: #9B8B7A;
    --font-d: 'Passion One', cursive;
    --font-b: 'DM Sans', sans-serif;
    --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
    font-family: var(--font-b);
    background: var(--bg);
    color: var(--txt);
    overflow-x: hidden;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

#physics-canvas {
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    min-height: 100%;
    z-index: 50;
    pointer-events: auto;
    touch-action: pan-y;
}

.skip-link {
    position: absolute; top: -100%; left: 50%; transform: translateX(-50%);
    background: var(--red); color: #fff; padding: .8rem 1.5rem;
    border-radius: 0 0 8px 8px; z-index: 1000; font-weight: 600; text-decoration: none;
}
.skip-link:focus { top: 0; }
.sr-only { position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0; }

/* HEADER */
.site-header {
    position: fixed; top: 0; left: 0; width: 100%; z-index: 100;
    background: rgba(26,10,10,0.85);
    backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid rgba(196,30,58,0.2);
}
.nav-container { max-width:1200px; margin:0 auto; padding:.8rem 1.2rem; display:flex; align-items:center; justify-content:space-between; }
.logo-link { text-decoration:none; display:flex; align-items:center; }
.logo-img { height:40px; width:auto; }
.nav-cta {
    display:inline-flex; align-items:center; padding:.55rem 1.2rem;
    background:var(--red); color:var(--cream); text-decoration:none;
    font-family:var(--font-b); font-weight:600; font-size:.85rem;
    border-radius:100px; transition:all .3s var(--ease); letter-spacing:.02em;
}
.nav-cta:hover { background:var(--red-light); transform:translateY(-1px); box-shadow:0 4px 20px rgba(196,30,58,.4); }

/* HERO */
.hero {
    position:relative; z-index:1; min-height:100vh;
    display:flex; flex-direction:column-reverse; justify-content:center; align-items:center;
    padding:6rem 1.5rem 2rem; gap:1rem;
    pointer-events:none;
}
.hero * { pointer-events:none; }

.hero-content { max-width:600px; text-align:center; }

.hero-badge {
    display:inline-flex; align-items:center; gap:.5rem;
    padding:.4rem 1rem; background:rgba(196,30,58,.15);
    border:1px solid rgba(196,30,58,.3); border-radius:100px;
    font-size:.7rem; font-weight:600; color:var(--red-light);
    letter-spacing:.05em; text-transform:uppercase; margin-bottom:1.2rem;
    animation:fadeUp .8s var(--ease) .2s both;
}
.badge-dot { width:6px;height:6px;background:var(--red);border-radius:50%;animation:pulse 2s ease-in-out infinite; }
@keyframes pulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.5;transform:scale(1.5)} }

h1 { font-family:var(--font-d); line-height:.95; margin-bottom:1.2rem; }
.hero-line { display:block; animation:fadeUp .8s var(--ease) both; }
.hero-line-1 { font-size:clamp(3rem,11vw,7rem); font-weight:900; color:var(--cream); animation-delay:.3s; }
.hero-line-2 { font-size:clamp(3rem,11vw,7rem); font-weight:900; color:var(--red); animation-delay:.45s; }

.hero-sub {
    font-size:clamp(.95rem,2.5vw,1.15rem); color:var(--txt2);
    max-width:480px; margin:0 auto 1.5rem; line-height:1.7;
    animation:fadeUp .8s var(--ease) .6s both;
}
.hero-sub strong { color:var(--cream); }

.hero-btn {
    display:inline-flex; align-items:center; gap:.6rem;
    padding:.85rem 1.8rem; background:var(--red); color:var(--cream);
    text-decoration:none; font-family:var(--font-b); font-weight:700; font-size:1rem;
    border-radius:100px; transition:all .35s var(--ease);
    animation:fadeUp .8s var(--ease) .75s both; border:2px solid transparent;
}
.hero-btn:hover { background:transparent; border-color:var(--red); color:var(--red); transform:translateY(-2px); box-shadow:0 8px 30px rgba(196,30,58,.3); }
.hero-btn svg { transition:transform .3s; }
.hero-btn:hover svg { transform:translateX(4px); }

/* Hero Box — always visible, centered above text on mobile */
.hero-visual {
    display:flex; justify-content:center; align-items:flex-end;
    animation:fadeUp 1s var(--ease) .3s both;
    flex-shrink:0;
}
.hero-box-img {
    width:160px; height:auto;
    filter:drop-shadow(0 15px 40px rgba(196,30,58,.25));
    animation:boxFloat 4s ease-in-out infinite;
}
@keyframes boxFloat { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-10px)} }
@keyframes fadeUp { from{opacity:0;transform:translateY(30px)} to{opacity:1;transform:translateY(0)} }

/* SECTIONS — content behind canvas, interactive bits punch above */
section { position:relative; z-index:1; pointer-events:none; }
section * { pointer-events:none; }
/* Interactive elements above canvas */
a, button, input, textarea, select, details, summary, .nav-cta, .hero-btn, .waitlist-form, .form-group, .faq-item {
    position:relative; z-index:60; pointer-events:auto !important;
}
.hero-content, .section-container { position:relative; }
/* Text is readable but doesn't block canvas */
h1, h2, h3, p, span, .hero-badge, .hero-sub, .flavour-card, .story-content,
.section-title, .section-sub, .form-hint, .form-message, .footer-tagline,
.footer-bottom, .footer-col { pointer-events:none; }
.section-container { max-width:1000px; margin:0 auto; padding:4.5rem 1.5rem; }
.section-title { font-family:var(--font-d); font-size:clamp(2rem,6vw,3.5rem); font-weight:900; color:var(--cream); margin-bottom:1rem; text-align:center; }
.section-title em { color:var(--red); font-style:normal; }
.section-sub { font-size:clamp(.95rem,2vw,1.1rem); color:var(--txt2); text-align:center; max-width:500px; margin:0 auto 3rem; line-height:1.6; }

/* FLAVOURS */
.flavours { background:rgba(20,8,8,.8); backdrop-filter:blur(10px); }
.flavour-grid { display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.flavour-card {
    background:rgba(255,248,220,.04); border:1px solid rgba(255,248,220,.08);
    border-radius:16px; padding:1.4rem; text-align:center; transition:all .4s var(--ease);
}
.flavour-card:hover { background:rgba(255,248,220,.08); border-color:rgba(196,30,58,.3); transform:translateY(-4px); }
.flavour-icon { width:60px;height:60px;border-radius:50%;margin:0 auto 1rem;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 20px rgba(0,0,0,.3); }
.flavour-icon svg { width:35px;height:35px; }
.flavour-card h3 { font-family:var(--font-d); font-size:1.2rem; font-weight:700; color:var(--cream); margin-bottom:.4rem; }
.flavour-card p { font-size:.82rem; color:var(--txt3); line-height:1.5; }

/* STORY */
.story-content { max-width:650px; margin:0 auto; }
.story-content p { font-size:clamp(1rem,2.2vw,1.15rem); color:var(--txt2); line-height:1.8; margin-bottom:1.5rem; text-align:center; }
.story-content strong { color:var(--gold); }

/* WAITLIST */
.waitlist { background:rgba(196,30,58,.06); border-top:1px solid rgba(196,30,58,.15); border-bottom:1px solid rgba(196,30,58,.15); }
.waitlist-form { max-width:480px; margin:0 auto; }
.form-group { display:flex; flex-direction:column; gap:.8rem; }
.form-group input {
    width:100%; padding:1rem 1.2rem; background:rgba(255,248,220,.06);
    border:2px solid rgba(255,248,220,.12); border-radius:12px;
    color:var(--cream); font-family:var(--font-b); font-size:1rem;
    transition:all .3s var(--ease); outline:none;
}
.form-group input::placeholder { color:var(--txt3); }
.form-group input:focus { border-color:var(--red); background:rgba(255,248,220,.08); box-shadow:0 0 0 4px rgba(196,30,58,.15); }
.form-group button {
    width:100%; padding:1rem; background:var(--red); color:var(--cream); border:none;
    border-radius:12px; font-family:var(--font-b); font-size:1rem; font-weight:700;
    cursor:pointer; transition:all .3s var(--ease); position:relative; overflow:hidden;
}
.form-group button:hover { background:var(--red-light); transform:translateY(-1px); box-shadow:0 6px 24px rgba(196,30,58,.4); }
.form-group button.loading .btn-text { opacity:0; }
.form-group button.loading .btn-loader { display:block; }
.btn-loader { display:none; position:absolute; top:50%;left:50%; transform:translate(-50%,-50%); width:22px;height:22px; border:3px solid rgba(255,248,220,.3); border-top-color:var(--cream); border-radius:50%; animation:spin .6s linear infinite; }
@keyframes spin { to{transform:translate(-50%,-50%) rotate(360deg)} }
.form-hint { font-size:.8rem; color:var(--txt3); text-align:center; margin-top:.5rem; }
.form-message { text-align:center; font-size:.9rem; margin-top:1rem; padding:.8rem; border-radius:8px; display:none; }
.form-message.success { display:block; background:rgba(76,175,80,.15); color:#81C784; border:1px solid rgba(76,175,80,.3); }
.form-message.error { display:block; background:rgba(244,67,54,.15); color:#EF9A9A; border:1px solid rgba(244,67,54,.3); }

/* FAQ */
.faq { background:rgba(20,8,8,.6); }
.faq-list { max-width:700px; margin:0 auto; }
.faq-item { border-bottom:1px solid rgba(255,248,220,.08); }
.faq-item summary { padding:1.2rem 0; cursor:pointer; list-style:none; display:flex; align-items:center; justify-content:space-between; }
.faq-item summary::-webkit-details-marker { display:none; }
.faq-item summary::after { content:'+'; font-family:var(--font-d); font-size:1.5rem; color:var(--red); transition:transform .3s; flex-shrink:0; margin-left:1rem; }
.faq-item[open] summary::after { transform:rotate(45deg); }
.faq-item summary h3 { font-family:var(--font-b); font-size:1rem; font-weight:600; color:var(--cream); }
.faq-item p { padding:0 0 1.2rem; font-size:.9rem; color:var(--txt2); line-height:1.7; }

/* FOOTER */
.site-footer { position:relative; z-index:1; background:rgba(10,5,5,.95); border-top:1px solid rgba(196,30,58,.15); pointer-events:none; }

/* Popcorn collection zone — space below footer for kernels to pile up */
.popcorn-floor {
    height: 200px;
    position: relative;
    z-index: 1;
    pointer-events: none;
}
.footer-container { max-width:1000px; margin:0 auto; padding:3rem 1.5rem 1.5rem; }
.footer-brand { margin-bottom:2rem; }
.footer-logo { height:35px;width:auto; }
.footer-logo-link { display:inline-block;text-decoration:none; }
.footer-tagline { font-size:.85rem; color:var(--txt3); margin-top:.6rem; max-width:300px; }
.footer-links { display:grid; grid-template-columns:1fr 1fr; gap:2rem; margin-bottom:2rem; }
.footer-col h4 { font-family:var(--font-b); font-size:.8rem; font-weight:700; color:var(--cream); text-transform:uppercase; letter-spacing:.1em; margin-bottom:.8rem; }
.footer-col ul { list-style:none; }
.footer-col li { margin-bottom:.4rem; }
.footer-col a { font-size:.85rem; color:var(--txt3); text-decoration:none; transition:color .3s; }
.footer-col a:hover { color:var(--red); }
.footer-bottom { padding-top:1.5rem; border-top:1px solid rgba(255,248,220,.06); }
.footer-bottom p { font-size:.75rem; color:var(--txt3); }
.footer-bottom a { color:var(--red); text-decoration:none; }
.footer-bottom a:hover { text-decoration:underline; }

/* ============ SMALL PHONE FIX 380- ============ */
@media (max-width:380px) {
    .hero { padding:5.5rem 1rem 1.5rem; }
    .hero-line-1, .hero-line-2 { font-size:2.8rem; }
    .hero-badge { font-size:.65rem; padding:.3rem .8rem; }
    .hero-box-img { width:130px; }
    .flavour-grid { grid-template-columns:1fr; }
    .flavour-card { padding:1.2rem; }
    .nav-container { padding:.6rem 1rem; }
    .section-container { padding:3.5rem 1rem; }
    .footer-links { grid-template-columns:1fr; gap:1.5rem; }
}

/* ============ TABLET 768+ ============ */
@media (min-width:768px) {
    .nav-container { padding:.8rem 2rem; }
    .logo-img { height:45px; }
    .hero {
        flex-direction:row; align-items:center; padding:0 3rem; gap:2rem;
    }
    .hero-content { text-align:left; flex:1; }
    .hero-sub { margin:0 0 1.5rem; }
    .hero-visual { flex:0 0 auto; }
    .hero-box-img { width:250px; }
    .flavour-grid { gap:1.5rem; }
    .form-group { flex-direction:row; }
    .form-group input { border-radius:12px 0 0 12px; }
    .form-group button { width:auto; white-space:nowrap; padding:1rem 2rem; border-radius:0 12px 12px 0; }
    .section-container { padding:6rem 2rem; }
    .footer-container { display:grid; grid-template-columns:1.2fr 1fr; gap:0; padding:3rem 2rem 1.5rem; }
    .footer-brand { grid-column:1; }
    .footer-links { grid-column:2; grid-row:1; }
    .footer-bottom { grid-column:1/-1; }
}

/* ============ DESKTOP 1024+ ============ */
@media (min-width:1024px) {
    .hero { padding:0 5rem; }
    .hero-box-img { width:300px; }
    .flavour-grid { grid-template-columns:repeat(4,1fr); }
    .section-container { padding:7rem 2rem; }
}

@media (min-width:1400px) {
    .hero { max-width:1400px; margin:0 auto; padding:0 6rem; }
}

@media (prefers-reduced-motion:reduce) {
    *,*::before,*::after { animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; scroll-behavior:auto!important; }
    .hero-box-img { animation:none!important; }
}

@media print {
    #physics-canvas,.hero-visual,.nav-cta{display:none!important}
    body{background:#fff;color:#000}
    .site-header{position:static;background:#fff;border-bottom:1px solid #ccc}
    section{background:transparent!important}
    .section-title{color:#000}
    .section-title em{color:#C41E3A}
}