/* Aweigh — standalone product page */

:root {
    color-scheme: dark;
    --bg: #05080F;
    --bg-elev: #0D1320;
    --bg-card: #131A2A;
    --border: #1F2937;
    --border-strong: #2D3748;
    --text: #F1F5F9;
    --text-muted: #94A3B8;
    --text-dim: #64748B;
    --accent: #34D399;       /* mint-green, matches the app's green */
    --accent-soft: rgba(52, 211, 153, 0.16);
    --accent-line: rgba(52, 211, 153, 0.45);
    --shadow: 0 30px 80px rgba(0, 0, 0, 0.55);
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    background: var(--bg);
    color: var(--text);
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    overflow-x: hidden;
}

html {
    scroll-behavior: smooth;
}

a {
    color: inherit;
    text-decoration: none;
}

/* Subtle radial backdrop */
.page-bg {
    position: fixed;
    inset: 0;
    z-index: 0;  /* was -1 — that put it behind the body's painted bg, hiding the grid */
    pointer-events: none;
    background:
        radial-gradient(1200px 700px at 75% -10%, rgba(52, 211, 153, 0.08), transparent 60%),
        radial-gradient(900px 600px at 10% 110%, rgba(56, 189, 248, 0.05), transparent 65%),
        var(--bg);
}

.page-bg::after {
    /* Grid pattern matched to the portfolio card's featured-card::before. */
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
    background-size: 48px 48px;
    background-position: -1px -1px;
    mask-image: radial-gradient(ellipse 70% 60% at 50% 30%, black 30%, transparent 80%);
    pointer-events: none;
}

/* Ensure all the actual content sits above .page-bg. */
.page-nav,
main,
.page-footer {
    position: relative;
    z-index: 1;
}

/* Top + bottom nav */
.page-nav,
.page-footer {
    max-width: 1200px;
    margin: 0 auto;
    padding: 24px 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.page-footer {
    border-top: 1px solid var(--border);
    margin-top: 80px;
}

.back-link, .contact-link {
    color: var(--text-muted);
    font-size: 0.9rem;
    font-weight: 500;
    letter-spacing: 0.01em;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: color 0.2s ease, transform 0.2s ease;
}

.back-link:hover, .contact-link:hover {
    color: var(--text);
}

.back-link:hover .back-arrow {
    transform: translateX(-3px);
}

.back-arrow {
    display: inline-block;
    transition: transform 0.2s ease;
}

/* Main layout */
main {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 40px;
}

/* Hero */
.hero {
    display: grid;
    /* Both columns size to content (auto) and the pair centers in the viewport
       via justify-content. Keeps the text and watch close together regardless
       of viewport width, instead of stretching them apart with `fr` columns. */
    grid-template-columns: auto auto;
    justify-content: center;
    align-items: center;
    gap: 72px;
    padding: 64px 0 96px;
    position: relative;
}

.hero-text {
    display: flex;
    flex-direction: column;
    gap: 24px;
    min-width: 0;
    position: relative;
    z-index: 1;
}

.status-pill {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 6px 14px;
    background: var(--accent-soft);
    border: 1px solid var(--accent-line);
    border-radius: 999px;
    color: var(--accent);
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 0.78rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    width: fit-content;
}

.status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 0 4px rgba(52, 211, 153, 0.18);
    animation: pulse 2.4s ease-in-out infinite;
}

@keyframes pulse {
    0%, 100% { box-shadow: 0 0 0 4px rgba(52, 211, 153, 0.18); }
    50% { box-shadow: 0 0 0 8px rgba(52, 211, 153, 0.06); }
}

.title {
    margin: 0;
    /* fit-content + align-self:start so the element's box hugs the text width.
       Without this, the gradient paints to the column edge and background-clip:text
       cuts the text off. Single-word title "Aweigh." goes bigger than the previous
       two-line "Washington / Ferries" since there's just one word taking the slot. */
    width: fit-content;
    align-self: flex-start;
    font-size: clamp(3.5rem, 10vw, 8rem);
    font-weight: 800;
    /* line-height 1 was tight enough to clip the descender of "g" against the
       bottom of the box when combined with background-clip: text — needs a bit
       of breathing room below the baseline. */
    line-height: 1.15;
    letter-spacing: -0.04em;
    padding-bottom: 0.08em;
    background: linear-gradient(180deg, #FFFFFF 0%, #94A3B8 140%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.title-line {
    display: block;
}

.title-flag {
    /* Inline flag anchor next to "Washington State Ferries" in the tagline.
       Sized roughly to the cap-height of the surrounding text. */
    display: inline-block;
    height: 1em;
    width: auto;
    margin: 0 0.35em 0 0.35em;
    vertical-align: -0.18em;
    border-radius: 2px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
}

.tagline {
    margin: 0;
    font-size: clamp(1.1rem, 1.6vw, 1.35rem);
    color: var(--text-muted);
    line-height: 1.5;
    max-width: 28ch;
}

.meta {
    margin: 0;
    font-size: 0.9rem;
    color: var(--text-dim);
}

.meta a {
    color: var(--text-muted);
    border-bottom: 1px solid var(--border-strong);
    transition: color 0.2s ease, border-color 0.2s ease;
}

.meta a:hover {
    color: var(--accent);
    border-bottom-color: var(--accent);
}

/* Watch device */
.watch-stage {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    padding: 20px;
    z-index: 1;
}

.watch-stage::before {
    /* Soft circular spotlight behind the watch */
    content: '';
    position: absolute;
    inset: -5% 0%;
    background: radial-gradient(circle at center, rgba(52, 211, 153, 0.4) 0%, rgba(52, 211, 153, 0.18) 30%, transparent 65%);
    filter: blur(30px);
    z-index: 0;
    pointer-events: none;
}

.watch-device {
    position: relative;
    width: min(280px, 58vw);
    aspect-ratio: 280 / 440;
    z-index: 1;
    filter: drop-shadow(0 40px 60px rgba(0, 0, 0, 0.55));
    /* Slight forward lean for a more cinematic feel */
    transform: perspective(1200px) rotateY(-4deg) rotateX(2deg);
}

.watch-screen {
    /* Measured against the 1120x1760 webp: screen area is 834w x 994h, starts 384px from top */
    position: absolute;
    top: 21.818%;     /* 384 / 1760 */
    left: 12.768%;    /* (1120 - 834) / 2 / 1120 */
    width: 74.464%;   /* 834 / 1120 */
    height: 56.477%;  /* 994 / 1760 */
    border-radius: 32px;
    overflow: hidden;
    background: #000;
}

.watch-screen video {
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    /* Width matches the screen container; height stays proportional (no stretching) */
    width: 100%;
    height: auto;
    transition: opacity 0.5s ease-in-out;
}

.watch-frame {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    user-select: none;
    -webkit-user-drag: none;
    z-index: 2;
}

/* watchOS-style "app loading" spinner shown while the video buffers.
   Transparent background so the video element's <poster> (first frame)
   shows through — user gets meaningful content immediately instead of
   black-screen-with-spinner. */
.watch-loader {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    z-index: 1; /* below the frame (z-index 2) so the bezels clip it */
    pointer-events: none;
    transition: opacity 0.35s ease;
}

.watch-loader.hidden {
    opacity: 0;
}

/* watchOS-style 6-dot throbber: brightness rotates around the circle */
.watch-loader-spinner {
    position: relative;
    width: 40px;
    height: 40px;
}

.watch-loader-spinner > div {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 9px;
    height: 9px;
    margin: -4.5px 0 0 -4.5px;
    border-radius: 50%;
    background: #FFFFFF;
    animation: watchSpinnerFade 0.9s linear infinite;
}

.watch-loader-spinner > div:nth-child(1) { transform: translate(0, -13.5px);         animation-delay: 0s; }
.watch-loader-spinner > div:nth-child(2) { transform: translate(11.692px, -6.75px);  animation-delay: -0.75s; }
.watch-loader-spinner > div:nth-child(3) { transform: translate(11.692px, 6.75px);   animation-delay: -0.6s; }
.watch-loader-spinner > div:nth-child(4) { transform: translate(0, 13.5px);          animation-delay: -0.45s; }
.watch-loader-spinner > div:nth-child(5) { transform: translate(-11.692px, 6.75px);  animation-delay: -0.3s; }
.watch-loader-spinner > div:nth-child(6) { transform: translate(-11.692px, -6.75px); animation-delay: -0.15s; }

@keyframes watchSpinnerFade {
    0% { opacity: 1; }
    100% { opacity: 0.22; }
}

/* Hero backdrop — monochrome wireframe map of the San Juans that appears
   while the watch's route picker is open. JS controls opacity + active route. */
.hero-backdrop {
    position: absolute;
    inset: -10% -5%;  /* slightly oversized so vignette doesn't clip the routes */
    z-index: 0;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.6s ease-in-out;
    /* radial vignette so the wireframe fades out toward the hero edges */
    -webkit-mask-image: radial-gradient(ellipse 55% 65% at 50% 50%, black 20%, transparent 85%);
    mask-image: radial-gradient(ellipse 55% 65% at 50% 50%, black 20%, transparent 85%);
}

.hero-backdrop svg {
    display: block;
    width: 100%;
    height: 100%;
}

/* Map SVG styles — wireframe land + green routes/dots */
.sanjuans-map .map-land path {
    fill: none;
    stroke: rgba(226, 232, 240, 0.20);
    stroke-width: 1;
    stroke-linejoin: round;
    stroke-linecap: round;
    vector-effect: non-scaling-stroke;
}

.sanjuans-map .map-routes path {
    fill: none;
    stroke: var(--accent);
    stroke-width: 3;
    stroke-linecap: round;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
    opacity: 0;
    transition: opacity 0.25s ease;
    filter: drop-shadow(0 0 8px rgba(52, 211, 153, 0.65));
}

.sanjuans-map .map-routes path.is-active {
    opacity: 1;
}

.sanjuans-map .map-terminals circle {
    fill: var(--accent);
    stroke: rgba(5, 8, 15, 0.85);
    stroke-width: 2;
    vector-effect: non-scaling-stroke;
    opacity: 0.55;
    transition: opacity 0.4s ease, r 0.4s ease, filter 0.4s ease;
}

.sanjuans-map .map-terminals circle.is-endpoint {
    opacity: 1;
    filter: drop-shadow(0 0 6px rgba(52, 211, 153, 0.7));
}

@media (prefers-reduced-motion: reduce) {
    .hero-backdrop,
    .sanjuans-map .map-routes path,
    .sanjuans-map .map-terminals circle {
        transition: none;
    }
}

/* Prose blocks */
.prose,
.status-card {
    max-width: 760px;
    margin: 0 auto;
    padding: 56px 0;
    border-top: 1px solid var(--border);
}

.prose h2,
.status-card h2 {
    margin: 0 0 24px;
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--text-dim);
}

.prose p {
    font-size: 1.1rem;
    line-height: 1.7;
    color: var(--text);
    margin: 0 0 16px;
}

.prose p:last-child {
    color: var(--text-muted);
    margin-bottom: 0;
}

/* iOS / iPhone showcase section */
.ios-section {
    max-width: 1100px;
    margin: 0 auto;
    padding: 80px 0;
    border-top: 1px solid var(--border);
    text-align: center;
}

.ios-section > h2 {
    margin: 0 0 14px;
    font-size: clamp(2rem, 3vw, 2.75rem);
    font-family: Georgia, serif;
    font-weight: 400;
    letter-spacing: -0.025em;
    line-height: 1.1;
    color: var(--text);
}

.ios-section-caption {
    margin: 0 auto 56px;
    font-size: 1.05rem;
    color: var(--text-muted);
    max-width: 560px;
    line-height: 1.6;
}

.ios-hero-stage {
    display: flex;
    justify-content: center;
    position: relative;
    margin-bottom: 96px;
}

/* Side-by-side watch + iPhone pair within the iOS-section hero. */
.device-pair {
    display: flex;
    align-items: flex-end;  /* foot-aligned: both devices "stand" on the same line */
    gap: 56px;
    position: relative;
    z-index: 1;
}

/* Secondary watch (in the watch+iPhone pair) — smaller than the hero watch,
   no perspective tilt so it sits cleanly next to the iPhone. */
.watch-device-secondary {
    width: 160px;
    aspect-ratio: 280 / 440;
    position: relative;
    filter: drop-shadow(0 20px 32px rgba(0, 0, 0, 0.5));
    transform: none;
}

/* Static image inside the watch screen (vs. the video in the hero watch) */
.watch-device-secondary .watch-screen img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.watch-device-secondary .watch-frame {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    user-select: none;
    -webkit-user-drag: none;
    z-index: 2;
}

.ios-hero-stage::before {
    content: '';
    position: absolute;
    inset: 0% 20%;
    background: radial-gradient(ellipse at center, rgba(52, 211, 153, 0.18), transparent 70%);
    filter: blur(50px);
    z-index: 0;
    pointer-events: none;
}

.ios-device {
    position: relative;
    width: 280px;
    aspect-ratio: 1380 / 2880;
    filter: drop-shadow(0 30px 50px rgba(0, 0, 0, 0.55));
    z-index: 1;
}

.ios-device-hero {
    width: 300px;
    transform: perspective(1500px) rotateY(-3deg) rotateX(2deg);
}

.ios-screen {
    /* Measured against the 1380x2880 iPhone frame PNG:
       screen starts 73px from top, 60px in from each side,
       and the screen content is 1260x2736. */
    position: absolute;
    top: 2.535%;     /* 73 / 2880 */
    left: 4.348%;    /* 60 / 1380 */
    width: 91.304%;  /* 1260 / 1380 */
    height: 95.000%; /* 2736 / 2880 */
    /* Single-axis percentage would create stretched ellipses on the tall screen;
       split syntax gives equal-pixel circular corners (13% of width ≈ 6% of height). */
    border-radius: 13% / 6%;
    overflow: hidden;
    background: #000;
}

.ios-screen video,
.ios-screen img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
}

.ios-frame {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    user-select: none;
    -webkit-user-drag: none;
    z-index: 2;
}

/* Subhead between the watch+iPhone hero pair and the iOS feature grid. */
.ios-section-divider {
    text-align: center;
    margin: 0 auto 48px;
    max-width: 640px;
}

.ios-section-subhead {
    margin: 0 0 10px;
    font-family: Georgia, serif;
    font-weight: 400;
    font-size: clamp(1.5rem, 2.2vw, 2rem);
    letter-spacing: -0.02em;
    line-height: 1.15;
    color: var(--text);
}

.ios-section-subhead-caption {
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--text-muted);
}

.ios-feature-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 56px;
    max-width: 880px;
    margin: 0 auto;
}

.ios-feature {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

.ios-feature .ios-device {
    width: 220px;
    transform: none;
}

.ios-feature h3 {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text);
}

.ios-feature p {
    margin: 0 auto;
    color: var(--text-muted);
    font-size: 0.95rem;
    line-height: 1.55;
    max-width: 32ch;
}

@media (max-width: 760px) {
    .ios-section {
        padding: 56px 0;
    }
    .ios-hero-stage {
        margin-bottom: 64px;
    }
    .device-pair {
        gap: 32px;
    }
    .watch-device-secondary {
        width: 120px;
    }
    .ios-device-hero {
        width: 200px;
        transform: none;
    }
    .ios-feature .ios-device {
        width: 200px;
    }
    .ios-feature-grid {
        grid-template-columns: 1fr;
        gap: 64px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ios-device-hero {
        transform: none;
    }
}

/* Status timeline */
.timeline {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 28px;
    position: relative;
}

.timeline::before {
    content: '';
    position: absolute;
    left: 7px;
    top: 12px;
    bottom: 12px;
    width: 1px;
    background: linear-gradient(180deg, var(--accent) 0%, var(--border) 100%);
    opacity: 0.35;
}

.timeline li {
    position: relative;
    padding-left: 32px;
}

.timeline-marker {
    position: absolute;
    left: 0;
    top: 6px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 2px solid var(--border-strong);
    background: var(--bg);
}

.timeline-done .timeline-marker {
    border-color: var(--accent);
    background: var(--accent);
    box-shadow: 0 0 0 4px rgba(52, 211, 153, 0.15);
}

.timeline-next .timeline-marker {
    border-color: var(--accent);
    background: var(--bg);
}

.timeline h3 {
    margin: 0 0 4px;
    font-size: 1.05rem;
    font-weight: 600;
}

.timeline p {
    margin: 0;
    color: var(--text-muted);
    line-height: 1.6;
}

.timeline a {
    color: var(--accent);
    border-bottom: 1px solid transparent;
    transition: border-color 0.2s ease;
}

.timeline a:hover {
    border-bottom-color: var(--accent);
}

/* "One more thing" — delay cascade reveal */
.one-more-thing {
    max-width: 1100px;
    margin: 0 auto;
    padding: 96px 0;
    border-top: 1px solid var(--border);
    display: grid;
    /* Same trick as the hero: content-sized columns centered as a pair so
       the text and iPhone don't get pushed to opposite edges of the section. */
    grid-template-columns: auto auto;
    justify-content: center;
    gap: 72px;
    align-items: center;
}

.omt-content {
    max-width: 520px;  /* keeps line-length readable now that the column is content-sized */
}

.omt-eyebrow {
    display: block;
    margin-bottom: 16px;
    font-family: Georgia, serif;
    font-style: italic;
    font-size: 1.05rem;
    letter-spacing: 0.01em;
    color: var(--accent);
}

.omt-content h2 {
    margin: 0 0 28px;
    font-family: Georgia, serif;
    font-weight: 400;
    font-size: clamp(2.2rem, 4vw, 3.2rem);
    letter-spacing: -0.025em;
    line-height: 1.05;
    color: var(--text);
}

.omt-content p {
    margin: 0 0 18px;
    font-size: 1rem;
    line-height: 1.7;
    color: var(--text);
}

.omt-content em {
    color: var(--accent);
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 0.88em;
    font-style: normal;
    letter-spacing: 0.01em;
}

.omt-content em.omt-late {
    color: #F87171;
}

.omt-content .omt-footnote {
    margin-top: 28px;
    color: var(--text-dim);
    font-size: 0.85rem;
    font-style: italic;
}

.omt-device-stage {
    display: flex;
    justify-content: center;
    position: relative;
}

.omt-device-stage::before {
    /* subtle red-amber glow behind the device — calls back to the "late" tone */
    content: '';
    position: absolute;
    inset: 5% 15%;
    background: radial-gradient(ellipse at center, rgba(248, 113, 113, 0.16), transparent 70%);
    filter: blur(50px);
    z-index: 0;
    pointer-events: none;
}

.omt-device-stage .ios-device {
    width: 270px;
    z-index: 1;
}

@media (max-width: 760px) {
    .one-more-thing {
        grid-template-columns: 1fr;
        gap: 48px;
        padding: 64px 0;
    }
    .omt-device-stage .ios-device {
        width: 220px;
    }
}

/* Disclaimer / unaffiliated boilerplate at the bottom of the page */
.disclaimer {
    max-width: 760px;
    margin: 64px auto 0;
    padding: 24px 0 16px;
    border-top: 1px solid var(--border);
}

.disclaimer p {
    margin: 0;
    font-size: 0.78rem;
    line-height: 1.6;
    color: var(--text-dim);
}

.disclaimer em {
    font-style: italic;
}

.disclaimer-link {
    color: var(--text-muted);
    border-bottom: 1px solid var(--border-strong);
    transition: color 0.2s ease, border-color 0.2s ease;
}

.disclaimer-link:hover {
    color: var(--accent);
    border-bottom-color: var(--accent);
}

/* Reduced motion respect */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .status-dot { animation: none; }
    .watch-device { transform: none; }
    .feature-list li:hover { transform: none; }
    .watch-loader-spinner > div { animation: none; opacity: 0.45; }
}

/* Responsive */
@media (max-width: 760px) {
    .hero {
        grid-template-columns: 1fr;
        gap: 48px;
        /* Extra top padding creates a dedicated zone above the watch for the
           map backdrop (which lives there on mobile, since the watch obscures
           it when placed underneath). */
        padding: 105px 0 64px;
    }
    .watch-stage {
        order: -1;
    }
    .hero-text {
        align-items: flex-start;
    }
    .watch-device {
        transform: none;
        width: min(220px, 50vw);
    }
    .hero-backdrop {
        /* Larger canvas than the visible map area so the radial fade has room
           to soften out beyond what you actually see. Vertical extends above
           the hero (negative top) into the URL-bar zone, horizontal blows past
           the viewport edges — the mask handles the dissolve in both axes.
           The SVG inside uses preserveAspectRatio=slice so it fills this
           bigger canvas; the islands re-center via the radial mask. */
        inset: -40px -25% auto -25%;
        height: 220px;
        -webkit-mask-image: radial-gradient(ellipse 70% 80% at 50% 55%, black 15%, transparent 100%);
        mask-image: radial-gradient(ellipse 70% 80% at 50% 55%, black 15%, transparent 100%);
    }
    /* Safari iOS 26+ Liquid Glass: samples background of fixed/sticky elements
       near viewport edges for URL-bar tint. A full-viewport fixed element with
       a multi-layer background trips a known sampling glitch that paints a
       visible band under the URL bar. Drop it on mobile and let Safari fall
       back to body bg (a clean flat color), which matches the visible page. */
    .page-bg {
        display: none;
    }
}

@media (max-width: 640px) {
    .page-nav,
    .page-footer,
    main {
        padding-left: 24px;
        padding-right: 24px;
    }
    .prose,
    .features,
    .status-card {
        padding: 40px 0;
    }
    .feature-list li {
        padding: 20px 22px;
    }
}