/* ==========================================================================
   Frasus Business Support — motion
   Parallax, scroll reveals and ambient animation for the public pages.

   Everything here is an enhancement layered on top of a page that is already
   complete and readable without it. Elements start visible and are only hidden
   once JavaScript confirms it can animate them (html.js-motion), so a failed
   script never leaves a blank page.
   ========================================================================== */

/* ---- Scroll reveal ---------------------------------------------------- */
.js-motion .reveal {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity .7s cubic-bezier(.22,.61,.36,1), transform .7s cubic-bezier(.22,.61,.36,1);
    will-change: opacity, transform;
}
.js-motion .reveal.is-visible { opacity: 1; transform: none; }

.js-motion .reveal--left  { transform: translateX(-32px); }
.js-motion .reveal--right { transform: translateX(32px); }
.js-motion .reveal--scale { transform: scale(.94); }

/* On narrow screens a sideways start position pushes content past the edge
   of the viewport and makes the whole page scroll sideways until the element
   is revealed. Rise vertically instead. */
@media (max-width: 900px) {
    .js-motion .reveal--left,
    .js-motion .reveal--right { transform: translateY(24px); }
}

/* Staggered children — a list that arrives all at once reads as a flash;
   40ms apart reads as deliberate. */
.js-motion .reveal-group > * {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity .6s cubic-bezier(.22,.61,.36,1), transform .6s cubic-bezier(.22,.61,.36,1);
}
.js-motion .reveal-group.is-visible > * { opacity: 1; transform: none; }
.js-motion .reveal-group.is-visible > *:nth-child(1) { transition-delay: 0ms; }
.js-motion .reveal-group.is-visible > *:nth-child(2) { transition-delay: 70ms; }
.js-motion .reveal-group.is-visible > *:nth-child(3) { transition-delay: 140ms; }
.js-motion .reveal-group.is-visible > *:nth-child(4) { transition-delay: 210ms; }
.js-motion .reveal-group.is-visible > *:nth-child(5) { transition-delay: 280ms; }
.js-motion .reveal-group.is-visible > *:nth-child(6) { transition-delay: 350ms; }

/* ---- Parallax --------------------------------------------------------- */
/* Driven by a CSS custom property the script updates on scroll, so the
   browser compositor does the work and there is no layout thrash. */
.parallax { will-change: transform; transform: translate3d(0, var(--parallax-y, 0), 0); }

.hero-stage { position: relative; }

/* The ambient orbs are sized for a desktop hero. On a phone they reach past
   the viewport edge and make the page scroll sideways; clip them there.
   `clip` rather than `hidden` so no scroll container is created. */
@media (max-width: 900px) {
    .hero-stage { overflow-x: clip; }
}

.hero-orb {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
    filter: blur(1px);
}
.hero-orb--1 { width: 340px; height: 340px; top: -90px; right: -80px;
    background: radial-gradient(circle at 30% 30%, rgba(21,101,192,.20), rgba(21,101,192,0) 70%); }
.hero-orb--2 { width: 240px; height: 240px; bottom: -60px; left: -70px;
    background: radial-gradient(circle at 60% 40%, rgba(211,47,47,.16), rgba(211,47,47,0) 70%); }
.hero-orb--3 { width: 160px; height: 160px; top: 40%; left: 55%;
    background: radial-gradient(circle at 50% 50%, rgba(30,136,229,.14), rgba(30,136,229,0) 70%); }

.hero-copy, .hero-visual { position: relative; z-index: 1; }

/* ---- Ambient float ---------------------------------------------------- */
@keyframes frasus-float {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-12px); }
}
.js-motion .float-slow { animation: frasus-float 7s ease-in-out infinite; }
.js-motion .float-mid  { animation: frasus-float 5.5s ease-in-out infinite .6s; }

/* ---- Counting statistics --------------------------------------------- */
.count-up { font-variant-numeric: tabular-nums; }

/* ---- Banded sections -------------------------------------------------- */
/* Full-bleed colour bands that break up a long white page. Negative margins
   escape the .wrap container without needing a different layout. */
/* 100vw includes the vertical scrollbar, so on Windows every full-bleed band
   is ~15px wider than the visible page and the whole site scrolls sideways.
   Clip the overflow at the content area; band content stays aligned because
   the extra width falls entirely off the right-hand edge. */
#main { overflow-x: clip; }

.band {
    position: relative;
    margin: 72px calc(50% - 50vw) 0;
    padding: 64px calc(50vw - 50%);
    overflow: hidden;
}
.band--tint { background: var(--md-surface-1); }
.band--deep {
    background: linear-gradient(140deg, #0d47a1 0%, var(--md-primary) 55%, #1e88e5 100%);
    color: #fff;
}
.band--deep h2, .band--deep h3, .band--deep h4 { color: #fff; }
.band--deep .muted { color: rgba(255,255,255,.80); }

/* Decorative diagonal on the deep band, parallaxed for depth. */
.band--deep::before {
    content: '';
    position: absolute; inset: -20% -10% auto auto;
    width: 60vw; height: 140%;
    background: rgba(255,255,255,.05);
    transform: rotate(14deg);
    pointer-events: none;
}

.band-inner { position: relative; z-index: 1; max-width: 1200px; margin: 0 auto; padding: 0; } /* the band's own padding already aligns it with .wrap */
@media (max-width: 640px) { .band { padding: 48px 0; } .band-inner { padding: 0 16px; } }

/* ---- Ticker ----------------------------------------------------------- */
.stat-ribbon {
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px;
    text-align: center;
}
.stat-ribbon .rib-value {
    display: block; font-size: 2.25rem; font-weight: 400; line-height: 1.1; letter-spacing: -.02em;
}
.stat-ribbon .rib-label {
    display: block; font-size: .8125rem; margin-top: 6px; opacity: .84;
}
@media (max-width: 760px) { .stat-ribbon { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 16px; } }

/* ---- App bar depth on scroll ----------------------------------------- */
/* The bar starts flat against the hero and gains elevation once the page
   moves, so it reads as lifting off the content rather than sitting on it. */
.topbar { transition: box-shadow .25s ease, background-color .25s ease; }
.topbar.is-scrolled { box-shadow: var(--md-elev-3); }

/* ---- Card lift on hover ---------------------------------------------- */
.lift { transition: transform .25s cubic-bezier(.22,.61,.36,1), box-shadow .25s ease; }
.lift:hover { transform: translateY(-4px); box-shadow: var(--md-elev-3); }

/* ---- Timeline (About page) ------------------------------------------- */
.story-line { position: relative; padding-left: 40px; }
.story-line::before {
    content: ''; position: absolute; left: 13px; top: 8px; bottom: 8px; width: 2px;
    background: linear-gradient(180deg, var(--md-primary), var(--md-secondary));
    opacity: .28;
}
.story-item { position: relative; padding-bottom: 32px; }
.story-item:last-child { padding-bottom: 0; }
.story-item::before {
    content: ''; position: absolute; left: -33px; top: 6px;
    width: 12px; height: 12px; border-radius: 50%;
    background: var(--md-primary); box-shadow: 0 0 0 4px var(--md-primary-container);
}
.story-item h3 { margin-bottom: 4px; }
.story-item p { margin: 0; color: var(--md-on-surface-variant); font-size: .9375rem; }

/* ---- Value cards ------------------------------------------------------ */
.value-card { position: relative; overflow: hidden; }
.value-card::after {
    content: ''; position: absolute; right: -30px; top: -30px;
    width: 110px; height: 110px; border-radius: 50%;
    background: var(--md-primary-container); opacity: .5; z-index: 0;
}
.value-card > * { position: relative; z-index: 1; }
.value-card--red::after { background: var(--md-secondary-container); }

/* ---- Respect the user's setting -------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .js-motion .reveal,
    .js-motion .reveal-group > * {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
    .js-motion .float-slow, .js-motion .float-mid { animation: none !important; }
    .parallax { transform: none !important; }
    .lift { transition: none; }
    .lift:hover { transform: none; }
}