/* ===========================================================================
   About MADDS — glass panel with living border, orbiting sunflower, glass cards.

   Loaded AFTER style.css + header-glass.css (see layout/base.html) so it wins on the
   .about-section rules without touching them. The glass recipe is deliberately the
   same one as the navbar (header-glass.css): blur(22px) saturate(180%) over a deep
   purple tint, so the panel reads as part of the same material as the navbar and
   the footer bar.

   Structure:
     .ag-panel          rotating magenta → orange → cyan gradient frame (the living border)
       .ag-panel__inner frosted glass surface
         .ag-visual     sunflower + orbiting service badges
         .ag-copy       heading, line-by-line reveal text, glass cards, stat counters
   =========================================================================== */

/* ---------- the section shell ---------------------------------------------- */

/* The section fills the whole view under the fixed navbar: its height is the viewport
   minus the compact navbar (--hdr-compact, measured by header-glass.js), the panel
   stretches edge to edge inside it, and the page gently snaps to it when scrolling close,
   so no hero above or next section below peeks in. On short / narrow screens, where the
   content is taller than the view, the section simply grows to fit the content.
   There is NO separate section background any more: the panel's own colour field below
   is the section background. */
.about-section {
    box-sizing: border-box;
    /* one-screen height + snapping: see sections-snap.css / sections-snap.js */
    display: flex;
    align-items: stretch;
    padding: 0;
    background: none;                   /* old pink/orange gradient removed */
    animation: none;
    overflow: hidden;
}

/* the old plain white outline frame is replaced by nothing at all */
.about-section::after {
    display: none;
}

/* full-bleed: drop the centred, max-width container for this section */
.about-section > .container {
    display: flex;
    align-items: stretch;
    flex: 1 1 auto;
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
}

/* ---------- the panel is now the whole section: no frame, no radius -------- */

.ag-panel {
    position: relative;
    flex: 1 1 auto;
    display: flex;
    padding: 0;
    border-radius: 0;
    overflow: hidden;                   /* clips the spinning gradient to the section */
    isolation: isolate;
    box-shadow: none;
}

/* the colour field that IS the section background — the original brand colours flowing
   in ONE direction in an endless loop (no bounce): the gradient ends on the colour it starts
   with, so the repeat is seamless, and the pan moves exactly one full tile per cycle. */
.ag-panel::before {
    content: "";
    position: absolute;
    z-index: 0;
    inset: 0;
    background: linear-gradient(90deg, #B51BB5 0%, #F0A400 25%, #AC20BC 50%, #43D2E0 75%, #B51BB5 100%);
    background-size: 200% 100%;
    background-repeat: repeat-x;
    animation: ag-gradient-flow 16s linear infinite;
    pointer-events: none;
}

@keyframes ag-gradient-flow {
    from { background-position: 0% 50%; }
    to   { background-position: 200% 50%; }      /* exactly one tile -> seamless loop */
}

/* frosted surface — same blur / tint family as the navbar glass */
.ag-panel__inner {
    position: relative;
    z-index: 1;
    flex: 1 1 auto;
    border: 0;
    border-radius: 0;
    background: linear-gradient(180deg,
        rgba(38, 13, 78, 0.16) 0%,
        rgba(38, 13, 78, 0.26) 100%);
    /* no blur: over a smooth gradient it adds nothing, and at the section's edges it
       sampled past the edge and left a pale band. The colour boost is kept. */
    -webkit-backdrop-filter: saturate(180%);
    backdrop-filter: saturate(180%);
    /* content stays in a comfortable column even on very wide screens */
    padding-block: clamp(1.6rem, 4vh, 3.6rem);
    /* padding-inline: max(clamp(1.25rem, 5vw, 4rem), calc((100% - 1400px) / 2)); */
    display: grid;
    padding-left: 0;
padding-right: max(clamp(1.25rem, 5vw, 4rem), calc((100% - 1400px) / 2));
    /* the flower column gets the extra room (was .92fr / 1.08fr) and the copy is
       pushed further right so the bigger scene never crowds it */
    grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr);
    gap: clamp(1.75rem, 4.5vw, 3.75rem);
    align-items: center;
    color: #fff;
    font-family: "Afacad", sans-serif;
}

/* browsers without backdrop-filter: solid tint so the text stays readable */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .ag-panel__inner {
        background: linear-gradient(180deg, rgba(38, 13, 78, 0.82), rgba(38, 13, 78, 0.7));
    }
}

/* ---------- left column: the living tech-flower scene ------------------------
   .ag-stage      square stage that everything floats inside
   .ag-orbit      layer of floating service badges (moved by js/flower-scene.js)
   .ag-sun-*      flower: scroll-spin -> mouse tilt -> float -> petals + centre disc
   .ag-butterfly  vector butterfly that flutters around and lands on the flower  */

.ag-visual {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    perspective: 900px;
}

.ag-stage {
    --r: clamp(128px, 18vw, 260px);     /* only used by the no-JS fallback ring */
    --flower-w: 86%;                    /* width of the flower inside the stage (was 80%) */
    --core-scale: 0.62;                /* size of the black centre ring + logo (1 = old size); the glass disc keeps its size so it still meets the petals */
    position: relative;
    flex: 0 0 auto;
    width: min(100%, 720px);            /* was 640px — the whole scene is bigger now */
    width: min(100%, 720px, 88svh);     /* …but never taller than the section view */
    aspect-ratio: 1 / 1;
}

/* display:contents keeps every badge in the stage's stacking context, so the
   script can slide each one in front of / behind the flower */
.ag-orbit {
    display: contents;
}

.ag-badge {
    --a: 0deg;
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 3;
    /* no-JS fallback: a static ring. flower-scene.js overrides this inline. */
    transform: translate(-50%, -50%) rotate(var(--a)) translateX(var(--r)) rotate(calc(-1 * var(--a)));
    pointer-events: auto;
    will-change: transform, opacity;
}

.ag-stage.ag-js .ag-badge {
    left: 0;
    top: 0;
}

.ag-badge:hover {
    z-index: 6 !important;
    opacity: 1 !important;
}

.ag-badge__in {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    white-space: nowrap;
    padding: 0.5rem 0.95rem;
    border-radius: 999px;
    font-size: 0.85rem;
    letter-spacing: 0.02em;
    color: #fff;
    background: rgba(255, 255, 255, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.38);
    -webkit-backdrop-filter: blur(10px) saturate(160%);
    backdrop-filter: blur(10px) saturate(160%);
    box-shadow: 0 10px 26px rgba(15, 0, 45, 0.22);
    transition: background 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
}

.ag-badge:hover .ag-badge__in {
    background: rgba(255, 255, 255, 0.26);
    border-color: rgba(255, 255, 255, 0.7);
    transform: scale(1.06);
}

.ag-badge__in i {
    font-size: 0.8rem;
    opacity: 0.9;
}

/* tooltip shown while the badge is hovered (the floating pauses at the same time) */
.ag-tip {
    position: absolute;
    left: 50%;
    bottom: calc(100% + 12px);
    transform: translate(-50%, 6px);
    width: max-content;
    max-width: 210px;
    white-space: normal;
    text-align: center;
    font-size: 0.78rem;
    line-height: 1.35;
    padding: 0.55rem 0.8rem;
    border-radius: 12px;
    color: #fff;
    background: rgba(28, 8, 62, 0.92);
    border: 1px solid rgba(255, 255, 255, 0.28);
    box-shadow: 0 14px 34px rgba(15, 0, 45, 0.35);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s;
    pointer-events: none;
}

.ag-badge:hover .ag-tip {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 0);
}

/* the flower itself:
   .ag-sun-scroll -> rotates slowly with the page scroll (ScrollTrigger scrub)
   .ag-sun-tilt   -> tilts a few degrees toward the mouse
   .ag-sun-float  -> gentle floating bob
   .ag-flower     -> petals layer + centre-disc layer that sway against each other */
.ag-sun-scroll,
.ag-sun-tilt,
.ag-sun-float {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    transform-style: preserve-3d;
}

.ag-sun-scroll {
    position: absolute;
    inset: 0;
    z-index: 2;
}

/* the flower layers span the whole stage; let hovers fall through to the badges
   (mouse tilt is listened for on .ag-visual, so it still works) */
.ag-sun-scroll,
.ag-sun-tilt,
.ag-sun-float {
    pointer-events: none;
}

.ag-sun-tilt,
.ag-sun-float {
    width: 100%;
    height: 100%;
}

.ag-sun-tilt {
    transition: transform 0.35s ease-out;
    will-change: transform;
}

.ag-sun-float {
    animation: ag-float 7s ease-in-out infinite alternate;
}

@keyframes ag-float {
    from { transform: translateY(-10px) rotate(-2deg); }
    to   { transform: translateY(12px) rotate(2deg); }
}

.ag-flower {
    position: relative;
    width: var(--flower-w);
    aspect-ratio: 1 / 1;
    /* no CSS filter here on purpose: the glow is drawn inside the SVG (halo + glow
       filters), because a big blur on constantly animating content is expensive */
}

/* ---- tech flower (inline SVG, partials/tech_flower.html) ----------------
   Layers, back to front: halo, HUD rings (STRATEGY + DESIGN + TECHNOLOGY text ring,
   MADDS-in-binary ring, tick rings, comet satellites, rotating star-polygon
   constellation), 24 glass blades, 16 circuit petals, radar sweep, 12 mid petals,
   8 gold-tipped inner petals, 36 filaments, then the core: a golden-angle seed
   spiral, hex rings and a glowing "M" chip. Sparkles and bokeh float on top.
   Every group rotates around the centre of the 600x600 viewBox. */
.ag-flower .tf {
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
    -webkit-user-select: none;
    user-select: none;
    pointer-events: none;
}

.ag-flower .tf-plate-grp {
    transform-box: view-box;
    transform-origin: 300px 300px;
    transform: scale(var(--core-scale));
}

.ag-flower .tf-spin,
.ag-flower .tf-sway,
.ag-flower .tf-sweep {
    transform-box: view-box;
    transform-origin: 300px 300px;
}

.tf-spin--cw    { animation: tf-spin 70s linear infinite; }
.tf-spin--ccw   { animation: tf-spin 46s linear infinite reverse; }
.tf-spin--x     { animation: tf-spin 11s linear infinite; }
.tf-spin--rev   { animation-direction: reverse; }
.tf-spin--slow  { animation-duration: 24s; }
.tf-spin--vslow { animation-duration: 150s; }
.tf-text-ring   { animation-duration: 120s; }

.tf-sweep       { animation: tf-spin 7s linear infinite; }

.tf-sway--a     { animation: tf-sway-a 9s ease-in-out infinite alternate; }
.tf-sway--b     { animation: tf-sway-b 9s ease-in-out infinite alternate; }
.tf-sway--c     { animation: tf-sway-b 12s ease-in-out infinite alternate-reverse; }
.tf-sway--d     { animation: tf-sway-a 7s ease-in-out infinite alternate-reverse; }

@keyframes tf-spin {
    to { transform: rotate(360deg); }
}

@keyframes tf-sway-a {
    from { transform: rotate(-2.5deg) scale(1); }
    50%  { transform: rotate(0.6deg) scale(1.018); }
    to   { transform: rotate(2.5deg) scale(1.03); }
}

@keyframes tf-sway-b {
    from { transform: rotate(1.8deg) scale(1); }
    to   { transform: rotate(-1.8deg) scale(1.02); }
}

/* a bright data packet travelling base -> tip along each vein */
.tf-pulse {
    stroke-dasharray: 9 91;
    stroke-dashoffset: 100;
    animation: tf-pulse 3.4s linear infinite;
}

.tf-pulse--fast {
    animation-duration: 2.4s;
}

@keyframes tf-pulse {
    0%   { stroke-dashoffset: 100; opacity: 0; }
    12%  { opacity: 1; }
    88%  { opacity: 1; }
    100% { stroke-dashoffset: 0; opacity: 0; }
}

/* sonar ping at every main petal tip */
.tf-ping {
    transform-box: fill-box;
    transform-origin: center;
    animation: tf-ping 3.4s ease-out infinite;
}

@keyframes tf-ping {
    0%   { transform: scale(0.5); opacity: 0.9; }
    70%  { transform: scale(2); opacity: 0; }
    100% { transform: scale(2); opacity: 0; }
}

/* core: seed points twinkle in three groups, the chip breathes */
.tf-tw {
    animation: tf-bit 2.6s ease-in-out infinite;
}

.tf-tw1 { animation-delay: -0.9s; }
.tf-tw2 { animation-delay: -1.7s; }

@keyframes tf-bit {
    0%, 100% { opacity: 0.25; }
    50%      { opacity: 1; }
}

.tf-chip {
    transform-box: fill-box;
    transform-origin: center;
    animation: tf-chip 2.6s ease-in-out infinite;
}

@keyframes tf-chip {
    0%, 100% { transform: scale(0.94); }
    50%      { transform: scale(1.1); }
}

/* four-point sparkles + drifting bokeh around the bloom */
.tf-spark {
    transform-box: fill-box;
    transform-origin: center;
    animation: tf-spark 3.4s ease-in-out infinite;
}

@keyframes tf-spark {
    0%, 100% { transform: scale(0.15) rotate(0deg); opacity: 0; }
    50%      { transform: scale(1) rotate(90deg); opacity: 1; }
}

.tf-bokeh {
    animation: tf-bokeh 5s ease-in-out infinite;
}

@keyframes tf-bokeh {
    0%, 100% { opacity: 0.1; transform: translateY(0); }
    50%      { opacity: 0.95; transform: translateY(-9px); }
}

/* the MADDS logo sits in the middle of the black centre ring. It is a child of .ag-sun-float, so it
   floats, tilts and sways exactly with the flower and can never drift off-centre. The
   scroll-spin on .ag-sun-scroll is cancelled on this element by about-glass.js, which keeps the
   logo upright. */
.ag-logo {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

/* soft light glow behind the logo so it lifts off the black centre ring.
   It is exactly the size of that ring and clipped to a circle, so nothing spills outside it. */
.ag-logo::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 0;
    width: calc(var(--flower-w) * 0.18 * var(--core-scale) * 0.98);
    aspect-ratio: 1 / 1;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: radial-gradient(circle closest-side,
        rgba(255, 255, 255, 0.60) 0%,
        rgba(158, 255, 255, 0.40) 55%,
        rgba(255, 255, 255, 0) 100%);       /* fades to nothing exactly at the circle's edge */
    clip-path: circle(50%);
    pointer-events: none;
}

.ag-logo-img {
    display: block;
    position: relative;
    z-index: 1;
    /* always a fixed fraction of the centre ring: ring diameter = 108/600 of the flower,
       scaled by --core-scale; the logo fills ~95% of it, so the two resize together */
    width: calc(var(--flower-w) * 0.18 * var(--core-scale) * 0.95);
    height: auto;
    filter: none;                       /* no outer halo: the glow lives only in the circle behind */
    -webkit-user-select: none;
    user-select: none;
    -webkit-user-drag: none;
}

@keyframes ag-float-y {
    from { transform: translateY(-10px); }
    to   { transform: translateY(12px); }
}

/* the butterfly: hidden until the script places it (no-JS = no butterfly) */
.ag-butterfly {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 4;
    width: 25%;
    aspect-ratio: 200 / 160;
    opacity: 0;
    pointer-events: none;
    will-change: transform, opacity;
    /* holographic neon glow */
    filter: drop-shadow(0 0 6px rgba(67, 210, 224, 0.8))
            drop-shadow(0 0 18px rgba(181, 27, 181, 0.55));
}

.ag-butterfly svg {
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
}

/* ---- tech butterfly (partials/tech_butterfly.html) ---- */
.tb-pulse {
    stroke-dasharray: 12 88;
    stroke-dashoffset: 100;
    animation: tf-pulse 2.2s linear infinite;
}

.tb-shine {
    animation: tb-shine 3.6s ease-in-out infinite;
}

@keyframes tb-shine {
    from { transform: translateX(0); }
    to   { transform: translateX(170px); }
}

.tb-core {
    animation: tf-bit 1.6s ease-in-out infinite;
}

/* LED dots marching round the wing edge */
.tb-led {
    stroke-dasharray: 0 5.4;
    animation: tb-march 1.4s linear infinite;
}

@keyframes tb-march {
    to { stroke-dashoffset: -5.4; }
}

/* dashed rings turning around the eye-spots */
.tb-ring {
    transform-box: fill-box;
    transform-origin: center;
    animation: tf-spin 7s linear infinite;
}

.tb-ring--r {
    animation-direction: reverse;
}

/* soft energy halo breathing behind the wings */
.tb-halo {
    animation: tb-halo 2.8s ease-in-out infinite;
}

@keyframes tb-halo {
    0%, 100% { opacity: 0.55; }
    50%      { opacity: 1; }
}

/* pixel trail the butterfly leaves behind in flight (squares spawned by flower-scene.js) */
.ag-trail {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 3;
    width: 7px;
    height: 7px;
    border-radius: 1.5px;
    background: #34d399;
    box-shadow: 0 0 8px 1px rgba(52, 211, 153, 0.9);
    opacity: 0;
    pointer-events: none;
    will-change: transform, opacity;
}

.ag-trail--m {
    background: #84cc16;
    box-shadow: 0 0 8px 1px rgba(132, 204, 22, 0.9);
}

/* save battery: everything in the scene freezes while it is off-screen */
.ag-stage.ag-paused .ag-sun-float,
.ag-stage.ag-paused .ag-logo,
.ag-stage.ag-paused .ag-flower *,
.ag-stage.ag-paused .ag-butterfly * {
    animation-play-state: paused !important;
}

/* ---------- right column: heading, copy, cards, stats ---------------------- */

.ag-copy h1 {
    font-size: clamp(2.1rem, 3.6vw, 3.1rem);
    font-weight: 600;
    line-height: 1.15;
    margin: 0 0 0.6rem;
    letter-spacing: 0.01em;
}

.ag-copy h2 {
    font-size: clamp(1.15rem, 1.8vw, 1.55rem);
    font-weight: 400;
    line-height: 1.45;
    margin: 0 0 1.6rem;
    color: rgba(255, 255, 255, 0.92);
}

/* line-by-line mask reveal (JS wraps every visual line in .ag-line) */
.ag-line {
    display: block;
    overflow: hidden;
    padding-bottom: 0.12em;
    margin-bottom: -0.12em;
}

.ag-line__in {
    display: block;
    will-change: transform;
}

/* three glass cards — one per word of the tagline */
.ag-cards {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.9rem;
    margin: 0 0 1.6rem;
}

.ag-card {
    border-radius: 18px;
}

.ag-card__tilt {
    position: relative;
    overflow: hidden;
    height: 100%;
    border-radius: 18px;
    padding: 1.15rem 1.15rem 1.25rem;
    background: rgba(255, 255, 255, 0.11);
    border: 1px solid rgba(255, 255, 255, 0.28);
    -webkit-backdrop-filter: blur(12px) saturate(160%);
    backdrop-filter: blur(12px) saturate(160%);
    transform: perspective(800px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
    transition: background 0.35s ease, border-color 0.35s ease, transform 0.25s ease-out;
    will-change: transform;
}

.ag-card:hover .ag-card__tilt {
    background: rgba(255, 255, 255, 0.18);
    border-color: rgba(255, 255, 255, 0.5);
}

/* cursor-following spotlight on hover */
.ag-card__tilt::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(220px circle at var(--mx, 50%) var(--my, 50%),
        rgba(255, 255, 255, 0.22), transparent 65%);
    opacity: 0;
    transition: opacity 0.35s ease;
    pointer-events: none;
}

.ag-card:hover .ag-card__tilt::after {
    opacity: 1;
}

.ag-card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    margin-bottom: 0.7rem;
    border-radius: 12px;
    font-size: 1rem;
    color: #fff;
    background: linear-gradient(135deg, rgba(255, 47, 214, 0.55), rgba(67, 210, 224, 0.55));
    border: 1px solid rgba(255, 255, 255, 0.35);
}

.ag-card h3 {
    margin: 0 0 0.35rem;
    font-size: 1.12rem;
    font-weight: 600;
    letter-spacing: 0.02em;
}

.ag-card p {
    margin: 0;
    font-size: 0.92rem;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.86);
}

/* about blurb under the Ideate / Illuminate / Integrate cards */
.ag-about-text {
    margin: 1.25rem 0 0;
    font-size: 0.95rem;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.86);
}

/* counter row: years / projects / clients */
.ag-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 1.1rem 2.2rem;
    padding-top: 1.35rem;
    border-top: 1px solid rgba(255, 255, 255, 0.22);
}

.ag-stat {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.ag-stat__num {
    font-size: clamp(1.75rem, 2.6vw, 2.35rem);
    font-weight: 600;
    line-height: 1;
    background: linear-gradient(90deg, #ffffff, #ffd9f4 55%, #c9f4fb);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.ag-stat__label {
    font-size: 0.86rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.78);
}

/* ---------- responsive ----------------------------------------------------- */

@media (max-width: 1100px) {
    .ag-panel__inner {
        grid-template-columns: 1fr;
    }

    .ag-stage {
        width: min(100%, 560px);
        --r: clamp(135px, 26vw, 225px);
    }
}

@media (max-width: 768px) {
    .ag-cards {
        grid-template-columns: 1fr;
    }

    .ag-badge__in {
        padding: 0.42rem 0.75rem;
        font-size: 0.78rem;
    }

    .ag-tip {
        display: none;              /* no hover on touch anyway */
    }

    .ag-stats {
        gap: 1rem 1.6rem;
    }
}

@media (max-width: 520px) {
    .ag-panel__inner {
        padding: 1.35rem 1.15rem;
    }

    .ag-stage {
        --r: clamp(112px, 33vw, 160px);
    }

    .ag-stage {
        --flower-w: 74%;
    }

    .ag-butterfly {
        width: 27%;
    }

    .ag-badge__in {
        padding: 0.28rem 0.55rem;
        font-size: 0.66rem;
        gap: 0.3rem;
    }

    .ag-badge__in i {
        display: none;              /* keep the labels compact so they never crowd */
    }
}

/* ---------- reduced motion ------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    .ag-panel::before,
    .ag-sun-float,
    .ag-logo,
    .ag-flower *,
    .ag-butterfly * {
        animation: none !important;
    }

    .ag-sun-tilt,
    .ag-card__tilt,
    .ag-tip {
        transition: none;
    }
}

@media (max-width: 400px) {
    .ag-badge__in {
        padding: 0.24rem 0.42rem;
        font-size: 0.58rem;
        letter-spacing: 0;
    }
}