/* ============================================================
   PHILOSOPHY ART — hand-built SVG illustrations (src/art.mjs)
   Base styles are the finished picture (what no-JS and reduced
   motion see). Every animated element shares one 8s loop and
   starts at its own delay, so offsets stay in sync each cycle.
   They only run while the panel is on screen (.is-play).
   ============================================================ */
.philo__img--art { background: #121110; }
.philo__img--art::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(rgba(245,238,225,.05) 1px, transparent 1px); background-size: 16px 16px; pointer-events: none; }
.art { position: absolute; inset: 0; width: 100%; height: 100%; }
.art text { font-family: var(--sans); fill: var(--text); }
.art * { animation-duration: 8s; animation-iteration-count: infinite; animation-fill-mode: both; animation-timing-function: var(--ease); animation-play-state: paused; }
.is-play .art * { animation-play-state: running; }
/* until JS arms the panel (and forever without JS) the finished picture shows */
.philo__panel:not(.is-armed) .art * { animation: none !important; }
@media (prefers-reduced-motion: reduce) { .art * { animation: none !important; } }
.art .note, .art .tier, .art .stamp, .art .toast, .art .alert, .art .ripple, .art .tip, .art .sec, .art .deal__row { transform-box: fill-box; transform-origin: center; }

@keyframes aFade  { 0% { opacity: 0 } 7% { opacity: 1 } 86% { opacity: 1 } 95%, 100% { opacity: 0 } }
@keyframes aPop   { 0% { opacity: 0; transform: scale(.4) } 6% { opacity: 1; transform: scale(1.08) } 9% { transform: scale(1) } 86% { opacity: 1; transform: scale(1) } 95%, 100% { opacity: 0; transform: scale(.9) } }
@keyframes aUp    { 0% { opacity: 0; transform: translateY(10px) } 8% { opacity: 1; transform: none } 86% { opacity: 1; transform: none } 95%, 100% { opacity: 0; transform: translateY(-4px) } }
@keyframes aDraw  { 0% { stroke-dashoffset: 1 } 12% { stroke-dashoffset: 0 } 86% { stroke-dashoffset: 0; opacity: 1 } 95%, 100% { stroke-dashoffset: 0; opacity: 0 } }
@keyframes aType  { 0% { clip-path: inset(-30% 100% -30% 0) } 10% { clip-path: inset(-30% 0 -30% 0) } 86% { clip-path: inset(-30% 0 -30% 0); opacity: 1 } 95%, 100% { clip-path: inset(-30% 0 -30% 0); opacity: 0 } }
@keyframes aOut   { 0% { opacity: 1 } 8% { opacity: 0 } 88% { opacity: 0 } 97%, 100% { opacity: 1 } }
@keyframes aStamp { 0% { opacity: 0; transform: scale(1.8) } 5% { opacity: 1; transform: scale(.94) } 8% { transform: scale(1) } 86% { opacity: 1; transform: scale(1) } 95%, 100% { opacity: 0 } }

.art .a-frame { fill: #161513; stroke: var(--line-2); stroke-width: 1.2; }
.art .a-frame--code { fill: #0F0E0D; }
.art .a-sep { stroke: var(--line); stroke-width: 1; }
.art .a-cap { font: 500 10px var(--mono); letter-spacing: .14em; fill: var(--text-3); }
.art .a-code { font: 400 12.5px var(--mono); fill: var(--text-2); }
.art .a-code .g { fill: var(--signal); }
.art .a-check { fill: none; stroke: var(--signal); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; }
.art .a-check--ink { stroke: var(--signal-ink); }
.art .a-mini { font-size: 10.5px; fill: var(--text-2); }
.art .a-mini--dim { fill: var(--text-3); }
.art .cl { animation-name: aType; animation-timing-function: steps(20, end); }

/* ---- 01 offer: the whiteboard ---- */
.art--offer .a-tray { stroke: var(--line-2); stroke-width: 2; }
.art--offer .a-marker { fill: #3A3731; }
.art--offer .a-marker--g { fill: var(--signal); opacity: .85; }
.art--offer .a-q { font: 500 9.5px var(--mono); letter-spacing: .12em; fill: var(--text-3); }
.art--offer .a-draw { fill: none; stroke: rgba(245,238,225,.38); stroke-width: 1.6; stroke-linecap: round; stroke-dasharray: 1; animation-name: aDraw; }
.art--offer .d1 { animation-delay: .1s } .art--offer .d2 { animation-delay: .35s }
.art--offer .face { fill: none; stroke: rgba(245,238,225,.7); stroke-width: 1.5; stroke-linecap: round; animation-name: aFade; animation-delay: .5s; }
.art--offer .face .eye { fill: rgba(245,238,225,.8); stroke: none; }
.art--offer .note rect { fill: #E8D48F; }
.art--offer .note path { stroke: rgba(18,17,15,.45); stroke-width: 1.4; stroke-linecap: round; }
.art--offer .note { animation-name: aPop; }
.art--offer .n1 { animation-delay: .8s } .art--offer .n2 { animation-delay: 1s } .art--offer .n3 { animation-delay: 1.2s }
.art--offer .n4 { animation-delay: 1.4s } .art--offer .n5 { animation-delay: 1.6s } .art--offer .n6 { animation-delay: 1.8s }
.art--offer .tier rect { fill: #1D1C19; stroke: var(--line-2); }
.art--offer .tier--best rect { stroke: var(--signal); stroke-width: 1.4; }
.art--offer .tier { animation-name: aUp; }
.art--offer .tier1 { animation-delay: 1.9s } .art--offer .tier2 { animation-delay: 2.1s } .art--offer .tier3 { animation-delay: 2.3s }
.art--offer .a-lbl { font-size: 13px; fill: var(--text-2); }
.art--offer .a-price { font-size: 21px; font-weight: 500; letter-spacing: -.02em; }
.art--offer .a-tag { font: 500 8px var(--mono); letter-spacing: .12em; fill: var(--signal); }
.art--offer .a-circle { fill: none; stroke: var(--signal); stroke-width: 2; stroke-dasharray: 1; stroke-linecap: round; animation-name: aDraw; animation-delay: 2.8s; }
.art--offer .a-link { fill: none; stroke: var(--line-2); stroke-dasharray: 1; animation-name: aDraw; animation-delay: 3.3s; }
.art--offer .deal__card { fill: #1B1A17; stroke: var(--line-2); animation-name: aFade; animation-delay: 3.5s; }
.art--offer .deal > text { animation-name: aFade; animation-delay: 3.6s; }
.art--offer .deal > .a-big { animation-name: aUp; animation-delay: 3.7s; }
.art--offer .a-big { font-size: 21px; font-weight: 500; letter-spacing: -.02em; }
.art--offer .a-row { font-size: 12.5px; fill: var(--text-2); }
.art--offer .deal__row { animation-name: aUp; } .art--offer .r1 { animation-delay: 4s } .art--offer .r2 { animation-delay: 4.25s }
.art--offer .deal__row .a-check { animation-name: aDraw; } .art--offer .r1 .a-check { animation-delay: 4.1s } .art--offer .r2 .a-check { animation-delay: 4.35s }
.art--offer .stamp circle { fill: none; stroke: var(--signal); stroke-width: 1.6; }
.art--offer .stamp circle + circle { stroke-width: 1; stroke-dasharray: 3 3; }
.art--offer .a-stamp { font: 600 9px var(--mono); letter-spacing: .12em; fill: var(--signal); }
.art--offer .stamp { animation-name: aStamp; animation-delay: 4.7s; }

/* ---- 02 funnel: the website, rebuilt ---- */
.art--funnel .a-dot { fill: rgba(245,238,225,.18); }
.art--funnel .url { fill: #0F0E0D; stroke: var(--line); }
.art--funnel .lock { fill: none; stroke: var(--signal); stroke-width: 1.3; }
.art--funnel .a-url { font: 400 11px var(--mono); fill: var(--text-2); }
.art--funnel .page--old .blk { fill: rgba(245,238,225,.09); }
.art--funnel .page--old { opacity: 0; }
.is-armed .art--funnel .page--old { animation-name: aOut; animation-delay: 1.4s; }
@keyframes aScan { 0% { opacity: 0; transform: translateY(0) } 2% { opacity: 1 } 16% { opacity: 1; transform: translateY(262px) } 19%, 100% { opacity: 0; transform: translateY(262px) } }
.art--funnel .scan { fill: var(--signal); opacity: 0; animation-name: aScan; animation-timing-function: cubic-bezier(.45,0,.55,1); animation-delay: .3s; filter: drop-shadow(0 0 6px rgba(74,222,128,.7)); }
.art--funnel .sec { animation-name: aUp; }
.art--funnel .s1 { animation-delay: .6s } .art--funnel .s2 { animation-delay: .95s } .art--funnel .s3 { animation-delay: 1.3s } .art--funnel .s4 { animation-delay: 1.6s }
.art--funnel .a-logo { fill: var(--signal); }
.art--funnel .a-nav { font-size: 11.5px; font-weight: 500; }
.art--funnel .a-navlink { font-size: 11px; fill: var(--signal); }
.art--funnel .a-h1 { font-size: 30px; font-weight: 500; letter-spacing: -.035em; }
.art--funnel .a-h1--dim { fill: var(--text-3); }
.art--funnel .a-p { font-size: 11.5px; fill: var(--text-2); }
.art--funnel .cta rect { fill: var(--signal); }
.art--funnel .a-btn { font-size: 13.5px; font-weight: 500; fill: var(--signal-ink); }
.art--funnel .a-card { fill: #1D1C19; stroke: var(--line); }
.art--funnel .a-stars { font-size: 11px; fill: var(--signal); letter-spacing: .06em; }
.art--funnel .ln { stroke: var(--line-2); stroke-width: 4; stroke-linecap: round; }
@keyframes aCursor { 0% { opacity: 0; transform: translate(330px, 318px) } 5% { opacity: 1 } 15% { transform: translate(150px, 208px) } 17% { transform: translate(150px, 208px) scale(.86) } 19% { transform: translate(150px, 208px) scale(1) } 84% { opacity: 1; transform: translate(150px, 208px) } 92%, 100% { opacity: 0; transform: translate(150px, 208px) } }
.art--funnel .cursor { opacity: 0; }
.is-armed .art--funnel .cursor { animation-name: aCursor; animation-delay: 2.2s; }
.art--funnel .cursor path { fill: var(--text); stroke: #0B0A09; stroke-width: 1.2; stroke-linejoin: round; }
@keyframes aRipple { 0% { opacity: 0; transform: scale(.2) } 1% { opacity: .9 } 10% { opacity: 0; transform: scale(3) } 100% { opacity: 0; transform: scale(3) } }
.art--funnel .ripple { fill: none; stroke: var(--signal); stroke-width: 2; opacity: 0; animation-name: aRipple; animation-delay: 3.55s; }
.art--funnel .toast rect { fill: #22201C; stroke: var(--signal); stroke-width: 1.2; }
.art--funnel .a-toast { font-size: 14px; font-weight: 500; }
.art--funnel .toast { animation-name: aPop; animation-delay: 3.7s; }
.art--funnel .toast .a-check { animation-name: aDraw; animation-delay: 3.9s; }
.art--funnel .c1 { animation-delay: 4.1s } .art--funnel .c2 { animation-delay: 4.5s } .art--funnel .c3 { animation-delay: 4.9s } .art--funnel .c4 { animation-delay: 5.3s }

/* ---- 03 ads: the feed and the video ---- */
.art--ads .phone { fill: #121110; stroke: rgba(245,238,225,.22); stroke-width: 1.6; }
.art--ads .notch { fill: #0B0A09; }
.art--ads .a-app { font-size: 16px; font-weight: 600; letter-spacing: -.02em; }
.art--ads .ic { fill: none; stroke: var(--text); stroke-width: 1.4; stroke-linejoin: round; }
.art--ads .stories circle { fill: #1D1C19; stroke: rgba(255,178,102,.7); stroke-width: 2; }
.art--ads .stories circle:first-child { stroke: var(--signal); }
.art--ads .post .blk { fill: rgba(245,238,225,.12); }
.art--ads .post .av { fill: #2A2824; }
.art--ads .post .img { fill: #1F1D1A; }
.art--ads .post .av--brand { fill: var(--signal); }
.art--ads .a-handle { font-size: 11.5px; font-weight: 600; }
.art--ads .a-spons { font-size: 9.5px; fill: var(--text-2); }
.art--ads .post .img--ad { fill: #2B2117; }
.art--ads .sun { fill: rgba(255,178,102,.85); }
.art--ads .hill { fill: #4A3A2A; }
.art--ads .adbar rect { fill: var(--signal); }
.art--ads .a-adcta { font-size: 12px; font-weight: 600; fill: var(--signal-ink); }
.art--ads .chev { fill: none; stroke: var(--signal-ink); stroke-width: 1.6; }
.art--ads .a-likes { font-size: 10px; font-weight: 500; }
/* the finished picture: the ad is on screen */
.art--ads .feed { transform: translateY(-286px); }
@keyframes aFeed { 0% { transform: translateY(0) } 4% { transform: translateY(0) } 22% { transform: translateY(-286px) } 86% { transform: translateY(-286px) } 96%, 100% { transform: translateY(0) } }
.art--ads .feed { animation-name: aFeed; animation-timing-function: cubic-bezier(.5,0,.2,1); }
.art--ads .like { fill: #F2545B; stroke: #F2545B; }
@keyframes aLike { 0% { fill: transparent; stroke: var(--text) } 4%, 86% { fill: #F2545B; stroke: #F2545B } 95%, 100% { fill: transparent; stroke: var(--text) } }
.art--ads .like { animation-name: aLike; animation-delay: 2.1s; }
@keyframes aSlideIn { 0% { opacity: 0; transform: translateX(46px) } 8% { opacity: 1; transform: none } 86% { opacity: 1; transform: none } 95%, 100% { opacity: 0; transform: translateX(20px) } }
.art--ads .video { animation-name: aSlideIn; animation-delay: 2.4s; }
.art--ads .vframe { fill: #0D0C0B; stroke: rgba(245,238,225,.22); stroke-width: 1.4; }
.art--ads .play { fill: rgba(245,238,225,.9); }
.art--ads .badge { fill: #F2C94C; }
.art--ads .a-badge { font-size: 9.5px; font-weight: 600; fill: #151412; }
.art--ads .vbar { fill: rgba(245,238,225,.16); }
@keyframes aProg { 0% { transform: scaleX(0) } 45% { transform: scaleX(1) } 86% { transform: scaleX(1); opacity: 1 } 95%, 100% { transform: scaleX(1); opacity: 0 } }
.art--ads .vprog { fill: #F2C94C; transform-box: fill-box; transform-origin: left center; animation-name: aProg; animation-timing-function: linear; animation-delay: 2.8s; }
.art--ads .skip rect { fill: rgba(0,0,0,.65); stroke: rgba(245,238,225,.35); }
.art--ads .a-skip { font-size: 11px; font-weight: 500; fill: var(--text-2); }
.art--ads .a-skip--on { fill: var(--text); }
.art--ads .skip-ic { fill: var(--text); stroke: var(--text); stroke-width: 1.4; }
.art--ads .skip-wait { opacity: 0; }
@keyframes aSkipWait { 0% { opacity: 1 } 38% { opacity: 1 } 40% { opacity: 0 } 94% { opacity: 0 } 97%, 100% { opacity: 1 } }
@keyframes aSkipGo { 0% { opacity: 0 } 38% { opacity: 0 } 40% { opacity: 1 } 86% { opacity: 1 } 95%, 100% { opacity: 0 } }
.is-armed .art--ads .skip-wait { animation-name: aSkipWait; animation-timing-function: linear; animation-delay: 2.8s; }
.art--ads .skip-go { animation-name: aSkipGo; animation-timing-function: linear; animation-delay: 2.8s; }

/* ---- 04 tracking: Google Analytics and the code ---- */
.art--tracking .ga1, .art--tracking .ga2 { fill: #F9AB00; }
.art--tracking .ga3 { fill: #E37400; }
.art--tracking .a-ga { font-size: 14px; font-weight: 500; letter-spacing: -.01em; }
.art--tracking .range { fill: none; stroke: var(--line-2); }
.art--tracking .grid { stroke: var(--line); }
.art--tracking .area { fill: rgba(74,222,128,.09); animation-name: aFade; animation-delay: 1.4s; }
.art--tracking .line { fill: none; stroke: var(--signal); stroke-width: 2.2; stroke-linejoin: round; stroke-linecap: round; stroke-dasharray: 1; animation-name: aDraw; animation-delay: .3s; filter: drop-shadow(0 0 5px rgba(74,222,128,.45)); }
.art--tracking .tip { fill: var(--signal); animation-name: aPop; animation-delay: 1.3s; }
.art--tracking .ring { fill: none; stroke: rgba(245,238,225,.08); stroke-width: 11; }
.art--tracking .seg { fill: none; stroke-width: 11; stroke-dasharray: var(--len) 100; stroke-dashoffset: var(--off, 0); }
@keyframes aSeg { 0% { stroke-dasharray: 0 100 } 12% { stroke-dasharray: var(--len) 100 } 86% { stroke-dasharray: var(--len) 100; opacity: 1 } 95%, 100% { opacity: 0 } }
.art--tracking .seg { animation-name: aSeg; }
.art--tracking .seg1 { stroke: var(--signal); animation-delay: .8s } .art--tracking .seg2 { stroke: rgba(245,238,225,.7); animation-delay: 1.4s } .art--tracking .seg3 { stroke: rgba(245,238,225,.3); animation-delay: 1.9s }
.art--tracking .k1 { fill: var(--signal); } .art--tracking .k2 { fill: rgba(245,238,225,.7); } .art--tracking .k3 { fill: rgba(245,238,225,.3); }
.art--tracking .legend { animation-name: aFade; animation-delay: 2s; }
.art--tracking .alert rect { fill: #22201C; stroke: var(--signal); stroke-width: 1.2; }
.art--tracking .alert__dot { fill: var(--signal); }
.art--tracking .a-alert { font-size: 12.5px; font-weight: 500; }
.art--tracking .a-alert2 { font-size: 10.5px; fill: var(--text-2); }
.art--tracking .alert { animation-name: aPop; animation-delay: 4.6s; filter: drop-shadow(0 14px 24px rgba(0,0,0,.5)); }
.art--tracking .alert .a-check { animation-name: aDraw; animation-delay: 4.8s; }
.art--tracking .c1 { animation-delay: 2.4s } .art--tracking .c2 { animation-delay: 2.8s } .art--tracking .c3 { animation-delay: 3.25s } .art--tracking .c4 { animation-delay: 3.7s } .art--tracking .c5 { animation-delay: 4s }