/* ============================================================================
   Anirup Interiors — public welcome page · LIGHT EDITION.
   A calm, daylight, editorial hero: warm ivory paper, slow-drifting champagne &
   rose aurora, a faint constellation of brand-red dust, a Fraunces headline on
   the left + a realistic floating "Anirup ERP" product window on the right.
   Designed to be EASY ON THE EYES — warm paper instead of glare-white, high text
   contrast, soft shadows, gentle slow motion. Tokens inherit from app.css.
   Fully usable (and good-looking) without JS; all motion respects reduced-motion.
   ========================================================================== */
.welcome {
    /* Page-scoped light palette — nothing here leaks into the app theme. */
    --w-bg: #FBF8F2;          /* warm ivory paper — low glare */
    --w-bg-2: #F1E9DA;        /* deeper sand at the edges */
    --w-ink: #1E1A16;         /* headlines — warm near-black, strong contrast */
    --w-body: #56504A;        /* lead + body copy */
    --w-muted: #8C857A;       /* small labels */
    --w-line: #E9DFCF;        /* warm hairline */
    --w-card: #FFFFFF;
    --w-card-line: #ECE3D4;
    --w-gold: #C2A263;        /* champagne metallic accent */
    --w-shadow: 36px 60px -36px rgba(73, 54, 28, .42);

    margin: 0; min-height: 100vh; min-height: 100dvh;
    background: var(--w-bg);
    color: var(--w-body);
    font-family: var(--font-ui);
    overflow: hidden;
    -webkit-font-smoothing: antialiased;
}
.welcome h1 { color: var(--w-ink); }
.text-red { color: var(--anirup-red); }
/* If the browser viewport ever extends past the body (mobile URL-bar / edge-to-edge
   quirks), show warm sand behind it instead of a stark white band. (No overflow
   rules here — clipping the root would freeze page scrolling entirely.) */
html:has(body.welcome) { background: #F1E8D8; }

/* ---- Hero shell + light atmosphere ---------------------------------------- */
.hero {
    position: relative; min-height: 100vh; min-height: 100dvh;
    display: flex; flex-direction: column; justify-content: center;
    padding: clamp(6rem, 11vh, 8.5rem) clamp(1.25rem, 5vw, 5.5rem) clamp(7rem, 13vh, 9rem);
    overflow: hidden; isolation: isolate;
    background:
        radial-gradient(140% 120% at 50% -20%, #FFFDF9 0%, transparent 46%),
        linear-gradient(180deg, #FBF8F2 0%, #F6EFE2 58%, #F1E8D8 100%);
}
.hero-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; z-index: 1; opacity: .9; }

/* Soft, slow-drifting aurora — pointer-parallaxed via --px/--py from welcome.js. */
.hero-aurora {
    position: absolute; inset: -12%; z-index: 0; pointer-events: none;
    background:
        radial-gradient(38% 42% at 78% 24%, rgba(232, 22, 31, .12), transparent 64%),
        radial-gradient(34% 40% at 18% 30%, rgba(194, 162, 99, .20), transparent 66%),
        radial-gradient(46% 52% at 62% 88%, rgba(232, 120, 96, .12), transparent 70%);
    transform: translate(var(--px, 0), var(--py, 0));
    transition: transform .6s cubic-bezier(.2, .8, .2, 1);
    animation: auroraDrift 26s ease-in-out infinite;
    will-change: transform;
}
@keyframes auroraDrift {
    0%, 100% { background-position: 0 0, 0 0, 0 0; }
    50%      { background-position: 3% -2%, -3% 2%, 2% -3%; }
}
/* Whisper-soft framing: a touch more light up top, a gentle grounding at the foot. */
.hero-veil {
    position: absolute; inset: 0; z-index: 1; pointer-events: none;
    background:
        radial-gradient(70% 60% at 50% 6%, rgba(255, 255, 255, .5), transparent 60%),
        linear-gradient(180deg, transparent 62%, rgba(196, 170, 120, .10) 100%);
}
/* Grain (from app.css .grain::after) tuned warm + faint for paper texture. */
.hero.grain::after { z-index: 2; opacity: .035; mix-blend-mode: multiply; }

/* ---- Top nav -------------------------------------------------------------- */
.w-nav {
    position: absolute; inset: 0 0 auto 0; z-index: 6;
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    padding: clamp(1.1rem, 2.4vw, 1.9rem) clamp(1.25rem, 5vw, 5.5rem);
}
.w-brand { text-decoration: none; display: inline-flex; }
.w-nav-actions { display: flex; align-items: center; gap: 1.4rem; }
.w-nav-tag { font-family: var(--font-label); text-transform: uppercase; letter-spacing: .18em; font-size: .72rem; color: var(--w-muted); }

/* Brand lockup — the official Anirup logo (light-surface PNG, same asset family as the
   auth page). Height scales gently with the viewport; width follows the 700×339 ratio. */
.w-brand { align-items: center; }
.w-logo-img { height: clamp(3.5rem, 2rem + 3vh, 5rem); width: auto; display: block; filter: drop-shadow(0 6px 14px rgba(73, 54, 28, .14)); }

/* ---- Light-surface overrides for shared button / chip styles --------------- */
.welcome .btn-ghost {
    background: rgba(255, 255, 255, .55); border: 1px solid var(--w-line);
    color: var(--w-ink); font-weight: 600; backdrop-filter: blur(6px);
    display: inline-flex; align-items: center; gap: .35rem;
}
.welcome .btn-ghost:hover {
    background: #fff; border-color: var(--anirup-red-line); color: var(--anirup-red-hover);
    box-shadow: 0 10px 26px -16px rgba(73, 54, 28, .5);
}
.welcome .chip {
    background: rgba(255, 255, 255, .7); border: 1px solid var(--w-card-line);
    color: var(--w-body); box-shadow: 0 10px 22px -18px rgba(73, 54, 28, .5);
    backdrop-filter: blur(6px);
}
.welcome .chip i { color: var(--anirup-red); }

/* ---- Hero grid: editorial copy (left) + product window (right) ------------- */
.hero-grid {
    position: relative; z-index: 3;
    width: 100%; margin: 0 auto;
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.06fr);
    align-items: center; gap: clamp(2rem, 4.5vw, 4.5rem);
}
.hero-copy { max-width: 640px; }
.welcome .eyebrow { color: var(--anirup-red-hover); margin-bottom: 1.3rem; }
.welcome .eyebrow-rule::before { background: var(--w-gold); opacity: 1; }
.hero-title {
    font-family: var(--font-display); font-weight: 600;
    font-size: clamp(2.7rem, min(5.6vw, 7.6vh), 5.5rem); line-height: 1.02; letter-spacing: -.026em;
    margin: 0 0 1.5rem; font-optical-sizing: auto; text-wrap: balance; color: var(--w-ink);
}
.hero-lead { font-size: clamp(1.08rem, 1.4vw, 1.3rem); line-height: 1.62; color: var(--w-body); max-width: 33rem; margin: 0 0 2.1rem; }
.hero-cta { display: flex; gap: .9rem; flex-wrap: wrap; align-items: center; }
.hero-cta .btn { display: inline-flex; align-items: center; gap: .5rem; }
.hero-cta .btn-lg { font-size: 1.1rem; padding: .9rem 1.6rem; }
.hero-chips { list-style: none; margin: 2.3rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .65rem; }

/* ============================================================================
   Floating product window — a realistic, light preview of the live Anirup ERP.
   Gentle idle float on the frame; soft tilt on the glass; sheen sweep on load.
   ========================================================================== */
.hero-show { position: relative; justify-self: center; width: 100%; max-width: 620px; animation: floaty 7s ease-in-out infinite; }
.show-glow {
    position: absolute; inset: -14% -8% -20% -8%; z-index: 0; pointer-events: none;
    background:
        radial-gradient(52% 46% at 60% 30%, rgba(232, 22, 31, .16), transparent 70%),
        radial-gradient(46% 44% at 30% 80%, rgba(194, 162, 99, .18), transparent 72%);
    filter: blur(16px);
}
@keyframes floaty { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }

.app-window {
    position: relative; z-index: 1; border-radius: 16px; overflow: hidden;
    border: 1px solid var(--w-card-line); background: #fff;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, .9) inset,
        0 2px 6px rgba(73, 54, 28, .06),
        var(--w-shadow);
    transform: perspective(2000px) rotateY(-9deg) rotateX(3deg); transform-origin: 82% 50%;
    transition: transform .6s cubic-bezier(.2, .8, .2, 1);
}
/* A slow sheen that sweeps across the glass once on entrance, then on hover. */
.app-window::after {
    content: ""; position: absolute; inset: 0; z-index: 5; pointer-events: none;
    background: linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, .55) 50%, transparent 62%);
    transform: translateX(-120%); animation: sheen 5.5s ease-in-out 1.2s infinite;
}
@keyframes sheen { 0% { transform: translateX(-120%); } 22%, 100% { transform: translateX(120%); } }
@media (min-width: 1101px) { .app-window:hover { transform: perspective(2000px) rotateY(-3deg) rotateX(1deg); } }

/* browser chrome — light */
.aw-chrome { display: flex; align-items: center; gap: .7rem; padding: .58rem .9rem; background: #F4EFE6; border-bottom: 1px solid var(--w-card-line); }
.aw-dots { display: inline-flex; gap: .4rem; }
.aw-dots i { width: 10px; height: 10px; border-radius: 50%; }
.aw-dots i:nth-child(1) { background: #ff5f57; }
.aw-dots i:nth-child(2) { background: #febc2e; }
.aw-dots i:nth-child(3) { background: #28c840; }
.aw-url { margin: 0 auto; display: inline-flex; align-items: center; gap: .4rem; font-size: .72rem; color: #8a8378; padding: .25rem .85rem; border-radius: 999px; background: #fff; border: 1px solid var(--w-card-line); }
.aw-url .bi { font-size: .64rem; color: #16a34a; }
.aw-live { display: inline-flex; align-items: center; gap: .35rem; font-size: .64rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #149a45; }
.live-dot { width: 7px; height: 7px; border-radius: 50%; background: #28c840; box-shadow: 0 0 0 0 rgba(40, 200, 64, .55); animation: livePulse 2s ease-out infinite; }
@keyframes livePulse { 0% { box-shadow: 0 0 0 0 rgba(40, 200, 64, .5); } 70% { box-shadow: 0 0 0 7px rgba(40, 200, 64, 0); } 100% { box-shadow: 0 0 0 0 rgba(40, 200, 64, 0); } }

/* body: deep espresso rail (a contained focal contrast) + ivory workspace */
.aw-body { display: grid; grid-template-columns: 132px 1fr; min-height: 348px; }
.aw-side { background: linear-gradient(180deg, #241F22, #17131A); padding: .85rem .55rem; display: flex; flex-direction: column; gap: .1rem; border-right: 1px solid rgba(0, 0, 0, .2); }
.aw-brand { display: flex; align-items: center; gap: .42rem; padding: .15rem .45rem .75rem; }
.aw-peak { width: 17px; height: 17px; flex: 0 0 auto; }
.aw-brand span { font-family: var(--font-label); font-weight: 700; font-size: .82rem; color: #fff; letter-spacing: .01em; }
.aw-side-label { font-family: var(--font-label); text-transform: uppercase; letter-spacing: .14em; font-size: .52rem; color: rgba(255, 255, 255, .38); padding: .55rem .5rem .22rem; }
.aw-nav { display: flex; align-items: center; gap: .45rem; padding: .42rem .55rem; border-radius: 8px; font-size: .74rem; color: rgba(255, 255, 255, .62); white-space: nowrap; }
.aw-nav .bi { font-size: .82rem; color: rgba(255, 255, 255, .42); width: 14px; text-align: center; }
.aw-nav.active { background: linear-gradient(90deg, rgba(232, 22, 31, .28), rgba(232, 22, 31, .04)); color: #fff; box-shadow: inset 2px 0 0 var(--anirup-red); }
.aw-nav.active .bi { color: #ff5159; }

/* light workspace */
.aw-main { background: linear-gradient(180deg, #FCFAF6, #F4F0E8); display: flex; flex-direction: column; }
.aw-topbar { display: flex; align-items: center; justify-content: space-between; padding: .55rem .85rem; border-bottom: 1px solid #EAE1D2; background: rgba(255, 255, 255, .7); }
.aw-chip { display: inline-flex; align-items: center; gap: .38rem; font-size: .68rem; color: #4a4640; padding: .26rem .65rem; border-radius: 999px; background: #fff; border: 1px solid #EAE1D2; }
.aw-chip-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--anirup-red); }
.aw-avatar { width: 22px; height: 22px; border-radius: 50%; background: #fff; border: 1px solid #EAE1D2; display: grid; place-items: center; font-size: .68rem; color: #8a8378; }
.aw-content { padding: .9rem 1rem 1.1rem; display: grid; gap: .7rem; }
.aw-eyebrow { font-family: var(--font-label); text-transform: uppercase; letter-spacing: .15em; font-size: .55rem; color: var(--anirup-red); }
.aw-h1 { font-family: var(--font-display); font-weight: 600; font-size: 1.2rem; color: #1A1A1A; line-height: 1; margin-top: -.15rem; }

.aw-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; }
.aw-kpi { position: relative; background: #fff; border: 1px solid #EEE7DA; border-radius: 10px; padding: .55rem .6rem; display: grid; gap: .12rem; box-shadow: 0 8px 16px -12px rgba(80, 60, 30, .3); }
.aw-kpi-ic { width: 22px; height: 22px; border-radius: 7px; display: grid; place-items: center; background: var(--anirup-red-soft); color: var(--anirup-red); font-size: .72rem; margin-bottom: .12rem; }
.aw-kpi-l { font-size: .55rem; color: #8a8378; text-transform: uppercase; letter-spacing: .07em; }
.aw-kpi-v { font-family: var(--font-display); font-weight: 600; font-size: 1.18rem; line-height: 1; color: #1A1A1A; }
.aw-kpi-d { font-size: .58rem; color: #9a9384; }
.aw-kpi-d.up { color: #1a9d4e; font-weight: 600; }

.aw-flow { display: flex; align-items: center; gap: .3rem; background: #fff; border: 1px solid #EEE7DA; border-radius: 10px; padding: .55rem .7rem; }
.aw-step { display: flex; align-items: center; gap: .32rem; font-size: .64rem; color: #9a9384; white-space: nowrap; }
.aw-step.done { color: #3a3a3a; }
.aw-step.done .bi { color: #fff; background: var(--anirup-red); border-radius: 50%; width: 14px; height: 14px; font-size: .6rem; display: grid; place-items: center; }
.aw-step.cur { color: #1A1A1A; font-weight: 600; }
.aw-pip { width: 8px; height: 8px; border-radius: 50%; background: var(--anirup-red); box-shadow: 0 0 0 3px rgba(232, 22, 31, .16); }
.aw-conn { flex: 1; height: 2px; min-width: 8px; border-radius: 2px; background: #E7DFD2; }
.aw-conn.done { background: var(--anirup-red); }

.aw-graph { background: #fff; border: 1px solid #EEE7DA; border-radius: 10px; padding: .6rem .72rem .72rem; }
.aw-graph-head { display: flex; align-items: center; justify-content: space-between; font-size: .6rem; color: #8a8378; margin-bottom: .5rem; }
.aw-graph-pct { font-family: var(--font-label); font-weight: 700; color: #1A1A1A; }
.aw-bars { display: flex; align-items: flex-end; gap: .32rem; height: 50px; }
.aw-bars i { flex: 1; height: var(--h); border-radius: 3px 3px 1px 1px; background: linear-gradient(180deg, #ff6168, rgba(232, 22, 31, .25)); transform-origin: bottom; animation: barGrow 1s cubic-bezier(.2, .8, .2, 1) both; }
.aw-bars i:nth-child(1) { animation-delay: .9s; } .aw-bars i:nth-child(2) { animation-delay: .98s; }
.aw-bars i:nth-child(3) { animation-delay: 1.06s; } .aw-bars i:nth-child(4) { animation-delay: 1.14s; }
.aw-bars i:nth-child(5) { animation-delay: 1.22s; } .aw-bars i:nth-child(6) { animation-delay: 1.3s; }
.aw-bars i:nth-child(7) { animation-delay: 1.38s; } .aw-bars i:nth-child(8) { animation-delay: 1.46s; }
.aw-bars i:nth-child(6) { background: linear-gradient(180deg, #ff3b43, var(--anirup-red)); }
@keyframes barGrow { from { transform: scaleY(0); opacity: 0; } to { transform: scaleY(1); opacity: 1; } }

/* ---- Bottom stat strip + clients ------------------------------------------ */
.hero-foot {
    position: absolute; bottom: clamp(1.1rem, 3vh, 2rem); left: 0; right: 0; z-index: 3;
    display: flex; align-items: center; justify-content: space-between; gap: 1.4rem;
    padding: 0 clamp(1.25rem, 5vw, 5.5rem);
}
.stat-strip { display: flex; align-items: center; gap: clamp(.85rem, 1.7vw, 1.5rem); flex-wrap: wrap; }
.stat { display: flex; flex-direction: column; gap: .12rem; }
.stat-k { font-family: var(--font-display); font-weight: 600; font-size: 1.2rem; color: var(--w-ink); line-height: 1; letter-spacing: -.01em; white-space: nowrap; }
.stat-l { font-family: var(--font-label); text-transform: uppercase; letter-spacing: .13em; font-size: .62rem; color: var(--w-muted); white-space: nowrap; }
.stat-div { width: 1px; height: 26px; background: var(--w-line); }
.hero-clients { color: var(--w-body); font-size: .9rem; white-space: nowrap; }
.hc-label { font-family: var(--font-label); text-transform: uppercase; letter-spacing: .16em; font-size: .66rem; color: var(--w-muted); margin-right: .35rem; }

/* ---- Responsive ----------------------------------------------------------- */
@media (max-width: 1100px) {
    .hero-grid { grid-template-columns: 1fr; gap: 2.6rem; }
    .hero-show { max-width: 540px; }
    .app-window { transform: perspective(2000px) rotateY(-4deg) rotateX(1.5deg); }
    /* Foot pins to the bottom edge when content is short (no dead ivory band);
       when content is taller it simply follows the flow and the page scrolls. */
    .hero-foot { position: static; margin-top: auto; padding-top: 2.2rem; padding-left: 0; padding-right: 0; }
    /* `clip` (not `visible`): the aurora layer is intentionally 12% oversized for
       its drift, and unclipped it inflates the scrollable area ~12% beyond the
       screen on the right and bottom. Clip cuts decorations only — the hero still
       grows with its content and the page scrolls normally. */
    .hero { justify-content: flex-start; overflow: clip; padding-bottom: clamp(1.6rem, 4vh, 2.6rem); }
    .welcome { overflow-x: hidden; overflow-y: auto; }
}
@media (max-width: 720px) {
    .w-nav-tag { display: none; }
    .hero-show { display: none; }
    .hero-foot { flex-direction: column; align-items: flex-start; gap: .9rem; }
    .stat-strip { gap: 1rem 1.4rem; }
    .stat-div { display: none; }
    .hero-clients { white-space: normal; }

    /* Phone type scale — the desktop floor (2.7rem) reads huge on a 360–430px
       screen. Drop the forced break and give the red phrase its own line, so it
       reads: "From quotation / to container, / in one calm system." */
    .hero-title { font-size: clamp(2.05rem, 8.4vw, 2.6rem); margin-bottom: 1.1rem; }
    .hero-title br { display: none; }
    .hero-title .text-red { display: block; }
    .welcome .eyebrow { margin-bottom: 1rem; }
    .hero-lead { font-size: 1rem; line-height: 1.55; margin-bottom: 1.6rem; }
    .hero-cta .btn-lg { font-size: 1rem; padding: .78rem 1.2rem; min-height: 44px; }
    .hero-chips { margin-top: 1.5rem; }
    .welcome .chip { font-size: .85rem; padding: .42rem .78rem; }
}
@media (max-width: 560px) {
    .hero-cta { flex-direction: column; align-items: stretch; }
    .hero-cta .btn { width: 100%; justify-content: center; }
    /* Keep the (now larger) logo from crowding the Sign-in button on phones. */
    .w-logo-img { height: clamp(3.1rem, 9.5vw, 3.7rem); }
    /* Stats as a deliberate 2×2 grid (instead of a ragged 3+1 wrap). */
    .stat-strip { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .9rem 1.2rem; }
    .stat-k { font-size: 1.05rem; }
    /* "Trusted on" label on its own line so the client names never orphan a word. */
    .hc-label { display: block; margin: 0 0 .2rem; }
}

/* Landscape laptops — wide but short (≈620–880px tall). The tall-screen layout
   vertically centres the copy and pins the stat strip to the bottom edge with
   overflow hidden, which clips the lower content on short screens. Below 880px
   tall we switch to a top→bottom flow that scrolls only if it truly has to, and
   the headline already scales to height via the clamp()/min() above. */
@media (min-width: 1101px) and (max-height: 940px) {
    .welcome { overflow-y: auto; }
    .hero {
        justify-content: space-between;
        padding-top: clamp(5.5rem, 11vh, 6.75rem);
        padding-bottom: clamp(2rem, 5vh, 3.5rem);
    }
    .hero-foot { position: static; margin-top: clamp(1.25rem, 3.5vh, 2.25rem); padding-left: 0; padding-right: 0; }
    .hero-lead { margin-bottom: clamp(1.2rem, 2.6vh, 1.9rem); }
    .hero-chips { margin-top: clamp(1.1rem, 2.4vh, 1.9rem); }
}
@media (prefers-reduced-motion: reduce) {
    * { animation: none !important; transition: none !important; }
    .hero-aurora { transform: none !important; }
    .hero-show { animation: none !important; }
    .app-window { transform: none !important; }
    .app-window::after { display: none; }
    .aw-bars i { transform: none !important; opacity: 1 !important; }
}