/* ==========================================================================
   Public site — v2 visual layer.

   Plain CSS loaded after the compiled Vite bundle, so it can be edited and
   deployed without a rebuild. It only restyles: every link, form, Livewire
   component and Alpine behaviour still comes from the original markup.
   Anything new here uses its own class names, because Tailwind utilities that
   are not already in the compiled bundle would not exist.
   ========================================================================== */

:root,
:host {
    --font-sans: 'Space Grotesk', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
        'Segoe UI Symbol', 'Noto Color Emoji';
    --font-display: 'Zen Dots', 'Space Grotesk', system-ui, sans-serif;
    --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
}

/* `:root:not(.dark)`, not `:root`: this file loads after app.css and a bare
   `:root` would override the `.dark` values of the same specificity. */
:root:not(.dark) {
    --surface-alt: #f3f4ef;
    --field: #eff1ea;
    --grain-opacity: 0.035;
    --grid-line: rgb(9 12 16 / 5%);
}

.dark {
    /* Native controls (the select popup, number spinners, autofill) follow
       the theme instead of rendering as light widgets on a dark form. */
    color-scheme: dark;
    --surface: #060708;
    --surface-alt: #0b0d0f;
    --card: #0f1114;
    --grain-opacity: 0.06;
    --grid-line: rgb(255 255 255 / 4.5%);
}

body {
    font-family: var(--font-sans);
    font-feature-settings: 'ss01', 'ss04';
    letter-spacing: -0.005em;
}

/* Zen Dots is wide and already rounded: no negative tracking, a little more
   leading than the old face so stacked headlines do not touch. */
.font-display {
    letter-spacing: 0.005em;
    line-height: 1.06;
}

/* Same split as the fitwear reference: Zen Dots is not only for headlines but
   also for buttons, navigation, tabs and the small eyebrow labels; Space
   Grotesk stays on running text and form labels, where it reads better.
   Zen Dots ships a single weight, so the bold utilities are reset to 400
   instead of letting the browser fake a heavier cut. */
header nav a,
.thumb-bar a,
[role='tab'],
:is(a, button).uppercase,
:is(a, button) > span.uppercase,
a span.uppercase.font-black,
p.uppercase[class*='tracking-[0.35em]'] {
    font-family: var(--font-display);
    font-weight: 400;
    letter-spacing: 0.06em;
}

p.uppercase[class*='tracking-[0.35em]'] {
    letter-spacing: 0.22em;
}

header nav a {
    font-size: 12px;
}

/* Film grain over the whole page. Static, no blend mode, so it costs nothing
   while scrolling. */
body::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: 70;
    pointer-events: none;
    opacity: var(--grain-opacity);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* --------------------------------------------------------------------------
   Scroll progress
   -------------------------------------------------------------------------- */
.scroll-progress {
    position: fixed;
    inset: 0 0 auto 0;
    z-index: 80;
    height: 3px;
    pointer-events: none;
    background: var(--accent);
    box-shadow: 0 0 12px var(--accent);
    transform: scaleX(var(--scroll, 0));
    transform-origin: 0 50%;
}

/* --------------------------------------------------------------------------
   Theme switch: circular reveal from the toggle (View Transitions API).
   Browsers without it simply switch instantly, as before.
   -------------------------------------------------------------------------- */
::view-transition-old(root),
::view-transition-new(root) {
    animation: none;
    mix-blend-mode: normal;
}

::view-transition-new(root) {
    animation: theme-reveal 0.7s var(--ease-out-expo) both;
}

@keyframes theme-reveal {
    from {
        clip-path: circle(0 at var(--tx, 50%) var(--ty, 0));
    }

    to {
        clip-path: circle(var(--tr, 150vmax) at var(--tx, 50%) var(--ty, 0));
    }
}

/* --------------------------------------------------------------------------
   Buttons: a light sweep across the filled accent buttons.
   -------------------------------------------------------------------------- */
.btn-shine {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

.btn-shine::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(110deg, transparent 30%, rgb(255 255 255 / 55%) 50%, transparent 70%);
    transform: translateX(-120%);
    transition: transform 0.8s var(--ease-out-expo);
}

.btn-shine:hover::after,
.btn-shine:focus-visible::after {
    transform: translateX(120%);
}

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */
.hero-grid {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image:
        linear-gradient(to right, var(--grid-line) 1px, transparent 1px),
        linear-gradient(to bottom, var(--grid-line) 1px, transparent 1px);
    background-size: 88px 88px;
    -webkit-mask-image: radial-gradient(ellipse 80% 70% at 30% 45%, #000 30%, transparent 75%);
    mask-image: radial-gradient(ellipse 80% 70% at 30% 45%, #000 30%, transparent 75%);
}

.hero-glow {
    position: absolute;
    width: 46rem;
    height: 46rem;
    right: -14rem;
    top: -10rem;
    border-radius: 9999px;
    pointer-events: none;
    background: radial-gradient(circle, var(--accent-glow), transparent 65%);
    filter: blur(10px);
    animation: hero-glow 9s ease-in-out infinite alternate;
}

@keyframes hero-glow {
    to {
        transform: translate(-6rem, 8rem) scale(1.15);
    }
}

.hero-title {
    font-size: clamp(2.6rem, 8.4vw, 6.6rem);
}

/* Below lg the stat strip wraps onto two rows (~11rem), taller than the
   original bottom padding, and covered the opening-hours line. */
@media (max-width: 1023.98px) {
    .hero-body {
        padding-bottom: 13.5rem;
    }

    .hero-kinetic {
        bottom: 12rem;
    }
}

/* "Hoy." sits on a lime block that wipes in after the headline appears. */
.hero-hoy {
    position: relative;
    display: inline-block;
    isolation: isolate;
    padding: 0.04em 0.22em 0.02em;
    margin-left: -0.08em;
    color: var(--on-accent);
}

.hero-hoy::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background: var(--accent);
    border-radius: 0.12em;
    transform: skewX(-8deg) scaleX(0);
    transform-origin: 0 50%;
    animation: hoy-wipe 0.9s 0.55s var(--ease-out-expo) forwards;
    box-shadow: 0 0 60px var(--accent-glow);
}

@keyframes hoy-wipe {
    to {
        transform: skewX(-8deg) scaleX(1);
    }
}

/* Giant outlined word drifting behind the content. */
.hero-kinetic {
    position: absolute;
    inset-inline: 0;
    bottom: 7.5rem;
    overflow: hidden;
    pointer-events: none;
    user-select: none;
}

.hero-kinetic-track {
    display: flex;
    width: max-content;
    animation: kinetic 38s linear infinite;
}

.hero-kinetic-track span {
    padding-right: 0.5em;
    font-family: var(--font-display);
    font-size: clamp(5rem, 16vw, 15rem);
    line-height: 1;
    text-transform: uppercase;
    white-space: nowrap;
    color: transparent;
    -webkit-text-stroke: 1px var(--line-strong);
    opacity: 0.55;
}

@keyframes kinetic {
    to {
        transform: translateX(-50%);
    }
}

/* Rotating circular badge.

   Its right edge follows the content column (max-w-7xl / 80rem, with the
   same 2rem side padding the sections use) instead of a percentage of the
   viewport, which pushed it past the column on wide screens. */
.hero-badge {
    position: absolute;
    right: max(2rem, calc((100% - 80rem) / 2 + 2rem));
    top: 50%;
    z-index: 2;
    display: none;
    width: 9.5rem;
    height: 9.5rem;
    transform: translateY(-50%);
    color: var(--ink);
    transition: transform 0.5s var(--ease-out-expo);
}

.hero-badge:hover {
    transform: translateY(-50%) scale(1.07);
}

.hero-badge svg {
    width: 100%;
    height: 100%;
    animation: spin 18s linear infinite;
}

.hero-badge text {
    font-family: var(--font-display);
    font-size: 10.5px;
    letter-spacing: 2.6px;
    text-transform: uppercase;
    fill: currentColor;
}

.hero-badge-core {
    position: absolute;
    inset: 28%;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 9999px;
    background: var(--accent);
    color: var(--on-accent);
    font-size: 1.5rem;
    box-shadow: 0 0 0 10px var(--accent-soft), 0 20px 50px -10px var(--accent-glow);
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

@media (min-width: 1024px) {
    .hero-badge {
        display: block;
    }
}

@media (min-width: 1280px) {
    .hero-badge {
        width: 11rem;
        height: 11rem;
    }
}

/* --------------------------------------------------------------------------
   Discipline ticker: a second, outlined tape crossing the lime one.
   -------------------------------------------------------------------------- */
.tape-section {
    position: relative;
    display: grid;
    overflow: hidden;
    padding-block: 3.5rem;
}

.tape {
    grid-area: 1 / 1;
    align-self: center;
    margin-inline: -4%;
    overflow: hidden;
}

.tape-lime {
    position: relative;
    padding-block: 1.6rem;
    background: var(--accent);
    transform: rotate(-2.2deg);
    box-shadow: 0 24px 60px -20px var(--accent-glow);
}

.tape-outline {
    padding-block: 1rem;
    background: var(--card);
    border-block: 1px solid var(--line-strong);
    transform: rotate(2.6deg);
}

.tape-outline .tape-word {
    -webkit-text-stroke-color: var(--mute);
}

.tape-outline .marquee-track {
    animation-direction: reverse;
    animation-duration: 46s;
}

.tape-word {
    font-family: var(--font-display);
    font-size: 1.6rem;
    text-transform: uppercase;
    color: transparent;
    -webkit-text-stroke: 1px var(--line-strong);
}

/* --------------------------------------------------------------------------
   Explore: bento grid with a cursor spotlight.
   -------------------------------------------------------------------------- */
@media (min-width: 1024px) {
    .explore-bento {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        grid-auto-rows: minmax(15rem, auto);
    }

    .explore-bento > :nth-child(1),
    .explore-bento > :nth-child(4),
    .explore-bento > :nth-child(6) {
        grid-column: span 2;
    }

    .explore-bento > :nth-child(1) h3,
    .explore-bento > :nth-child(4) h3,
    .explore-bento > :nth-child(6) h3 {
        font-size: 2.1rem;
    }
}

/* Lift uses `translate`, not `transform`: the scroll reveal pins
   `transform: none !important` once a card has appeared. */
.spot-card,
a.bg-card {
    transition:
        opacity 0.7s var(--ease-out-expo),
        transform 0.7s var(--ease-out-expo),
        translate 0.5s var(--ease-out-expo),
        border-color 0.3s,
        box-shadow 0.5s var(--ease-out-expo);
}

.spot-card:hover,
a.bg-card:hover {
    translate: 0 -4px;
    box-shadow: 0 30px 60px -30px rgb(var(--shadow-color) / 45%);
}

.spot-card {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

.spot-card::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    opacity: 0;
    background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), var(--accent-glow), transparent 60%);
    transition: opacity 0.4s;
}

.spot-card:hover::before {
    opacity: 1;
}

.spot-index {
    position: absolute;
    top: 1.5rem;
    right: 1.75rem;
    font-family: var(--font-display);
    font-size: 0.8rem;
    letter-spacing: 0.15em;
    color: var(--faint);
    transition: color 0.3s;
}

.spot-card:hover .spot-index {
    color: var(--accent-ink);
}

/* --------------------------------------------------------------------------
   Footer wordmark
   -------------------------------------------------------------------------- */
.footer-wordmark {
    margin-top: 3.5rem;
    overflow: hidden;
    font-family: var(--font-display);
    font-size: clamp(2.2rem, 9.6vw, 8rem);
    line-height: 0.9;
    text-align: center;
    text-transform: uppercase;
    white-space: nowrap;
    color: transparent;
    -webkit-text-stroke: 1px var(--line-strong);
    user-select: none;
    background: linear-gradient(90deg, var(--accent), var(--accent)) no-repeat 0 100% / 0 100%;
    -webkit-background-clip: text;
    background-clip: text;
    transition: background-size 1.2s var(--ease-out-expo);
}

.footer-wordmark:hover {
    background-size: 100% 100%;
}

/* --------------------------------------------------------------------------
   Mobile thumb bar: the four things a visitor wants, under the thumb.
   -------------------------------------------------------------------------- */
.thumb-bar {
    position: fixed;
    inset: auto 0.75rem calc(0.75rem + env(safe-area-inset-bottom)) 0.75rem;
    z-index: 45;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.25rem;
    padding: 0.4rem;
    border: 1px solid var(--line);
    border-radius: 1.4rem;
    background: var(--surface-glass);
    -webkit-backdrop-filter: blur(16px) saturate(1.4);
    backdrop-filter: blur(16px) saturate(1.4);
    box-shadow: 0 20px 40px -18px rgb(var(--shadow-color) / 55%);
}

.thumb-bar a {
    display: flex;
    min-height: 3.25rem;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
    border-radius: 1.05rem;
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--copy);
    transition: background 0.2s, color 0.2s;
}

.thumb-bar a i {
    font-size: 1.05rem;
}

.thumb-bar a:hover,
.thumb-bar a[aria-current='page'] {
    color: var(--ink);
    background: var(--accent-soft);
}

.thumb-bar a.thumb-primary {
    background: var(--accent);
    color: var(--on-accent);
}

@media (max-width: 1023.98px) {
    body:has(.thumb-bar) {
        padding-bottom: calc(5.5rem + env(safe-area-inset-bottom));
    }

    /* The bar already carries WhatsApp; keep only "back to top" floating,
       lifted above the bar. */
    .float-wa {
        display: none !important;
    }

    .float-stack {
        bottom: calc(6.25rem + env(safe-area-inset-bottom));
    }
}

@media (min-width: 1024px) {
    .thumb-bar {
        display: none;
    }
}

/* --------------------------------------------------------------------------
   Reduced motion: everything decorative stands still.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .hero-glow,
    .hero-kinetic-track,
    .hero-badge svg {
        animation: none;
    }

    .hero-hoy::before {
        animation: none;
        transform: skewX(-8deg);
    }

    .btn-shine::after {
        display: none;
    }

    ::view-transition-new(root) {
        animation: none;
    }
}