/* ============================================
   IAT FUSION line-art draw animation
   Adapted from the user's hero__lineart snippet
   to work with our nested-<g> SVG structure.
   ============================================ */

:root {
    --ld-gold-soft: #facc15;
}

/* Wrapper / placement helpers */
.iat-lineart-wrap {
    position: relative;
    display: block;
    pointer-events: none;
}

.hero__lineart {
    width: 100%;
    height: 100%;
    display: block;
    overflow: visible;
}

/* Every stroked shape inside the SVG. The selector reaches through the
   <g> wrapper produced by our potrace-style trace. */
.hero__lineart path,
.hero__lineart line,
.hero__lineart polyline,
.hero__lineart polygon,
.hero__lineart circle,
.hero__lineart ellipse,
.hero__lineart rect {
    fill: none;
    stroke: var(--ld-gold-soft);
    stroke-width: 1.6;
    vector-effect: non-scaling-stroke;
    stroke-linecap: round;
    stroke-linejoin: round;
    /* pathLength="1" is added at runtime by lineart.js */
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    animation: hero-draw 6s cubic-bezier(.65, 0, .35, 1) 0.4s infinite;
    filter: drop-shadow(0 0 4px rgba(250, 204, 21, 0.55));
}

/* Once-only variant: the logo draws in, holds, fades out, then stays drawn. */
.hero__lineart.draw-once path,
.hero__lineart.draw-once line,
.hero__lineart.draw-once polyline,
.hero__lineart.draw-once polygon,
.hero__lineart.draw-once circle,
.hero__lineart.draw-once ellipse,
.hero__lineart.draw-once rect {
    animation: hero-draw-once 2.4s cubic-bezier(.65, 0, .35, 1) forwards;
}

/* The eternal draw loop */
@keyframes hero-draw {
    0%   { stroke-dashoffset:  1; }
    35%  { stroke-dashoffset:  0; }
    65%  { stroke-dashoffset:  0; }
    100% { stroke-dashoffset: -1; }
}

/* One-shot draw that ends fully visible */
@keyframes hero-draw-once {
    0%   { stroke-dashoffset: 1; opacity: 1; }
    100% { stroke-dashoffset: 0; opacity: 1; }
}

/* Honour reduced motion */
@media (prefers-reduced-motion: reduce) {
    .hero__lineart path,
    .hero__lineart line,
    .hero__lineart polyline,
    .hero__lineart polygon,
    .hero__lineart circle,
    .hero__lineart ellipse,
    .hero__lineart rect {
        animation: none !important;
        stroke-dashoffset: 0;
    }
}

/* ============================================
   PLACEMENT: Page-transition overlay logo
   ============================================ */
.transition-logo .iat-logo-lineart {
    width: 180px;
    height: 180px;
    --ld-gold-soft: #facc15;
}
.transition-logo .iat-logo-lineart path { stroke-width: 2.2; }

/* ============================================
   PLACEMENT: Index hero backdrop
   Big translucent line-art that draws behind the
   floating cards, gives the hero a "blueprint"
   feeling.
   ============================================ */
.hero-section .lineart-backdrop {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-right: 2rem;
    z-index: 1;
    pointer-events: none;
    opacity: 0.18;
    mix-blend-mode: screen;
    transition: opacity 1.5s ease;
}

/* Once liquid starts pouring, make the whole logo much more visible */
.hero-section .lineart-backdrop:has(.liquid-fill) {
    opacity: 0.85;
}
.hero-section .lineart-backdrop .iat-logo-lineart {
    width: min(520px, 42vw);
    height: min(520px, 42vw);
    --ld-gold-soft: #facc15;
}
.hero-section .lineart-backdrop .iat-logo-lineart path {
    stroke-width: 1.2;
    filter: drop-shadow(0 0 10px rgba(250,204,21,0.35));
}

/* Override: landing page line-art draws once then fills with liquid */
.hero-section .lineart-backdrop .iat-logo-lineart path {
    animation-name: hero-draw-once;
    animation-duration: 4s;
    animation-timing-function: cubic-bezier(.65, 0, .35, 1);
    animation-fill-mode: forwards;
    animation-iteration-count: 1;
}

/* Liquid fill: strokes stay fully drawn; a cloned fill-only group
   (added by JS) carries the mask so the "pour" never hides the line art. */
.hero-section .lineart-backdrop .iat-logo-lineart.liquid-fill path {
    /* keep strokes visible and fully drawn */
    stroke-dashoffset: 0;
    animation: none;
    filter: drop-shadow(0 0 10px rgba(250,204,21,0.35));
}

.hero-section .lineart-backdrop .iat-logo-lineart .liquid-fill-layer {
    mask: url(#liquidMask);
    -webkit-mask: url(#liquidMask);
}

.hero-section .lineart-backdrop .iat-logo-lineart .liquid-fill-layer path {
    fill: url(#liquidGrad);
    fill-opacity: 1;
    stroke: none;
    animation: none;
    filter: drop-shadow(0 0 6px rgba(250,204,21,0.6))
            drop-shadow(0 0 14px rgba(239,68,68,0.4))
            drop-shadow(0 0 24px rgba(168,85,247,0.3));
}

/* Make sure hero content sits above */
.hero-section .hero-content,
.hero-section .hero-visual { position: relative; z-index: 3; }

/* ============================================
   PLACEMENT: About Us hero side accent
   ============================================ */
.about-section .lineart-side,
.hero-section .lineart-side {
    position: absolute;
    top: 50%;
    right: 4rem;
    transform: translateY(-50%);
    width: 320px;
    height: 320px;
    pointer-events: none;
    z-index: 2;
    opacity: 0.55;
}
.about-section .lineart-side .iat-logo-lineart,
.hero-section  .lineart-side .iat-logo-lineart {
    --ld-gold-soft: #facc15;
}

@media (max-width: 992px) {
    .hero-section .lineart-backdrop { opacity: 0.10; padding-right: 0; justify-content: center; }
    .hero-section .lineart-side,
    .about-section .lineart-side    { display: none; }
}