/* ============================================================
   Sireni  —  Coming Soon
   style.css  |  full-viewport · no side margins · dark aurora
   ============================================================ */

/* ── Reset ───────────────────────────────────────────────── */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* ── Base ────────────────────────────────────────────────── */
html {
    font-size: 16px;
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
}

body {
    font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 1rem;
    line-height: 1.6;
    color: #b8cdd8;

    /* Deep navy base — dark background the user prefers */
    background-color: #0b0d1e;

    min-height: 100dvh;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

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

img, svg {
    display: block;
}

/* ── Noise texture overlay (subtle film grain, like LangSmith) */
body::after {
    content: '';
    position: fixed;
    inset: 0;
    z-index: 50;
    pointer-events: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
    background-size: 200px 200px;
    opacity: 0.028;
}

/* ── Aurora glow layer ───────────────────────────────────── */
/*  Fixed behind everything; blurred colour orbs that slowly  */
/*  drift — gives the "LangSmith" ambient glow effect.        */

.aurora {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
}

.orb {
    position: absolute;
    border-radius: 50%;
    will-change: transform;
}

/* large teal-navy orb — top left */
.orb-1 {
    width: min(70vw, 860px);
    height: min(70vw, 860px);
    background: radial-gradient(circle at 40% 40%,
        rgba(101, 139, 134, 0.55) 0%,
        rgba(56,  68,  90, 0.3)  40%,
        transparent               75%);
    top: -20%;
    left: -18%;
    filter: blur(72px);
    animation: drift1 26s ease-in-out infinite;
}

/* smaller bright aqua orb — top right */
.orb-2 {
    width: min(52vw, 640px);
    height: min(52vw, 640px);
    background: radial-gradient(circle at 60% 40%,
        rgba(140, 202, 172, 0.38) 0%,
        rgba(101, 139, 134, 0.2)  45%,
        transparent               75%);
    top: -5%;
    right: -14%;
    filter: blur(80px);
    animation: drift2 32s ease-in-out infinite;
    animation-delay: -10s;
}

/* wide dark-navy orb — bottom centre */
.orb-3 {
    width: min(80vw, 1000px);
    height: min(80vw, 1000px);
    background: radial-gradient(circle at 50% 55%,
        rgba(47, 53, 82, 0.7)  0%,
        rgba(32, 30, 67, 0.4)  50%,
        transparent             80%);
    bottom: -30%;
    left: 15%;
    filter: blur(90px);
    animation: drift3 28s ease-in-out infinite;
    animation-delay: -6s;
}

/* small warm aqua accent — mid left */
.orb-4 {
    width: min(38vw, 460px);
    height: min(38vw, 460px);
    background: radial-gradient(circle at 50% 50%,
        rgba(127, 181, 159, 0.28) 0%,
        transparent               70%);
    top: 40%;
    left: -5%;
    filter: blur(60px);
    animation: drift4 22s ease-in-out infinite;
    animation-delay: -14s;
}

@keyframes drift1 {
    0%,100% { transform: translate(0,    0)    scale(1);    }
    30%      { transform: translate(50px,-70px) scale(1.06); }
    65%      { transform: translate(80px, 40px) scale(0.95); }
}
@keyframes drift2 {
    0%,100% { transform: translate(0,   0)    scale(1);    }
    35%      { transform: translate(-60px,80px) scale(1.08); }
    70%      { transform: translate(40px,-40px) scale(0.94); }
}
@keyframes drift3 {
    0%,100% { transform: translate(0,   0)    scale(1);    }
    40%      { transform: translate(-40px,-50px) scale(1.04); }
    75%      { transform: translate(60px, 30px) scale(0.97); }
}
@keyframes drift4 {
    0%,100% { transform: translate(0,    0)    scale(1);    }
    45%      { transform: translate(30px,-60px) scale(1.1);  }
    80%      { transform: translate(-20px,40px) scale(0.92); }
}

/* ── Particle canvas layer ───────────────────────────────── */
.particle-layer {
    position: fixed;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    overflow: hidden;
}

.particle-layer canvas {
    display: block;
    width: 100%;
    height: 100%;
}

/* the second canvas (footer-particles) is only kept for JS compat */
.offscreen-canvas {
    position: absolute;
    top: -9999px;
    left: -9999px;
    width: 1px !important;
    height: 1px !important;
    opacity: 0;
    pointer-events: none;
}

/* ── Page shell — full-viewport, no side gaps ────────────── */
.page {
    position: relative;
    z-index: 10;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    /* CRITICAL: no max-width, no horizontal margin */
    width: 100%;
}

/* ── Header ──────────────────────────────────────────────── */
.header {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 100;
    height: 68px;
    display: flex;
    align-items: center;

    /* Glass bar */
    background: rgba(11, 13, 30, 0.5);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid rgba(140, 202, 172, 0.07);
}

.header-inner {
    width: 100%;
    padding: 0 clamp(24px, 5vw, 56px);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.header-logo {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.logo-img {
    height: 44px;
    width: auto;
    filter: drop-shadow(0 2px 12px rgba(140, 202, 172, 0.18));
    transition: filter 0.3s ease;
}
.logo-img:hover {
    filter: drop-shadow(0 4px 20px rgba(140, 202, 172, 0.38));
}

.header-nav {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Shared icon button style (header + footer) */
.icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    color: rgba(140, 202, 172, 0.65);
    background: rgba(140, 202, 172, 0.07);
    border: 1px solid rgba(140, 202, 172, 0.13);
    text-decoration: none;
    transition:
        background 0.2s ease,
        color 0.2s ease,
        border-color 0.2s ease,
        transform 0.2s ease;
}
.icon-btn:hover {
    background: rgba(140, 202, 172, 0.16);
    color: #8ccaac;
    border-color: rgba(140, 202, 172, 0.28);
    transform: translateY(-1px);
}

/* ── Main / Hero ─────────────────────────────────────────── */
.main {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 120px clamp(20px, 5vw, 48px) 80px;
}

.hero {
    width: 100%;
    max-width: 560px;
    text-align: center;
}

/* Glass card */
.card {
    position: relative;
    overflow: hidden;
    border-radius: 24px;
    padding: clamp(44px, 7vw, 72px) clamp(32px, 6vw, 64px);

    background: rgba(11, 13, 30, 0.52);
    backdrop-filter: blur(28px);
    -webkit-backdrop-filter: blur(28px);

    /* layered shadows + border ring */
    border: 1px solid rgba(140, 202, 172, 0.13);
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.03),
        0 24px 64px rgba(11, 13, 30, 0.65),
        0 4px 16px rgba(11, 13, 30, 0.4);
}

/* Shimmer highlight along top edge */
.card::before {
    content: '';
    position: absolute;
    top: 0; left: 10%; right: 10%;
    height: 1px;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(140, 202, 172, 0.55) 50%,
        transparent 100%
    );
}

/* Soft inner glow that reacts to the aurora beneath */
.card-glow {
    position: absolute;
    inset: -40px;
    border-radius: 50%;
    background: radial-gradient(
        ellipse at 50% 0%,
        rgba(101, 139, 134, 0.15) 0%,
        transparent 70%
    );
    pointer-events: none;
    z-index: 0;
}

/* All content sits above the glow */
.card > *:not(.card-glow) {
    position: relative;
    z-index: 1;
}

/* ── Card orbit blip ─────────────────────────────────────── */
/*  @property lets us animate a CSS custom angle so the       */
/*  conic-gradient start point can spin smoothly.             */
@property --blip-angle {
    syntax: '<angle>';
    initial-value: 0deg;
    inherits: false;
}

.card::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 24px;
    pointer-events: none;
    z-index: 2;

    /* Glowing blip: bright head fading into a comet tail */
    background: conic-gradient(
        from var(--blip-angle),
        rgba(140, 202, 172, 0.0)  0deg,
        rgba(140, 202, 172, 0.95) 2deg,
        rgba(140, 202, 172, 0.55) 6deg,
        rgba(140, 202, 172, 0.0)  14deg,
        transparent               14deg 360deg
    );

    /* Mask: show only the thin border ring, hide the interior */
    -webkit-mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    padding: 1.5px;

    /* Spin: one full lap in 2s. Fade: 2s visible + 2.5s dark gap = 4.5s cycle */
    animation:
        blipSpin 3s   linear       infinite,
        blipFade 4.5s ease-in-out  infinite;
}

@keyframes blipSpin {
    from { --blip-angle: 0deg;   }
    to   { --blip-angle: 360deg; }
}

@keyframes blipFade {
    0%   { opacity: 0; }   /* start invisible          */
    4%   { opacity: 1; }   /* quick fade-in (~0.18s)   */
    40%  { opacity: 1; }   /* hold through the lap     */
    46%  { opacity: 0; }   /* fade-out as lap finishes */
    100% { opacity: 0; }   /* dark gap — ~2.5s pause   */
}

/* badge pill */
.badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: #8ccaac;
    background: rgba(140, 202, 172, 0.09);
    border: 1px solid rgba(140, 202, 172, 0.2);
    border-radius: 100px;
    padding: 6px 16px;
    margin-bottom: 32px;
}

/* card-centre logo */
.card-logo {
    width: 88px;
    height: 88px;
    object-fit: contain;
    margin: 0 auto 20px;
    filter: drop-shadow(0 4px 18px rgba(140, 202, 172, 0.28));
}

/* Main wordmark */
.hero-title {
    font-family: "Space Grotesk", "Inter", system-ui, sans-serif;
    font-size: clamp(60px, 11vw, 96px);
    font-weight: 700;
    letter-spacing: -0.045em;
    line-height: 1;
    margin-bottom: 18px;

    /* gradient text — white to soft aqua */
    background: linear-gradient(
        150deg,
        #ffffff  0%,
        #d4eee4  55%,
        #8ccaac  100%
    );
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Coming Soon */
.hero-sub {
    font-family: "Space Grotesk", "Inter", system-ui, sans-serif;
    font-size: clamp(20px, 3.5vw, 28px);
    font-weight: 500;
    color: #8ccaac;
    letter-spacing: -0.01em;
    margin-bottom: 28px;
}

/* thin decorative rule */
.divider {
    width: 40px;
    height: 2px;
    margin: 0 auto 22px;
    border-radius: 2px;
    background: linear-gradient(90deg, #658b86 0%, #8ccaac 100%);
    opacity: 0.65;
}

/* sub-body line */
.hero-body {
    font-size: 14.5px;
    font-weight: 400;
    color: rgba(184, 205, 216, 0.55);
    letter-spacing: 0.01em;
    margin-bottom: 40px;
}

/* CTA button */
.cta-btn {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 13px 28px;
    border-radius: 12px;

    font-family: "Inter", system-ui, sans-serif;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.01em;
    color: #0b0d1e;
    text-decoration: none;

    background: linear-gradient(135deg, #8ccaac 0%, #6daf97 100%);
    box-shadow:
        0 0 0 1px rgba(140, 202, 172, 0.35),
        0 4px 20px rgba(140, 202, 172, 0.28);

    transition:
        opacity 0.2s ease,
        transform 0.2s ease,
        box-shadow 0.2s ease;
}
.cta-btn:hover {
    opacity: 0.9;
    transform: translateY(-2px);
    box-shadow:
        0 0 0 1px rgba(140, 202, 172, 0.45),
        0 8px 28px rgba(140, 202, 172, 0.36);
}
.cta-btn svg {
    transition: transform 0.2s ease;
    flex-shrink: 0;
}
.cta-btn:hover svg {
    transform: translateX(3px);
}

/* ── Footer ──────────────────────────────────────────────── */
.footer {
    padding: 18px clamp(24px, 5vw, 56px);
    border-top: 1px solid rgba(140, 202, 172, 0.07);
    background: rgba(11, 13, 30, 0.35);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

.footer-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
}

.footer-copy {
    font-size: 12.5px;
    font-weight: 400;
    color: rgba(184, 205, 216, 0.38);
    letter-spacing: 0.01em;
}

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 480px) {
    .card { border-radius: 18px; }
    .hero-title { letter-spacing: -0.035em; }
}

/* ── Reduced-motion safety ───────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .orb { animation: none !important; }
}