@import 'tailwindcss';

@source '../../vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php';
@source '../../storage/framework/views/*.php';
@source '../**/*.blade.php';
@source '../**/*.js';

/* ============================================================================
   Saint Yachting — design tokens (ported from the SaintYacht preview)
   Three font families, a disciplined champagne-gold palette, the house easing.
   ========================================================================== */
@theme {
    /* Typography */
    --font-display: 'Italiana', 'Cormorant Garamond', serif;   /* hero gold word */
    --font-serif: 'Cormorant Garamond', 'Italiana', serif;     /* body / titles  */
    --font-label: 'Montserrat', ui-sans-serif, sans-serif;     /* tracked caps   */

    /* Brand palette (fixed, theme-independent) */
    --color-ink: #0a0a0a;            /* near-black base */
    --color-atmosphere: #060a10;     /* deepest navy-black */
    --color-charcoal: #1a1a1a;       /* light-section title ink */
    --color-pearl: #f0e6cf;          /* warm pearl (dark-section title) */
    --color-gold: #c9a96a;           /* standard interactive gold */
    --color-gold-deep: #a8884a;      /* deep gold — hero word on white */
    --color-gold-champagne: #d4b06a; /* champagne — hero word on dark */
    --color-sand: #f7f4ee;           /* legacy light section background */

    /* ---- Semantic theme tokens (DAY defaults) -------------------------------
       The site is light by default ("day"): soft Cycladic cyan + charcoal text.
       The dark scheme lives under html[data-theme="night"] below and flips these
       same variables at runtime, so any utility built on them (bg-surface,
       text-heading, text-body, border-hairline …) swaps automatically. */
    --color-page: #e9f2f4;            /* page backdrop behind sections */
    --color-surface: #effcff;         /* content section background */
    --color-surface-deep: #dce9ec;    /* deeper cyan for wells / cards */
    --color-heading: #1a1a1a;         /* section titles */
    --color-body: #2c3338;            /* paragraph text */
    --color-line: rgba(10, 10, 10, 0.40);   /* visible separator line */
    --color-hairline: rgba(10, 10, 10, 0.12);/* subtle hairline border */
    --color-hero-word: #a8884a;       /* two-tone hero word / accents */

    /* Motion */
    --ease-house: cubic-bezier(0.2, 0.8, 0.2, 1);

    /* Radius — unified corner radius for all buttons & bordered form fields.
       Inline, use the generated `rounded-button` utility. Circular icon
       buttons (theme toggle, gallery arrows) are the only exception. */
    --radius-button: 10px;
}

/* ----------------------------------------------------------------------------
   Night scheme — the original cinematic dark palette, auto-selected by local
   time (see the pre-paint script in layouts/app.blade.php) or any explicit
   html[data-theme="night"]. Higher specificity than :root, so it wins.
   ------------------------------------------------------------------------- */
:root[data-theme="night"] {
    --color-page: #0a0a0a;
    --color-surface: #0a0a0a;
    --color-surface-deep: #060a10;
    --color-heading: #f0e6cf;
    --color-body: #c7ccd0;
    --color-line: rgba(255, 255, 255, 0.42);
    --color-hairline: rgba(255, 255, 255, 0.10);
    --color-hero-word: #d4b06a;
}

/* ============================================================================
   Base
   ========================================================================== */
@layer base {
    html {
        scroll-behavior: smooth;
        -webkit-font-smoothing: antialiased;
        text-rendering: optimizeLegibility;
        color-scheme: light;
    }
    :root[data-theme="night"] { color-scheme: dark; }
    body {
        background: var(--color-page);
        color: var(--color-body);
        font-family: var(--font-serif);
        font-size: 18px;
        line-height: 1.6;
        transition: background-color 0.4s var(--ease-house), color 0.4s var(--ease-house);
    }
    ::selection {
        background: var(--color-gold);
        color: var(--color-ink);
    }
    [x-cloak] { display: none !important; }
}

/* ============================================================================
   Component layer — the bespoke "sy-" vocabulary
   ========================================================================== */
@layer components {
    /* ---- Section scaffolding (alternating dark / light bands) ------------ */
    .sy-section { padding-block: clamp(72px, 9vw, 150px); }
    .sy-section--dark  { background: var(--color-ink);  color: rgba(255, 255, 255, 0.78); }
    .sy-section--light { background: var(--color-sand); color: rgba(10, 10, 10, 0.78); }
    /* Theme-following band: cyan in day, ink at night. */
    .sy-section--surface {
        background: var(--color-surface);
        color: var(--color-body);
        transition: background-color 0.4s var(--ease-house), color 0.4s var(--ease-house);
    }
    .sy-container {
        width: 100%;
        max-width: 1280px;
        margin-inline: auto;
        padding-inline: clamp(20px, 5vw, 64px);
    }

    /* ---- Separator line with a centred gold dot -------------------------- */
    .sy-line {
        position: relative;
        width: 60px;
        height: 1px;
        margin-inline: auto;
        background: var(--color-line);
    }
    .sy-line::after {
        content: "";
        position: absolute;
        left: 50%;
        top: -2px;
        width: 5px;
        height: 5px;
        background: var(--color-gold);
        border-radius: 50%;
        transform: translateX(-50%);
    }
    .sy-line--ondark { background: rgba(255, 255, 255, 0.45); }

    /* ---- Eyebrow (Montserrat tracked caps) ------------------------------- */
    .sy-eyebrow {
        font-family: var(--font-label);
        font-size: 11px;
        font-weight: 500;
        letter-spacing: 0.5em;
        text-transform: uppercase;
        color: var(--color-gold);
    }

    /* ---- Two-tone section heading ---------------------------------------- */
    .sy-heading {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 18px;
        text-align: center;
    }
    .sy-heading__title {
        margin: 0;
        font-family: var(--font-serif);
        font-weight: 300;
        font-style: italic;
        color: var(--color-charcoal);
        font-size: clamp(42px, 6.5vw, 92px);
        letter-spacing: 0.02em;
        line-height: 1.05;
        word-spacing: 0.06em;
    }
    .sy-heading__hero {
        display: inline-block;
        font-family: var(--font-display);
        font-weight: 400;
        font-style: normal;
        color: var(--color-gold-deep);
        letter-spacing: 0.04em;
        margin-left: 0.18em;
        padding-bottom: 6px;
        border-bottom: 1px solid currentColor;
    }
    .sy-heading--ondark .sy-heading__title { color: var(--color-pearl); }
    .sy-heading--ondark .sy-heading__hero  { color: var(--color-gold-champagne); }
    /* Theme-following heading (used on surface sections). */
    .sy-heading--surface .sy-heading__title { color: var(--color-heading); }
    .sy-heading--surface .sy-heading__hero  { color: var(--color-hero-word); }

    /* ---- CTAs ------------------------------------------------------------ */
    /* Underlined luxury CTA */
    .sy-cta {
        display: inline-flex;
        align-items: center;
        gap: 16px;
        padding: 14px 4px;
        font-family: var(--font-label);
        font-size: 11px;
        font-weight: 500;
        letter-spacing: 0.42em;
        text-transform: uppercase;
        color: var(--color-gold);
        text-decoration: none;
        position: relative;
        transition: color 0.35s var(--ease-house), letter-spacing 0.35s var(--ease-house);
    }
    .sy-cta::after {
        content: "";
        position: absolute;
        left: 0; right: 0; bottom: 6px;
        height: 1px;
        background: rgba(201, 169, 106, 0.55);
        transition: background-color 0.35s var(--ease-house);
    }
    .sy-cta:hover { color: var(--color-heading); letter-spacing: 0.5em; }
    .sy-cta:hover::after { background: var(--color-heading); }
    .sy-cta--ondark:hover { color: var(--color-pearl); }
    .sy-cta--ondark:hover::after { background: var(--color-pearl); }
    .sy-cta__arrow { display: inline-flex; transition: transform 0.35s var(--ease-house); }
    .sy-cta:hover .sy-cta__arrow { transform: translateX(8px); }

    /* Solid / outline button */
    .sy-btn {
        display: inline-flex;
        align-items: center;
        gap: 16px;
        padding: 16px 32px;
        font-family: var(--font-label);
        font-size: 11px;
        font-weight: 600;
        letter-spacing: 0.42em;
        text-transform: uppercase;
        cursor: pointer;
        text-decoration: none;
        border: 1px solid var(--color-gold);
        border-radius: var(--radius-button);
        transition: background-color 0.35s var(--ease-house),
                    color 0.35s var(--ease-house),
                    letter-spacing 0.35s var(--ease-house);
    }
    .sy-btn--solid { background: var(--color-gold); color: var(--color-ink); }
    .sy-btn--solid:hover { background: transparent; color: var(--color-gold); letter-spacing: 0.5em; }
    .sy-btn--outline { background: transparent; color: var(--color-hero-word); border-color: var(--color-hero-word); }
    .sy-btn--outline:hover { background: var(--color-gold); color: var(--color-ink); border-color: var(--color-gold); letter-spacing: 0.5em; }
    .sy-btn__arrow { display: inline-flex; transition: transform 0.35s var(--ease-house); }
    .sy-btn:hover .sy-btn__arrow { transform: translateX(8px); }

    /* ---- Navigation ------------------------------------------------------ */
    .sy-nav {
        position: fixed;
        inset: 0 0 auto 0;
        z-index: 100;
        transition: background-color 0.4s var(--ease-house), box-shadow 0.4s var(--ease-house);
    }
    .sy-nav--solid {
        background: rgba(10, 10, 10, 0.92);
        backdrop-filter: blur(14px);
        -webkit-backdrop-filter: blur(14px);
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
    }
    .sy-nav__link {
        font-family: var(--font-label);
        font-size: 11px;
        font-weight: 500;
        letter-spacing: 0.28em;
        text-transform: uppercase;
        color: rgba(255, 255, 255, 0.82);
        text-decoration: none;
        position: relative;
        padding-bottom: 4px;
        transition: color 0.3s var(--ease-house), letter-spacing 0.3s var(--ease-house);
    }
    .sy-nav__link::after {
        content: "";
        position: absolute;
        left: 0; bottom: 0;
        width: 0; height: 1px;
        background: var(--color-gold);
        transition: width 0.35s var(--ease-house);
    }
    .sy-nav__link:hover,
    .sy-nav__link[aria-current="page"] { color: #fff; letter-spacing: 0.32em; }
    .sy-nav__link:hover::after,
    .sy-nav__link[aria-current="page"]::after { width: 100%; }

    /* ---- Theme toggle (lightbulb) ---------------------------------------- */
    .sy-nav__theme {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 38px;
        height: 38px;
        border-radius: 999px;
        background: transparent;
        color: rgba(255, 255, 255, 0.82);
        border: 1px solid rgba(255, 255, 255, 0.22);
        cursor: pointer;
        transition: color 0.3s var(--ease-house), border-color 0.3s var(--ease-house),
            background-color 0.3s var(--ease-house);
    }
    .sy-nav__theme:hover { color: #fff; border-color: rgba(255, 255, 255, 0.55); }
    .sy-nav__theme.is-day {
        color: var(--color-gold-champagne);
        border-color: color-mix(in oklab, var(--color-gold-champagne) 55%, transparent);
    }
    .sy-nav__theme.is-day svg {
        filter: drop-shadow(0 0 6px color-mix(in oklab, var(--color-gold-champagne) 45%, transparent));
    }
    .sy-nav__theme.is-day:hover { color: var(--color-gold); }

    /* Mobile menu row reuses .sy-nav__link; lay out icon + label inline */
    .sy-nav__theme-row {
        display: inline-flex;
        align-items: center;
        gap: 12px;
        background: transparent;
        border: 0;
        padding: 0 0 4px;
        cursor: pointer;
        text-align: left;
    }
    .sy-nav__theme-row.is-day { color: var(--color-gold-champagne); }
    .sy-nav__theme-row.is-day::after { background: var(--color-gold-champagne); }

    /* ---- Logo ------------------------------------------------------------ */
    .sy-logo { display: inline-flex; flex-direction: column; line-height: 1; text-decoration: none; }
    .sy-logo__name {
        font-family: var(--font-display);
        font-size: 28px;
        letter-spacing: 0.06em;
        color: #fff;
        white-space: nowrap;
    }
    .sy-logo__name b { font-weight: 400; color: var(--color-gold); }
    .sy-logo__sub {
        font-family: var(--font-label);
        font-size: 9px;
        letter-spacing: 0.55em;
        text-transform: uppercase;
        color: rgba(255, 255, 255, 0.7);
        margin-top: 6px;
        padding-left: 2px;
    }

    /* ---- Destination arched-portrait card -------------------------------- */
    .sy-arch {
        position: relative;
        aspect-ratio: 4 / 5;
        overflow: hidden;
        background: var(--color-atmosphere);
        border-radius: 9999px 9999px 14px 14px;
        box-shadow: 0 18px 40px -22px rgba(8, 24, 48, 0.35), 0 4px 12px -6px rgba(8, 24, 48, 0.18);
        transition: box-shadow 0.5s var(--ease-house), transform 0.55s var(--ease-house);
    }
    .sy-arch::before {
        content: "";
        position: absolute; inset: 1px;
        border-radius: inherit;
        border: 1px solid rgba(201, 169, 106, 0.28);
        pointer-events: none; z-index: 3;
    }
    .sy-arch::after {
        content: "";
        position: absolute; inset: 0; z-index: 1;
        background: linear-gradient(to top, rgba(8,24,48,0.55) 0%, rgba(8,24,48,0.20) 30%, rgba(8,24,48,0) 55%);
        pointer-events: none;
    }
    .sy-arch img {
        display: block; width: 100%; height: 100%;
        object-fit: cover; transform: scale(1.05);
        transition: transform 1.6s var(--ease-house);
    }
    .sy-arch-card:hover .sy-arch { transform: translateY(-10px); }
    .sy-arch-card:hover .sy-arch img { transform: scale(1.12); }

    /* ---- Fleet — alternating text / rounded full-bleed photo ------------- */
    .sy-media {
        position: relative;
        border-radius: var(--radius-button);
        overflow: hidden;
        background: var(--color-surface-deep);
        box-shadow: 0 30px 64px -32px rgba(8, 24, 48, 0.45),
                    0 8px 22px -12px rgba(8, 24, 48, 0.22);
    }
    .sy-media::after {
        content: "";
        position: absolute; inset: 1px;
        border-radius: inherit;
        border: 1px solid rgba(201, 169, 106, 0.30);
        pointer-events: none; z-index: 2;
    }
    .sy-media img {
        display: block; width: 100%; height: 100%;
        object-fit: cover; transform: scale(1.04);
        transition: transform 1.6s var(--ease-house);
    }
    .sy-media:hover img { transform: scale(1.10); }

    /* Eyebrow with thin flanking rules ("— THIS IS THE ONE —") */
    .sy-eyebrow--flanked { display: inline-flex; align-items: center; gap: 16px; }
    .sy-eyebrow--flanked::before,
    .sy-eyebrow--flanked::after {
        content: ""; width: 32px; height: 1px; background: var(--color-line);
    }

    /* Experience pills (decorative on the homepage) */
    .sy-pills { display: flex; flex-wrap: wrap; gap: 10px; }
    .sy-pill {
        display: inline-flex; align-items: center; gap: 9px;
        padding: 9px 16px; border-radius: 9999px;
        border: 1px solid var(--color-hairline);
        font-family: var(--font-label);
        font-size: 9.5px; font-weight: 500;
        letter-spacing: 0.18em; text-transform: uppercase;
        color: var(--color-body); background: transparent;
    }
    .sy-pill svg { width: 14px; height: 14px; flex: none; }
    .sy-pill--active {
        background: var(--color-heading);
        color: var(--color-surface);
        border-color: var(--color-heading);
    }

    /* Filled pill CTA ("Book this experience →") */
    .sy-pill-btn {
        display: inline-flex; align-items: center; gap: 16px;
        padding: 16px 30px; border-radius: var(--radius-button);
        background: var(--color-heading); color: var(--color-surface);
        font-family: var(--font-label);
        font-size: 11px; font-weight: 600;
        letter-spacing: 0.32em; text-transform: uppercase; text-decoration: none;
        transition: background-color 0.35s var(--ease-house),
                    color 0.35s var(--ease-house),
                    letter-spacing 0.35s var(--ease-house);
    }
    .sy-pill-btn:hover { background: var(--color-gold); color: var(--color-ink); letter-spacing: 0.4em; }
    .sy-pill-btn .sy-btn__arrow { transition: transform 0.35s var(--ease-house); }
    .sy-pill-btn:hover .sy-btn__arrow { transform: translateX(6px); }

    /* Per-yacht 5-icon spec strip */
    .sy-specs {
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        border-top: 1px solid var(--color-hairline);
    }
    .sy-spec {
        display: flex; flex-direction: column; align-items: center;
        text-align: center; gap: 8px; padding: 24px 6px 2px;
    }
    .sy-spec + .sy-spec { border-left: 1px solid var(--color-hairline); }
    .sy-spec__icon { color: var(--color-heading); display: inline-flex; }
    .sy-spec__value {
        font-family: var(--font-serif); font-weight: 500;
        font-size: 15px; line-height: 1.2; color: var(--color-heading);
    }
    .sy-spec__label {
        font-family: var(--font-label); font-size: 8px; font-weight: 500;
        letter-spacing: 0.2em; text-transform: uppercase;
        color: var(--color-body); opacity: 0.7;
    }
    @media (max-width: 600px) {
        .sy-specs { grid-template-columns: repeat(2, 1fr); border-top: 0; }
        .sy-spec {
            border-left: 0 !important;
            border-top: 1px solid var(--color-hairline);
            padding: 18px 6px;
        }
        .sy-spec:last-child { grid-column: 1 / -1; }
    }

    /* ---- Hero (scroll-scrubbed video) ------------------------------------ */
    .sy-hero {
        position: relative;
        width: 100%;
        height: 500vh;          /* tall scroll track; JS pins the inner layer */
        background: var(--color-ink);
    }
    .sy-hero[data-hero-mode="static"] { height: 100vh; }

    .sy-hero__sticky {
        position: sticky;
        top: 0;
        height: 100vh;
        width: 100%;
        overflow: hidden;
        background: var(--color-ink);
    }
    .sy-hero[data-hero-mode="static"] .sy-hero__sticky { position: relative; }

    .sy-hero__media,
    .sy-hero__video,
    .sy-hero__poster {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    .sy-hero__video {
        pointer-events: none;
        will-change: transform;
        transform: scale(1.02);
    }
    /* On static (mobile) mode, hide the video and show the poster image. */
    .sy-hero[data-hero-mode="static"] .sy-hero__video { display: none; }
    .sy-hero__poster { z-index: 0; }
    .sy-hero[data-hero-ready="true"] .sy-hero__poster { opacity: 0; transition: opacity 0.6s var(--ease-house); }
    .sy-hero[data-hero-mode="static"] .sy-hero__poster { opacity: 1 !important; }

    .sy-hero__overlay {
        position: absolute;
        inset: 0;
        z-index: 2;
        background:
            radial-gradient(ellipse at center, rgba(0,0,0,0) 35%, rgba(0,0,0,0.55) 100%),
            linear-gradient(180deg, rgba(0,0,0,0.35) 0%, rgba(0,0,0,0.15) 35%, rgba(0,0,0,0.55) 100%);
    }
    .sy-hero__content {
        position: absolute;
        inset: 0;
        z-index: 3;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
        padding: 0 24px;
        color: #fff;
    }
    .sy-hero__eyebrow {
        font-family: var(--font-label);
        font-size: 11px;
        letter-spacing: 0.6em;
        text-transform: uppercase;
        color: rgba(255,255,255,0.78);
        margin-bottom: 28px;
        opacity: var(--sy-p1, 1);
        transform: translateY(calc((1 - var(--sy-p1, 1)) * 12px));
    }
    .sy-hero__eyebrow .sy-dot {
        display: inline-block;
        width: 4px; height: 4px;
        background: var(--color-gold);
        border-radius: 50%;
        margin: 0 14px;
        vertical-align: middle;
    }
    .sy-hero__title {
        font-family: var(--font-label);
        font-weight: 200;
        text-transform: uppercase;
        letter-spacing: 0.18em;
        line-height: 1.05;
        font-size: clamp(46px, 9vw, 132px);
        margin: 0;
        opacity: var(--sy-p2, 1);
        transform: translateY(calc((1 - var(--sy-p2, 1)) * 20px));
    }
    .sy-hero__title b { font-weight: 300; color: var(--color-gold); }
    .sy-hero__tagline {
        margin-top: 26px;
        font-family: var(--font-serif);
        font-style: italic;
        font-weight: 300;
        font-size: clamp(18px, 2.2vw, 26px);
        letter-spacing: 0.02em;
        color: rgba(255,255,255,0.82);
        opacity: var(--sy-p2, 1);
    }
    .sy-hero__scroll {
        position: absolute;
        bottom: 38px;
        left: 50%;
        transform: translateX(-50%);
        z-index: 3;
        font-family: var(--font-label);
        font-size: 9px;
        letter-spacing: 0.5em;
        text-transform: uppercase;
        color: rgba(255,255,255,0.6);
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 12px;
    }
    .sy-hero__scroll-line {
        width: 1px; height: 54px;
        background: linear-gradient(to bottom, rgba(201,169,106,0.9), rgba(201,169,106,0));
    }
}

@keyframes sy-ken {
    from { transform: scale(1.04) translate(-0.5%, 0.5%); }
    to   { transform: scale(1.14) translate(1%, -1%); }
}

@media (max-width: 600px) {
    .sy-hero__eyebrow { letter-spacing: 0.32em; font-size: 10px; }
    .sy-hero__title { font-size: clamp(40px, 13vw, 60px); letter-spacing: 0.06em; }
    .sy-hero__title b { display: block; }
}