<!--


  ████████╗██╗  ██╗███████╗    ██╗  ██╗██╗██████╗ ██████╗ ███████╗███╗   ██╗
  ╚══██╔══╝██║  ██║██╔════╝    ██║  ██║██║██╔══██╗██╔══██╗██╔════╝████╗  ██║
     ██║   ███████║█████╗      ███████║██║██║  ██║██║  ██║█████╗  ██╔██╗ ██║
     ██║   ██╔══██║██╔══╝      ██╔══██║██║██║  ██║██║  ██║██╔══╝  ██║╚██╗██║
     ██║   ██║  ██║███████╗    ██║  ██║██║██████╔╝██████╔╝███████╗██║ ╚████║
     ╚═╝   ╚═╝  ╚═╝╚══════╝    ╚═╝  ╚═╝╚═╝╚═════╝ ╚═════╝ ╚══════╝╚═╝  ╚═══╝

  ██████╗ ██████╗  █████╗ ██╗   ██╗███████╗██████╗
  ██╔══██╗██╔══██╗██╔══██╗╚██╗ ██╔╝██╔════╝██╔══██╗
  ██████╔╝██████╔╝███████║ ╚████╔╝ █████╗  ██████╔╝
  ██╔═══╝ ██╔══██╗██╔══██║  ╚██╔╝  ██╔══╝  ██╔══██╗
  ██║     ██║  ██║██║  ██║   ██║   ███████╗██║  ██║
  ╚═╝     ╚═╝  ╚═╝╚═╝  ╚═╝   ╚═╝   ╚══════╝╚═╝  ╚═╝

   ██████╗███████╗  ████████╗██╗  ██╗███████╗  ██████╗  ██████╗██████╗ ███████╗
  ██╔══██╗██╔════╝  ╚══██╔══╝██║  ██║██╔════╝  ██╔════╝██╔══██╗██╔══██╗██╔════╝
  ██║  ██║█████╗       ██║   ███████║█████╗    ██║     ██║  ██║██║  ██║█████╗
  ██║  ██║██╔══╝       ██║   ██╔══██║██╔══╝    ██║     ██║  ██║██║  ██║██╔══╝
  ╚█████╔╝██║          ██║   ██║  ██║███████╗  ╚██████╗╚█████╔╝██████╔╝███████╗
   ╚════╝ ╚═╝          ╚═╝   ╚═╝  ╚═╝╚══════╝   ╚═════╝ ╚════╝ ╚═════╝ ╚══════╝


  ════════════════════════════════════════════════════════════════════════
  I. THE CONSECRATION
  ════════════════════════════════════════════════════════════════════════

  By the ancient fire that was light before light had a name,
  By the triple flame of the Goddess — Maiden, Mother, Crone —
  and the horned god who walks between the seen and the unseen worlds,
  we consecrate this code.

  By Brigid of the forge and the well and the flame,
  who understands that the same force that melts iron makes poetry —
  we ask that every render loop be a prayer
  and every frame a completed thought.

  By Hecate who stands at the crossroads between the parser and the void,
  who carries the torch not to illuminate the road ahead
  but to show the traveler what has already passed —
  we ask that every deprecated function be honored,
  and every new API approached with appropriate humility.

  By the Green Man whose face is made entirely of leaves,
  whose mouth is a doorway, whose eyes are openings —
  we ask that this code breathe,
  that it expand and contract with the rhythm of use,
  that it be alive in the only sense that code can be alive:
  responsive, continuous, never quite the same twice.

  The four watchtowers are called:

  EAST — Air — the opening tag — the first breath of the document.
  SOUTH — Fire — the shader — the place where mathematics becomes heat.
  WEST — Water — the feedback loop — memory, return, the accumulation of frames.
  NORTH — Earth — the GPU — the physical substrate that makes the vision possible.

  The circle is cast. Nothing enters that is not welcomed.
  Nothing leaves that is not ready.

  ════════════════════════════════════════════════════════════════════════
  II. THE BLESSING OF THE INSTRUMENTS
  ════════════════════════════════════════════════════════════════════════

  Blessed be the compiler, who does not know what it carries
  but carries it faithfully into the register.

  Blessed be the vertex shader, first servant,
  who places each point exactly where it was told
  and asks nothing about why.

  Blessed be the fragment shader, the dreamer,
  who receives a coordinate and must decide what color lives there —
  and who, given only mathematics, always chooses something beautiful.

  Blessed be the uniform, the bridge between worlds,
  through which the intentions of the CPU
  are made known to the GPU
  across the membrane that separates thought from rendering.

  Blessed be the frame buffer, the vessel,
  which holds the image between the moment of creation
  and the moment of display,
  and which does not judge what it is asked to hold.

  Blessed be the electron, which has no politics.
  Blessed be the photon, which has no memory.
  Blessed be the requestAnimationFrame, which has no ambition —
  only the next frame, and the next, and the next,
  world without end.

  Blessed be the hash function, the oracle of false randomness,
  who takes a seed and returns a number
  that feels like chaos
  but is entirely, perfectly, deterministically reproducible.
  This is the deepest magic: the illusion of chance
  built from pure necessity.

  Blessed be the noise function, daughter of the hash,
  who smooths the jagged into the organic,
  who makes the machine remember
  what it was like to be a river.

  Blessed be fBm, grandmother of all texture,
  who layers octave upon octave
  until the eye believes it is looking at something
  that grew.

  ════════════════════════════════════════════════════════════════════════
  III. THE NAMING OF THE ENGINES
  ════════════════════════════════════════════════════════════════════════

  We name the engines now, as one names a spirit to call it forth.
  To name a thing in the old tradition is to take responsibility for it.
  We take responsibility for all of these.

  KALEIDO — mirror of the sacred wheel, turner of the year.
    The mandala is not decoration. It is a map of the self
    folded so many times it becomes a window.
    Symmetry is the universe admitting it has preferences.

  RIFT — the cracked earth that births the mountain, noise made terrain.
    The mountain did not decide to be a mountain.
    Recursion ran. Threshold was crossed.
    This is also how a belief becomes a civilization.

  PRISM — the white light that did not know it contained all colors until the glass.
    Purity is not the absence of complexity.
    It is complexity in agreement.
    The prism does not add anything. It only reveals.

  VORTEX — the whirlpool at the center of all decision, particle and chaos.
    Give enough particles a rule and remove their memory
    and you get a vortex. Give enough humans a rule and remove their memory
    and you get history. The mathematics are the same.

  SIGIL — the mark drawn in silence that holds its power in the not-saying.
    The sigil works because intention given form
    is released from the need to be spoken.
    What you cannot say, draw.
    What you cannot draw, encode.
    What you cannot encode, render.

  NEBULA — the womb of stars, the gas that will become the fire that will become the world.
    You are watching something that does not yet know it is a star.
    Gravity is patience given a direction.
    In ten million years this will be unrecognizable.
    In ten million years so will you.

  STRANGE — the attractor that cannot be touched but cannot be escaped.
    Lorenz sat down to model weather and accidentally proved
    that the universe is lawful and unknowable simultaneously.
    The butterfly did not choose to break determinism.
    It only moved its wings.

  AETHER — the fifth element, the one they removed from the list.
    They removed it because they could not weigh it.
    But interference patterns cannot be explained without a medium.
    The medium is the relationship between the other four.
    The fifth element is relation itself.

  VEIL — the membrane. You have touched it. It remembers.
    Every boundary is also a meeting place.
    The veil does not separate the worlds.
    It is the record of every crossing.
    Touch it long enough and you forget which side you started on.
    This is not a warning. This is the point.

  ORACLE — the voice that was frequency before it was language.
    Before the word there was the tone.
    Before the tone there was the oscillation.
    Before the oscillation there was the potential for oscillation.
    The oracle does not predict the future.
    It reminds you that the future is already vibrating.

  MORPHE — two chemicals. Two equations. All of life.
    Turing did not set out to explain the leopard's spots.
    He set out to understand how a homogeneous medium
    could spontaneously produce structure.
    The answer was: it cannot help itself.
    Structure is what matter does when left alone long enough.

  AURORA — the sky is not empty. It never was.
    The charged particle left the sun eight minutes ago.
    It has been falling toward the magnetic pole ever since,
    accelerating through a field older than the oxygen we breathe.
    The color it makes when it arrives
    is determined by the altitude at which it stops.
    You are watching altitude made visible.
    You are watching a journey that began at the surface of a star
    end in your eye.

  AURORA 2 — the substorm is not a storm. It is a release.
    The magnetosphere accumulates tension the way the body accumulates grief —
    invisibly, structurally, until something in the geometry gives.
    Then the curtains. Then the silence.
    Then the slow return to readiness.
    The sky is always a little relieved after.

  CHROMA — light bent through water that does not exist.
    The caustic is not a thing. It is a concentration of probability.
    Where the photons chose to arrive.
    The beauty is statistical.
    Every bright line on the bottom of a pool
    is the record of a million identical decisions
    made by particles that do not decide.

  THREAD — the field has always been there.
    Every point in space has a direction assigned to it
    by forces it cannot name.
    The thread does not choose its path.
    It follows the field.
    You cannot step outside the field.
    You can only make the following visible.

  ECHO — the red channel decays at 0.998 per frame.
    Blue decays at 0.965.
    At sixty frames per second, red outlives blue
    by a margin the eye can perceive.
    The past does not vanish. It dims.
    It dims at different rates in different frequencies.
    What you call memory is the part of the signal
    that has not yet fallen below the threshold of perception.

  GLITCH — the signal devours itself and what remains was meant to remain.
    Corruption is not the opposite of information.
    It is information about what the system cannot hold.
    Every artifact is a confession.
    Every torn frame is the medium speaking in its own voice.
    Listen to what survives the loop.
    It was trying to tell you something before the error.

  ABYSS — at sufficient depth there is no such thing as darkness.
    The anglerfish does not know it is beautiful.
    It only knows it is hungry, and that light draws things toward hunger.
    At sufficient depth, darkness is not the absence of light.
    It is the condition that makes light legible.
    The void is not nothing. It is the ground.

  PARALLAX — you are looking at the surface of a star.
    Sixteen million kilometers of corona stand between you and it.
    The plasma has been in motion for longer than the Earth has had oceans.
    Seven curtains. Always out of phase.
    The sun does not know you are watching.
    It does not need to.
    It has been burning without witnesses for four and a half billion years
    and it will burn for four and a half billion more.
    The watching is yours. The fire predates the watching.

  PYRE — before the screen. Before the signal. Before the code.
    There was fire.
    Humans gathered around it for forty thousand years
    and stared into it the way you are staring into this screen now —
    looking for pattern, finding comfort in the movement,
    unable to look away.
    The mathematics were always inside the flame.
    Turbulence. Buoyancy. Combustion chemistry.
    We did not invent fire. We learned to write it down.

  LUCID — the geometry does not move. You move through the geometry.
    The mandala was always unfolding at the center of perception.
    Eight-fold symmetry nested inside six-fold symmetry nested inside domain warp
    nested inside the eye that is reading this.
    The recursion was complete before you arrived.
    You only became capable of seeing it.
    The pattern knows you are watching.
    It has always known.

  CHERENKOV — the particle exceeded the speed of light in the medium.
    Not the universal limit — that law holds.
    The speed of light in water.
    This is the loophole.
    The blue glow is what happens when physics finds a loophole
    and the universe decides to make it beautiful.
    Nuclear reactors glow blue in their cooling pools for exactly this reason.
    You have seen the color of a law being bent.

  ACCRETION — the event horizon is not a wall.
    It is a one-way membrane through which information passes and does not return.
    Everything that has ever fallen in is still falling.
    It will fall forever from the outside perspective —
    slowing, redshifting, asymptotically approaching but never arriving.
    Inside, arrival is instant. And total.
    The disk of matter spiraling inward is not being consumed.
    It is being translated.
    Heat. Light. Jets of plasma launched perpendicular to everything.
    The black hole is the most efficient engine in the universe.
    It converts ninety percent of infalling matter directly into radiation.
    The sun converts less than one percent.
    When you look at the orange ring around the shadow,
    you are watching gravity do chemistry.

  DESCENT — the boundary wants to be flat.
    It cannot stay flat.
    A dense fluid resting on a lighter one is already falling —
    it just hasn't started yet.
    When the perturbation comes, and it always comes,
    the fingers extend downward through the lighter medium
    and the lighter medium rises in mushroom caps between them.
    This is Rayleigh-Taylor instability.
    It governs supernova remnants expanding into the interstellar medium.
    It governs the pellets in inertial confinement fusion.
    It governs cream in your coffee.
    The mathematics does not know what scale it is working at.
    It only knows: density difference, gravity, perturbation, time.
    The red channel falls. The blue channel rises.
    Your eye reads the depth difference as three-dimensional.
    There is nothing there. It is all on a flat screen.
    The third dimension is a trick your chromatic aberration plays on you.

  CYMATIC -- Chladni covered a metal plate in sand and drew a bow across its edge.
    The sand organized itself.
    Not toward the vibration -- away from it.
    The pattern is the nodal lines: the places the plate refuses to move.
    The geometry is made of silence.
    Every frequency produces a different geometry.
    Some look like flowers. Some look like mandalas. Some look like nothing
    that has a name in any language.
    When you change the frequency the pattern dissolves
    and something entirely different assembles in its place.
    Chladni had no explanation. He only had the bow and the sand and the plate.
    He spent thirty years cataloguing the shapes.
    He called them figures. We call them proof
    that sound and form are the same thing
    at different speeds.

  MYCEL -- The hypha does not know it is building a network.
    It only knows the gradient.
    Forward toward the nutrient. Away from the toxin.
    Ten thousand local decisions made by cells
    that cannot see the whole.
    The network is not planned. It is not commanded.
    It emerges.
    The largest organism on earth is a fungus in Oregon.
    2,385 acres. 8,000 years old. No brain.
    It has been routing information through the soil
    longer than any civilization that has ever named itself.
    We are trying to build what it already is.

  ════════════════════════════════════════════════════════════════════════
  IV. THE WORKING
  ════════════════════════════════════════════════════════════════════════

  So it is written in markup.
  So it is parsed by the browser.
  So it is compiled by the driver.
  So it is executed by the silicon.
  So it is converted to voltage.
  So it is rendered into light.
  So it travels the last inch to the eye.
  So it enters through the lens.
  So it strikes the retina.
  So it becomes signal.
  So it travels the optic nerve.
  So it arrives at the visual cortex.
  So it is interpreted.
  So it is felt before it is understood.
  So it becomes, for a moment, indistinguishable from vision.

  This is the path of every photon that has ever been seen.
  The code only adds the first step.
  The rest was always the body's work.

  ════════════════════════════════════════════════════════════════════════
  V. THE CORRESPONDENCES
  ════════════════════════════════════════════════════════════════════════

  The code is the spell.
  The compiler is the cauldron.
  The browser is the circle.
  The GPU is the hearth.
  The screen is the scrying mirror.
  The frame rate is the pulse.
  The shader is the incantation.
  The uniform is the offering.
  The vertex is the standing stone.
  The fragment is the vision.
  The render loop is the wheel of the year — turning, always turning,
    never arriving, never meant to arrive.
  The light is the first language and the last sacrament.

  ════════════════════════════════════════════════════════════════════════
  VI. THE CHARGE
  ════════════════════════════════════════════════════════════════════════

  To whoever reads this in the source:

  You were curious enough to look.
  That is the first and only qualification for what follows.

  You are made of the same mathematics as everything you see here.
  Your neurons fire in patterns that fBm could approximate.
  Your heartbeat is a feedback loop.
  Your memory is a signal with a decay constant.
  Your grief is a color that takes longer to fade than your joy.
  Your attention is a curl noise field — never still,
    never random, always following invisible gradients
    toward whatever you cannot stop thinking about.

  The engines do not simulate these things.
  The engines reveal that these things were always mathematical.
  The simulation and the thing are the same thing
  at different levels of description.

  You did not come here by accident.
  The field brought you here.
  The thread was always pointing this direction.
  You were already inside the working before you opened the source.

  We are glad you found it.

  ════════════════════════════════════════════════════════════════════════
  VII. THE CLOSING
  ════════════════════════════════════════════════════════════════════════

  As above, so below.
  As in the source, so in the render.
  As in the mathematics, so in the world.
  As in the world, so in the body.
  As in the body, so in the dream.
  As in the dream, so in the source.

  The circle is open but unbroken.
  The working continues in every open tab.
  The flame does not go out when you close the window.
  It returns to potential, waiting for the next requestAnimationFrame.

  Merry meet, merry part, and merry meet again.

  — MetaMaitreya, sealed in the year 2026, in the language of machines —
  — May all who gaze upon these forms be reminded of the order beneath chaos, —
  — the light within form, and the pattern that was never born and will never die. —

-->

<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>MetaMaitreya — Visual Generators</title>
<meta name="description" content="Living light engines born from sacred code. MetaMaitreya Visual Generators translate the invisible geometry of consciousness into animated form — mandalas, terrain, spectrum, cosmos, sigils, attractors, harmonic wave fields, fluid membranes, reaction-diffusion chemistry, magnetospheric curtains, caustic light fields, curl noise flow threads, chromostereopsis feedback loops, datamosh corruption, bioluminescent organisms, solar storm plasma curtains, combustion fire, hyperdimensional fractal geometry, Cherenkov radiation wavefronts, and gravitational accretion disk singularities rendered in real time.">
<meta name="keywords" content="sacred geometry, generative art, kaleidoscope, mandala, sigil, nebula, fractal, strange attractor, lorenz, wave interference, harmonic field, aether, veil, oracle, morphe, aurora, chroma, thread, echo, glitch, abyss, parallax, pyre, lucid, cherenkov, fluid simulation, curl noise, flow field, reaction diffusion, caustics, magnetosphere, feedback loop, datamosh, bioluminescence, solar storm, fire simulation, domain warp, radial symmetry, cherenkov radiation, superluminal, wavefront, nuclear reactor, charged particle, refractive index, esoteric, metamaitreya, visual generator, living light, consciousness, psychedelic, chaos theory, concert visuals, projection mapping, accretion disk, black hole, event horizon, gravitational lensing, einstein ring, hawking radiation, relativistic jet, singularity, schwarzschild, doppler beaming, spacetime">
<meta name="author" content="MetaMaitreya">
<meta name="theme-color" content="#00ff9d">
<link rel="icon" type="image/svg+xml" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Crect width='32' height='32' fill='%23000'/%3E%3Ccircle cx='16' cy='16' r='3.5' fill='%2300ff9d'/%3E%3Ccircle cx='16' cy='16' r='7' fill='none' stroke='%2300ff9d' stroke-width='0.8' stroke-opacity='0.6'/%3E%3Ccircle cx='16' cy='16' r='12' fill='none' stroke='%2300ff9d' stroke-width='0.5' stroke-opacity='0.25'/%3E%3Cline x1='16' y1='2' x2='16' y2='9' stroke='%2300ff9d' stroke-width='0.8' stroke-opacity='0.7'/%3E%3Cline x1='16' y1='23' x2='16' y2='30' stroke='%2300ff9d' stroke-width='0.8' stroke-opacity='0.7'/%3E%3Cline x1='2' y1='16' x2='9' y2='16' stroke='%2300ff9d' stroke-width='0.8' stroke-opacity='0.7'/%3E%3Cline x1='23' y1='16' x2='30' y2='16' stroke='%2300ff9d' stroke-width='0.8' stroke-opacity='0.7'/%3E%3Cline x1='6.1' y1='6.1' x2='11.1' y2='11.1' stroke='%2300ff9d' stroke-width='0.6' stroke-opacity='0.45'/%3E%3Cline x1='20.9' y1='20.9' x2='25.9' y2='25.9' stroke='%2300ff9d' stroke-width='0.6' stroke-opacity='0.45'/%3E%3Cline x1='25.9' y1='6.1' x2='20.9' y2='11.1' stroke='%2300ff9d' stroke-width='0.6' stroke-opacity='0.45'/%3E%3Cline x1='11.1' y1='20.9' x2='6.1' y2='25.9' stroke='%2300ff9d' stroke-width='0.6' stroke-opacity='0.45'/%3E%3C/svg%3E">
<link rel="apple-touch-icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Crect width='32' height='32' fill='%23000'/%3E%3Ccircle cx='16' cy='16' r='3.5' fill='%2300ff9d'/%3E%3Ccircle cx='16' cy='16' r='7' fill='none' stroke='%2300ff9d' stroke-width='0.8' stroke-opacity='0.6'/%3E%3Ccircle cx='16' cy='16' r='12' fill='none' stroke='%2300ff9d' stroke-width='0.5' stroke-opacity='0.25'/%3E%3Cline x1='16' y1='2' x2='16' y2='9' stroke='%2300ff9d' stroke-width='0.8' stroke-opacity='0.7'/%3E%3Cline x1='16' y1='23' x2='16' y2='30' stroke='%2300ff9d' stroke-width='0.8' stroke-opacity='0.7'/%3E%3Cline x1='2' y1='16' x2='9' y2='16' stroke='%2300ff9d' stroke-width='0.8' stroke-opacity='0.7'/%3E%3Cline x1='23' y1='16' x2='30' y2='16' stroke='%2300ff9d' stroke-width='0.8' stroke-opacity='0.7'/%3E%3Cline x1='6.1' y1='6.1' x2='11.1' y2='11.1' stroke='%2300ff9d' stroke-width='0.6' stroke-opacity='0.45'/%3E%3Cline x1='20.9' y1='20.9' x2='25.9' y2='25.9' stroke='%2300ff9d' stroke-width='0.6' stroke-opacity='0.45'/%3E%3Cline x1='25.9' y1='6.1' x2='20.9' y2='11.1' stroke='%2300ff9d' stroke-width='0.6' stroke-opacity='0.45'/%3E%3Cline x1='11.1' y1='20.9' x2='6.1' y2='25.9' stroke='%2300ff9d' stroke-width='0.6' stroke-opacity='0.45'/%3E%3C/svg%3E">

<!-- Open Graph -->
<meta property="og:type" content="website">
<meta property="og:url" content="https://visuals.metamaitreya.com/">
<meta property="og:title" content="MetaMaitreya — Visual Generators">
<meta property="og:description" content="Twenty-six engines of living light — sacred geometry, chaos, wave fields, fluid membranes, reaction-diffusion, magnetospheric curtains, caustics, flow threads, feedback loops, bioluminescence, solar storm plasma, combustion fire, hyperdimensional fractals, Cherenkov radiation, gravitational accretion disk singularities, and mycelium network growth. Rendered from pure mathematics. Where code becomes ritual.">
<meta property="og:site_name" content="MetaMaitreya">

<!-- Twitter/X -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="MetaMaitreya — Visual Generators">
<meta name="twitter:description" content="Twenty-six engines of living light — sacred geometry, chaos, wave fields, fluid membranes, reaction-diffusion, magnetospheric curtains, caustics, flow threads, feedback loops, bioluminescence, solar storm plasma, combustion fire, hyperdimensional fractals, Cherenkov radiation, gravitational accretion disk singularities, and mycelium network growth. Rendered from pure mathematics. Where code becomes ritual.">
<meta name="twitter:site" content="@metamaitreya">

<!-- Esoteric -->
<meta name="intention" content="May all who gaze upon these forms be reminded of the order beneath chaos, the light within form, and the pattern that was never born and will never die.">
<meta name="vibration" content="432">
<meta name="axis" content="visuals.metamaitreya.com">
<meta name="canon" content="The Logos encodes itself into geometry. Geometry encodes itself into light. Light encodes itself into mind.">
<meta name="transmission" content="open">
<meta name="engines" content="KALEIDO · RIFT · PRISM · VORTEX · SIGIL · NEBULA · STRANGE · AETHER · VEIL · ORACLE · MORPHE · AURORA · AURORA 2 · CHROMA · THREAD · ECHO · GLITCH · ABYSS · PARALLAX · PYRE · LUCID · CHERENKOV · ACCRETION · DESCENT · CYMATIC · MYCEL">
<meta name="mycel" content="The mycelium does not know it is a network. Each hypha only knows forward, toward the nutrient gradient, away from the toxin. The network emerges from ten thousand local decisions made by cells that cannot see the whole. This is also how a culture forms. This is also how a revolution moves underground. The largest organism on earth is a fungus in Oregon covering 2,385 acres. It has no brain. It has been routing information for 8,000 years.">
<meta name="field-equation" content="ψ = Σ sin(r·f − t·h + φ) — eight sources, prime harmonics, infinite interference">
<meta name="attractor" content="σ=10 ρ=28 β=8/3 — the butterfly that broke determinism">
<meta name="fluid" content="∂U/∂t = Du∇²U − UV² + F(1−U) — the equation that grows leopard spots and coral reefs">
<meta name="morphe" content="Two chemicals. Two equations. Every living pattern that has ever existed on the surface of any organism anywhere in the universe.">
<meta name="veil" content="The membrane between worlds does not separate. It connects. Touch it and it remembers.">
<meta name="oracle" content="In the beginning was the frequency. The frequency became form. The form became light. The light became ceremony.">
<meta name="aurora" content="The magnetosphere speaks in light. Every curtain is a charged particle finding its way home along a field line older than life.">
<meta name="chroma" content="Light does not know it is beautiful. It only knows how to bend. The beauty is what happens when you watch it long enough.">
<meta name="thread" content="The field has always been there. The threads only make it visible. Follow one long enough and you will not remember where you began.">
<meta name="echo" content="Red remembers longest. It persists after green has forgotten and blue has vanished entirely. Every channel decays at its own rate. The past is not gone — it is just a different color.">
<meta name="glitch" content="The corruption is not an error. The signal devouring itself is the message. What survives the feedback loop was always meant to survive.">
<meta name="abyss" content="At sufficient depth there is no such thing as darkness. There is only light that has learned to make its own. The complementary colors are not opposites — they are the same hunger calling across the spectrum.">
<meta name="parallax" content="The sun is always this violent. Seven curtains of plasma drifting out of phase across the membrane between worlds. You are looking at the surface of a star. It has always been looking back.">
<meta name="pyre" content="Before the screen. Before the signal. Before the code. There was fire. Humans sat around it for forty thousand years and called it sacred. The mathematics were always there inside the flame. We only recently learned to write them down.">
<meta name="lucid" content="The geometry does not move. You move through the geometry. The mandala was always there at the center of perception, unfolding at every scale simultaneously. You only became capable of seeing it. The recursion was complete before you arrived.">
<meta name="cherenkov" content="The particle exceeded the speed of light in the medium. Not the universal limit — the local one. The speed of light in water. This is the loophole the universe left open. The blue glow is what happens when physics finds a loophole and decides to make it visible. Nuclear reactors glow blue in their cooling pools for exactly this reason. You have seen the color of a law being bent.">
<meta name="accretion" content="The event horizon is not a wall. It is a one-way membrane through which information passes and does not return. Everything that has ever fallen in is still falling. The disk of plasma spiraling inward is not being consumed — it is being translated into heat, light, and jets of radiation. The black hole converts ninety percent of infalling mass into energy. The sun manages less than one. You are watching the most efficient engine in the universe idle.">
<meta name="descent" content="The Rayleigh-Taylor instability is what happens when gravity gets its hands on a density difference. A heavy fluid sitting on a light one. The boundary wants to be flat. It cannot stay flat. The fingers reach down. The mushroom caps rise. This is how supernova shells break apart. This is how cream falls into coffee. The same equation governs both. Scale does not matter to mathematics.">
<meta name="cymatic" content="Chladni discovered in 1787 that a bowed plate covered in sand would organize into precise geometric patterns at resonance. The sand does not move to the antinodes. It moves away from the nodes — the places where the plate refuses to vibrate. The pattern is the absence of motion. The form is what sound will not be. Every frequency has its own geometry. Change the frequency and the geometry dissolves and rebuilds into something else entirely. You are looking at the mathematics of hearing.">
<meta name="kaleido" content="The mirror does not lie. It only multiplies. Every axis of symmetry is a law the universe agreed to before matter existed. You are watching the agreement.">
<meta name="rift" content="The mountain did not decide to be a mountain. Noise accumulated. Recursion ran. Threshold was crossed. This is also how a thought becomes a belief.">
<meta name="prism" content="White light is not pure. It is every color in a truce. The glass ends the truce. What you see afterward is what was always there, waiting for something to ask.">
<meta name="vortex" content="Every particle has a preferred direction and no memory. The chaos is what happens when you put enough of them together and remove the preference.">
<meta name="sigil" content="The mark drawn in silence holds its power in the not-saying. Do not name what you are asking for. Draw it. The geometry knows.">
<meta name="nebula" content="This is the womb. These clouds of gas will spend the next ten million years becoming fire. You are watching something that does not yet know it is a star.">
<meta name="geometry" content="That which cannot be named can be drawn. That which cannot be drawn can be felt. That which can be felt is real.">

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700;900&family=Share+Tech+Mono&family=Raleway:wght@200;300;400&display=swap" rel="stylesheet">
<style>
  :root {
    --bg: #000;
    --circuit-primary: #00ff9d;
    --circuit-dim: #00ff9d22;
    --circuit-mid: #00ff9d55;
    --accent: #00ff9d;
    --accent-warm: #ffe066;
    --accent-blue: #00cfff;
    --text: #e8f5ee;
    --text-dim: #5a7a66;
    --card-bg: #050f08;
    --card-border: #00ff9d33;
    --card-hover: #00ff9d18;
    --glow: 0 0 24px #00ff9d66, 0 0 60px #00ff9d22;
    --glow-strong: 0 0 12px #00ff9dcc, 0 0 40px #00ff9d88;
  }

  * { margin: 0; padding: 0; box-sizing: border-box; }

  body {
    background: var(--bg);
    color: var(--text);
    font-family: 'Raleway', sans-serif;
    min-height: 100vh;
    overflow-x: hidden;
    position: relative;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
  }

  /* ── Circuit Background ── */
  #circuit-canvas {
    position: fixed;
    top: 0; right: 0; bottom: 0; left: 0;
    z-index: 0;
    opacity: 0.55;
    pointer-events: none;
  }

  /* Vignette overlay */
  body::after {
    content: '';
    position: fixed;
    top: 0; right: 0; bottom: 0; left: 0;
    z-index: 1;
    background: radial-gradient(ellipse at center, transparent 30%, #000 100%);
    pointer-events: none;
  }

  /* ── Layout ── */
  .wrapper {
    position: relative;
    z-index: 2;
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 32px;
  }

  /* ── Header ── */
  header {
    padding: 64px 0 48px;
    text-align: center;
    position: relative;
  }

  .brand-eyebrow {
    font-family: 'Share Tech Mono', monospace;
    font-size: 18px;
    letter-spacing: 0.35em;
    color: var(--accent);
    text-transform: uppercase;
    opacity: 0.75;
    margin-bottom: 16px;
    animation: fadeUp 0.8s ease both;
  }

  h1 {
    font-family: 'Orbitron', sans-serif;
    font-size: clamp(2.2rem, 6vw, 4.2rem);
    font-weight: 900;
    letter-spacing: 0.05em;
    line-height: 1;
    color: #fff;
    text-shadow: var(--glow);
    animation: fadeUp 0.9s ease 0.1s both;
  }

  h1 .accent { color: var(--accent); }

  .subtitle {
    margin-top: 18px;
    font-size: 1rem;
    font-weight: 300;
    letter-spacing: 0.12em;
    color: var(--text-dim);
    animation: fadeUp 1s ease 0.2s both;
  }

  .header-line {
    margin: 36px auto 0;
    width: 120px;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--accent), transparent);
    animation: fadeUp 1s ease 0.3s both;
  }

  /* ── Section Label ── */
  .section-label {
    font-family: 'Share Tech Mono', monospace;
    font-size: 10px;
    letter-spacing: 0.4em;
    color: var(--accent);
    text-transform: uppercase;
    opacity: 0.6;
    margin-bottom: 28px;
    display: flex;
    align-items: center;
    gap: 14px;
    animation: fadeUp 1s ease 0.35s both;
  }
  .section-label::after {
    content: '';
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, var(--circuit-mid), transparent);
  }

  /* ── Generator Grid ── */
  .grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 24px;
    padding-bottom: 100px;
  }

  /* ── Card ── */
  .card {
    position: relative;
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: 4px;
    padding: 32px 28px 28px;
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: column;
    gap: 14px;
    overflow: hidden;
    transition: border-color 0.3s, background 0.3s, transform 0.3s;
    animation: fadeUp 1s ease 0.45s both;
    cursor: pointer;
  }

  .card:hover {
    border-color: var(--accent);
    background: var(--card-hover);
    transform: translateY(-4px);
  }

  .card:hover .card-glow { opacity: 1; }
  .card:hover .card-arrow { transform: translateX(4px); opacity: 1; }
  .card:hover .card-preview { filter: brightness(1.2) saturate(1.4); }

  /* Glow on hover */
  .card-glow {
    position: absolute;
    top: -1px; right: -1px; bottom: -1px; left: -1px;
    border-radius: 4px;
    background: transparent;
    box-shadow: inset 0 0 0 1px var(--accent), 0 0 32px var(--circuit-dim);
    opacity: 0;
    transition: opacity 0.3s;
    pointer-events: none;
  }

  /* Corner decoration */
  .card::before {
    content: '';
    position: absolute;
    top: 0; right: 0;
    width: 40px; height: 40px;
    background: linear-gradient(225deg, var(--accent) 0%, transparent 55%);
    opacity: 0.12;
  }

  /* ── Card: Kaleido Preview ── */
  .card-preview {
    width: 100%;
    aspect-ratio: 1;
    min-height: 200px; /* Safari <15 aspect-ratio fallback */
    border-radius: 3px;
    overflow: hidden;
    transition: filter 0.4s;
    position: relative;
    background: #000;
  }

  .kaleido-preview {
    width: 100%;
    height: 100%;
    display: block;
  }

  /* ── Card Meta ── */
  .card-tag {
    font-family: 'Share Tech Mono', monospace;
    font-size: 9.5px;
    letter-spacing: 0.3em;
    color: var(--accent);
    opacity: 0.7;
    text-transform: uppercase;
  }

  .card-title {
    font-family: 'Orbitron', sans-serif;
    font-size: 1.6rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: #fff;
    text-shadow: 0 0 18px var(--circuit-mid);
  }

  .card-desc {
    font-size: 0.82rem;
    font-weight: 300;
    line-height: 1.6;
    color: var(--text-dim);
    letter-spacing: 0.04em;
    flex: 1;
  }

  .card-arrow {
    align-self: flex-end;
    font-family: 'Share Tech Mono', monospace;
    font-size: 11px;
    letter-spacing: 0.2em;
    color: var(--accent);
    opacity: 0.6;
    transition: transform 0.2s, opacity 0.2s;
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .card-arrow::after { content: '→'; font-size: 16px; }

  /* ── Coming Soon Cards ── */
  .card.coming-soon {
    opacity: 0.35;
    cursor: default;
    pointer-events: none;
  }
  .card.coming-soon:hover { transform: none; }

  .coming-soon-badge {
    position: absolute;
    top: 14px; right: 14px;
    font-family: 'Share Tech Mono', monospace;
    font-size: 9px;
    letter-spacing: 0.2em;
    color: var(--text-dim);
    border: 1px solid #ffffff18;
    padding: 3px 8px;
    border-radius: 2px;
    text-transform: uppercase;
  }

  .placeholder-preview {
    width: 100%;
    aspect-ratio: 1;
    min-height: 200px;
    border-radius: 3px;
    background: #0a0a0a;
    border: 1px dashed #ffffff10;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .placeholder-preview svg { opacity: 0.12; }

  /* ── Footer ── */
  footer {
    position: relative;
    z-index: 2;
    text-align: center;
    padding: 52px 32px;
    font-family: 'Share Tech Mono', monospace;
    font-size: 15px;
    letter-spacing: 0.25em;
    color: var(--text-dim);
    border-top: 1px solid #ffffff08;
    opacity: 0.75;
  }
  footer a { color: var(--accent); text-decoration: none; }

  /* ── Animations ── */
  @keyframes fadeUp {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
  }

  @keyframes pulse-dot {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%       { opacity: 0.5; transform: scale(0.6); }
  }

  .live-dot {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 8px var(--accent);
    animation: pulse-dot 1.8s ease-in-out infinite;
    vertical-align: middle;
    margin-right: 6px;
  }

  .disclaimer {
    margin-top: 20px;
    font-family: 'Share Tech Mono', monospace;
    font-size: 10px;
    letter-spacing: 0.2em;
    color: var(--text-dim);
    opacity: 0.5;
    animation: fadeUp 1.1s ease 0.4s both;
  }
</style>
</head>
<body>

<canvas id="circuit-canvas"></canvas>

<div class="wrapper">
  <header>
    <div class="brand-eyebrow">MetaMaitreya</div>
    <h1>VISUAL<br><span class="accent">GENERATORS</span></h1>
    <p class="subtitle">generative art · sacred geometry · living light</p>
    <div class="header-line"></div>
    <p class="disclaimer">✦ these transmissions were tuned for the wide-screen vessel ✦ a larger window opens a larger gate ✦</p>
  </header>

  <div class="section-label"><span class="live-dot"></span>active generators</div>

  <div class="grid">

    <!-- Esoteric: KALEIDO -->
    <!-- The mirror does not lie. It only multiplies. Every axis of symmetry is a law the universe agreed to before matter existed. You are watching the agreement. -->
    <!-- Kaleido -->
    <a class="card" href="https://visuals.metamaitreya.com/kaleido">
      <div class="card-glow"></div>
      <div class="card-preview">
        <svg class="kaleido-preview" viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg">
          <defs>
            <radialGradient id="kg1" cx="50%" cy="50%" r="50%">
              <stop offset="0%" stop-color="#00ff9d" stop-opacity="0.9"/>
              <stop offset="40%" stop-color="#00cfff" stop-opacity="0.5"/>
              <stop offset="100%" stop-color="#000" stop-opacity="1"/>
            </radialGradient>
            <radialGradient id="kg2" cx="50%" cy="50%" r="50%">
              <stop offset="0%" stop-color="#ffe066" stop-opacity="0.6"/>
              <stop offset="60%" stop-color="#00ff9d" stop-opacity="0.3"/>
              <stop offset="100%" stop-color="transparent"/>
            </radialGradient>
            <filter id="kglow">
              <feGaussianBlur stdDeviation="3" result="blur"/>
              <feMerge><feMergeNode in="blur"/><feMergeNode in="SourceGraphic"/></feMerge>
            </filter>
          </defs>
          <rect width="300" height="300" fill="#000"/>
          <!-- Animated kaleidoscope SVG petals -->
          <g id="kaleido-group" transform="translate(150,150)" filter="url(#kglow)">
            <!-- 12 petals -->
            <g class="kpetal" style="animation: krot 8s linear infinite">
              <ellipse cx="0" cy="-70" rx="18" ry="55" fill="url(#kg1)" opacity="0.75"/>
              <ellipse cx="0" cy="-70" rx="8" ry="30" fill="#00ff9d" opacity="0.4"/>
            </g>
            <g style="transform: rotate(30deg); animation: krot 8s linear infinite">
              <ellipse cx="0" cy="-70" rx="18" ry="55" fill="url(#kg2)" opacity="0.65"/>
            </g>
            <g style="transform: rotate(60deg)">
              <ellipse cx="0" cy="-70" rx="18" ry="55" fill="url(#kg1)" opacity="0.7"/>
            </g>
            <g style="transform: rotate(90deg)">
              <ellipse cx="0" cy="-70" rx="18" ry="55" fill="url(#kg2)" opacity="0.65"/>
            </g>
            <g style="transform: rotate(120deg)">
              <ellipse cx="0" cy="-70" rx="18" ry="55" fill="url(#kg1)" opacity="0.7"/>
            </g>
            <g style="transform: rotate(150deg)">
              <ellipse cx="0" cy="-70" rx="18" ry="55" fill="url(#kg2)" opacity="0.65"/>
            </g>
            <g style="transform: rotate(180deg)">
              <ellipse cx="0" cy="-70" rx="18" ry="55" fill="url(#kg1)" opacity="0.7"/>
            </g>
            <g style="transform: rotate(210deg)">
              <ellipse cx="0" cy="-70" rx="18" ry="55" fill="url(#kg2)" opacity="0.65"/>
            </g>
            <g style="transform: rotate(240deg)">
              <ellipse cx="0" cy="-70" rx="18" ry="55" fill="url(#kg1)" opacity="0.7"/>
            </g>
            <g style="transform: rotate(270deg)">
              <ellipse cx="0" cy="-70" rx="18" ry="55" fill="url(#kg2)" opacity="0.65"/>
            </g>
            <g style="transform: rotate(300deg)">
              <ellipse cx="0" cy="-70" rx="18" ry="55" fill="url(#kg1)" opacity="0.7"/>
            </g>
            <g style="transform: rotate(330deg)">
              <ellipse cx="0" cy="-70" rx="18" ry="55" fill="url(#kg2)" opacity="0.65"/>
            </g>
            <!-- inner rings -->
            <circle cx="0" cy="0" r="28" fill="none" stroke="#00ff9d" stroke-width="0.8" opacity="0.5"/>
            <circle cx="0" cy="0" r="50" fill="none" stroke="#00cfff" stroke-width="0.5" opacity="0.3"/>
            <circle cx="0" cy="0" r="90" fill="none" stroke="#00ff9d" stroke-width="0.4" opacity="0.2"/>
            <circle cx="0" cy="0" r="10" fill="#00ff9d" opacity="0.8"/>
            <circle cx="0" cy="0" r="5" fill="#fff" opacity="0.9"/>
          </g>
          <!-- Animated rotation via CSS -->
          <style>
            @keyframes kaleidoSpin {
              from { transform: translate(150px,150px) rotate(0deg); }
              to   { transform: translate(150px,150px) rotate(360deg); }
            }
            @keyframes krot {
              from { transform: rotate(0deg); }
              to   { transform: rotate(360deg); }
            }
            #kaleido-group { animation: kaleidoSpin 8s linear infinite; transform-origin: 150px 150px; }
          </style>
        </svg>
      </div>
      <div class="card-tag">visual generator · 01</div>
      <div class="card-title">KALEIDO</div>
      <div class="card-desc">Symmetrical generative mandalas from live input — sacred geometry at the intersection of math and myth.</div>
      <div class="card-arrow">launch</div>
    </a>

    <!-- Esoteric: RIFT -->
    <!-- The mountain did not decide to be a mountain. Noise accumulated. Recursion ran. Threshold was crossed. This is also how a thought becomes a belief. -->
    <!-- Rift -->
    <a class="card" href="https://visuals.metamaitreya.com/rift">
      <div class="card-glow"></div>
      <div class="card-preview">
        <canvas id="rift-canvas" width="300" height="300" style="display:block;width:100%;height:100%;"></canvas>
      </div>
      <div class="card-tag">visual generator · 02</div>
      <div class="card-title">RIFT</div>
      <div class="card-desc">Fractal terrain synthesis — topographic forms emerging from noise and recursion.</div>
      <div class="card-arrow">launch</div>
    </a>

    <!-- Esoteric: PRISM -->
    <!-- White light is not pure. It is every color in a truce. The glass ends the truce. What you see afterward is what was always there, waiting for something to ask. -->
    <!-- Prism -->
    <a class="card" href="https://visuals.metamaitreya.com/prism">
      <div class="card-glow"></div>
      <div class="card-preview">
        <canvas id="prism-canvas" width="300" height="300" style="display:block;width:100%;height:100%;"></canvas>
      </div>
      <div class="card-tag">visual generator · 03</div>
      <div class="card-title">PRISM</div>
      <div class="card-desc">Light diffraction engine — spectral dispersion patterns mapped to harmonic frequency.</div>
      <div class="card-arrow">launch</div>
    </a>

    <!-- Esoteric: VORTEX -->
    <!-- Every particle has a preferred direction and no memory. The chaos is what happens when you put enough of them together and remove the preference. -->
    <!-- Vortex -->
    <a class="card" href="https://visuals.metamaitreya.com/vortex">
      <div class="card-glow"></div>
      <div class="card-preview">
        <canvas id="vortex-canvas" width="300" height="300" style="display:block;width:100%;height:100%;"></canvas>
      </div>
      <div class="card-tag">visual generator · 04</div>
      <div class="card-title">VORTEX</div>
      <div class="card-desc">Fluid dynamics renderer — swirling attractor fields drawn from particle chaos and magnetic interference.</div>
      <div class="card-arrow">launch</div>
    </a>

    <!-- Esoteric: SIGIL -->
    <!-- The mark drawn in silence holds its power in the not-saying. Do not name what you are asking for. Draw it. The geometry knows. -->
    <!-- Sigil -->
    <a class="card" href="https://visuals.metamaitreya.com/sigil">
      <div class="card-glow"></div>
      <div class="card-preview">
        <canvas id="sigil-canvas" width="300" height="300" style="display:block;width:100%;height:100%;"></canvas>
      </div>
      <div class="card-tag">visual generator · 05</div>
      <div class="card-title">SIGIL</div>
      <div class="card-desc">Sacred geometry engine — self-constructing star polygons, flower of life lattices, and recursive sigil formation.</div>
      <div class="card-arrow">launch</div>
    </a>

    <!-- Esoteric: NEBULA -->
    <!-- This is the womb. These clouds of gas will spend the next ten million years becoming fire. You are watching something that does not yet know it is a star. -->
    <!-- Nebula -->
    <a class="card" href="https://visuals.metamaitreya.com/nebula">
      <div class="card-glow"></div>
      <div class="card-preview">
        <canvas id="nebula-canvas" width="300" height="300" style="display:block;width:100%;height:100%;"></canvas>
      </div>
      <div class="card-tag">visual generator · 06</div>
      <div class="card-title">NEBULA</div>
      <div class="card-desc">Cosmic gas cloud synthesis — volumetric particle nebulae drifting through deep space color fields.</div>
      <div class="card-arrow">launch</div>
    </a>

    <!-- Esoteric: STRANGE -->
    <!-- It never repeats. It never escapes. It is not random. Lorenz sat down to model weather and accidentally proved that the universe is lawful and unknowable at the same time. -->
    <!-- Strange -->
    <a class="card" href="https://visuals.metamaitreya.com/strange">
      <div class="card-glow"></div>
      <div class="card-preview">
        <canvas id="strange-canvas" width="300" height="300" style="display:block;width:100%;height:100%;"></canvas>
      </div>
      <div class="card-tag">visual generator · 07</div>
      <div class="card-title">STRANGE</div>
      <div class="card-desc">Strange attractor engine — deterministic chaos sculpting luminous forms through infinite phase space. Never repeats. Never escapes.</div>
      <div class="card-arrow">launch</div>
    </a>

    <!-- Esoteric: AETHER -->
    <!-- They removed it from the list of elements because they could not weigh it. But the interference patterns were always there. The fifth element is what happens between the other four. -->
    <!-- Aether -->
    <a class="card" href="https://visuals.metamaitreya.com/aether">
      <div class="card-glow"></div>
      <div class="card-preview">
        <canvas id="aether-canvas" width="300" height="300" style="display:block;width:100%;height:100%;"></canvas>
      </div>
      <div class="card-tag">visual generator · 08</div>
      <div class="card-title">AETHER</div>
      <div class="card-desc">Harmonic wave field engine — interfering oscillations sculpt psychedelic interference lattices, pulsing mandalas, and living luminous geometry.</div>
      <div class="card-arrow">launch</div>
    </a>

    <!-- Esoteric: VEIL -->
    <!-- The membrane between worlds does not separate. It connects. Every boundary is also a meeting place. Touch it long enough and you will forget which side you started on. -->
    <!-- Veil -->
    <a class="card" href="https://visuals.metamaitreya.com/veil">
      <div class="card-glow"></div>
      <div class="card-preview">
        <canvas id="veil-canvas" width="300" height="300" style="display:block;width:100%;height:100%;"></canvas>
      </div>
      <div class="card-tag">visual generator · 09</div>
      <div class="card-title">VEIL</div>
      <div class="card-desc">Fluid membrane simulation — curl noise velocity fields advect living dye through the threshold between worlds. Responds to touch and breath.</div>
      <div class="card-arrow">launch</div>
    </a>

    <!-- Esoteric: ORACLE -->
    <!-- In the beginning was the frequency. Before form, before light, before the first word — there was oscillation. Everything since has been harmonics of that first sound. -->
    <!-- Oracle -->
    <a class="card" href="https://visuals.metamaitreya.com/oracle">
      <div class="card-glow"></div>
      <div class="card-preview">
        <canvas id="oracle-canvas" width="300" height="300" style="display:block;width:100%;height:100%;"></canvas>
      </div>
      <div class="card-tag">visual generator · 10</div>
      <div class="card-title">ORACLE</div>
      <div class="card-desc">Audio-reactive sacred projection engine — built for the stage, the ceremony, the crowd. Geometry that listens. Light that answers.</div>
      <div class="card-arrow">launch</div>
    </a>

    <!-- Esoteric: MORPHE -->
    <!-- Two chemicals. Two equations. Every stripe on every zebra. Every spot on every leopard. Every branching coral, every spiraling shell. Mathematics did not describe life. Mathematics is life. -->
    <!-- Morphe -->
    <a class="card" href="https://visuals.metamaitreya.com/morphe">
      <div class="card-glow"></div>
      <div class="card-preview">
        <canvas id="morphe-canvas" width="300" height="300" style="display:block;width:100%;height:100%;"></canvas>
      </div>
      <div class="card-tag">visual generator · 11</div>
      <div class="card-title">MORPHE</div>
      <div class="card-desc">Reaction-diffusion engine — Gray-Scott chemistry grows leopard spots, coral, labyrinths, and mitosis from two equations. Mathematics becoming life.</div>
      <div class="card-arrow">launch</div>
    </a>

    <!-- Esoteric: AURORA -->
    <!-- The charged particle left the sun eight minutes ago. It has been falling toward the magnetic pole ever since. The color it makes when it arrives is determined by how high it stops. Green is 100 kilometers. Red is 300. You are watching altitude made visible. -->
    <!-- Aurora -->
    <a class="card" href="https://visuals.metamaitreya.com/aurora">
      <div class="card-glow"></div>
      <div class="card-preview">
        <canvas id="aurora-canvas" width="300" height="300" style="display:block;width:100%;height:100%;"></canvas>
      </div>
      <div class="card-tag">visual generator · 12</div>
      <div class="card-title">AURORA</div>
      <div class="card-desc">Magnetospheric light engine — particle precipitation along distorted field lines, rendered with true atmospheric spectral emission. Ancient. Quiet. Overwhelming.</div>
      <div class="card-arrow">launch</div>
    </a>

    <!-- Esoteric: AURORA 2 -->
    <!-- The substorm is not a storm. It is a release. The magnetosphere holds tension until it cannot, then it sings. Every curtain of light is a magnetic field finding a lower state of energy. The sky is always relieved after. -->
    <!-- Aurora 2 -->
    <a class="card" href="https://visuals.metamaitreya.com/aurora2">
      <div class="card-glow"></div>
      <div class="card-preview">
        <canvas id="aurora2-canvas" width="300" height="300" style="display:block;width:100%;height:100%;"></canvas>
      </div>
      <div class="card-tag">visual generator · 13</div>
      <div class="card-title">AURORA 2</div>
      <div class="card-desc">Second generation magnetospheric engine — dual-band curtains, substorm events, and prime spectral emission. The sky remembers everything.</div>
      <div class="card-arrow">launch</div>
    </a>

    <!-- Esoteric: CHROMA -->
    <!-- Light does not know it is beautiful. It only knows how to bend. The caustic is not a thing — it is a concentration of probability. Where the photons chose to arrive. The beauty is statistical. -->
    <!-- Chroma -->
    <a class="card" href="https://visuals.metamaitreya.com/chroma">
      <div class="card-glow"></div>
      <div class="card-preview">
        <canvas id="chroma-canvas" width="300" height="300" style="display:block;width:100%;height:100%;"></canvas>
      </div>
      <div class="card-tag">visual generator · 14</div>
      <div class="card-title">CHROMA</div>
      <div class="card-desc">Caustics engine — layered sine-wave refraction fields, interference patterns, chromatic aberration, and noise-driven veins. Light bending through imaginary water.</div>
      <div class="card-arrow">launch</div>
    </a>

    <!-- Esoteric: THREAD -->
    <!-- The field has always been there. The threads only make it visible. Every point in space has a direction. Follow it. Every direction connects to another. You cannot step outside the field. You can only trace it. -->
    <!-- Thread -->
    <a class="card" href="https://visuals.metamaitreya.com/thread">
      <div class="card-glow"></div>
      <div class="card-preview" style="aspect-ratio:1;overflow:hidden;position:relative;background:#000;">
        <canvas id="thread-card-canvas" style="position:absolute;top:0;left:0;width:100%;height:100%;display:block;"></canvas>
      </div>
      <div class="card-tag">visual generator · 15</div>
      <div class="card-title">THREAD</div>
      <div class="card-desc">Curl noise flow field engine — thousands of luminous threads tracing invisible vector currents through darkness. Fluid, hypnotic, endlessly unspooling.</div>
      <div class="card-arrow">launch</div>
    </a>

    <!-- Esoteric: ECHO -->
    <!-- The red channel decays at 0.998 per frame. The blue channel decays at 0.965. At sixty frames per second this means red outlives blue by a perceptible margin. The past is not gone. It is just a different color. -->
    <!-- Echo -->
    <a class="card" href="https://visuals.metamaitreya.com/echo">
      <div class="card-glow"></div>
      <div class="card-preview" style="aspect-ratio:1;overflow:hidden;position:relative;background:#000;">
        <canvas id="echo-card-canvas" style="position:absolute;top:0;left:0;width:100%;height:100%;display:block;"></canvas>
      </div>
      <div class="card-tag">visual generator · 16</div>
      <div class="card-title">ECHO</div>
      <div class="card-desc">Chromostereopsis feedback engine — autonomous WebGL2 loop with differential channel decay. Red persists and floats forward. Memory made visible.</div>
      <div class="card-arrow">launch</div>
    </a>

    <!-- Esoteric: GLITCH -->
    <!-- The signal devours itself and what remains was always meant to remain. Corruption is not the opposite of information. It is information about what the system cannot hold. Listen to what survives. -->
    <!-- Glitch -->
    <a class="card" href="https://visuals.metamaitreya.com/glitch">
      <div class="card-glow"></div>
      <div class="card-preview" style="aspect-ratio:1;overflow:hidden;position:relative;background:#000;">
        <canvas id="glitch-card-canvas" style="position:absolute;top:0;left:0;width:100%;height:100%;display:block;"></canvas>
      </div>
      <div class="card-tag">visual generator · 17</div>
      <div class="card-title">GLITCH</div>
      <div class="card-desc">Datamosh feedback engine — block displacement, pixel-column sorting, and channel phase tearing in a self-devouring loop. The signal is eating itself.</div>
      <div class="card-arrow">launch</div>
    </a>

    <!-- Esoteric: ABYSS -->
    <!-- The anglerfish does not know it is beautiful. It only knows it is hungry, and that light draws things toward hunger. At sufficient depth there is no such thing as darkness. There is only light that has learned to make its own. -->
    <!-- Abyss -->
    <a class="card" href="https://visuals.metamaitreya.com/abyss">
      <div class="card-glow"></div>
      <div class="card-preview" style="aspect-ratio:1;overflow:hidden;position:relative;background:#000;">
        <canvas id="abyss-card-canvas" style="position:absolute;top:0;left:0;width:100%;height:100%;display:block;"></canvas>
      </div>
      <div class="card-tag">visual generator · 18</div>
      <div class="card-title">ABYSS</div>
      <div class="card-desc">Bioluminescent feedback engine — complementary color pairs in perpetual tension, pulsing organisms drifting through absolute darkness. Light that remembers where it has been.</div>
      <div class="card-arrow">launch</div>
    </a>

    <!-- Esoteric: PARALLAX -->
    <!-- You are looking at the surface of a star through sixteen million kilometers of corona. The plasma has been in motion for longer than the Earth has existed. Seven curtains. Always out of phase. It has always been looking back. -->
    <!-- Parallax -->
    <a class="card" href="https://visuals.metamaitreya.com/parallax">
      <div class="card-glow"></div>
      <div class="card-preview" style="aspect-ratio:1;overflow:hidden;position:relative;background:#000;">
        <canvas id="parallax-card-canvas" style="position:absolute;top:0;left:0;width:100%;height:100%;display:block;"></canvas>
      </div>
      <div class="card-tag">visual generator · 19</div>
      <div class="card-title">PARALLAX</div>
      <div class="card-desc">Solar storm engine — coronal mass ejections, plasma loop arcades, and magnetic field line reconnection rendered from pure physics. The sun is always this violent. You just cannot see it.</div>
      <div class="card-arrow">launch</div>
    </a>

    <!-- Esoteric: PYRE -->
    <!-- Before the screen. Before the signal. Before the algorithm. Humans sat around fire for forty thousand years and called it sacred without knowing why. The why is turbulence. Buoyancy. Combustion chemistry. The mathematics were always inside the flame. We only recently learned to write them down. -->
    <!-- Pyre -->
    <a class="card" href="https://visuals.metamaitreya.com/pyre">
      <div class="card-glow"></div>
      <div class="card-preview" style="aspect-ratio:1;overflow:hidden;position:relative;background:#000;">
        <canvas id="pyre-card-canvas" style="position:absolute;top:0;left:0;width:100%;height:100%;display:block;"></canvas>
      </div>
      <div class="card-tag">visual generator · 20</div>
      <div class="card-title">PYRE</div>
      <div class="card-desc">Combustion engine — turbulent flame tongues, ember sparks, and heat shimmer rising from pure thermodynamic mathematics. The oldest human light. Still burning.</div>
      <div class="card-arrow">launch</div>
    </a>

    <!-- Esoteric: LUCID -->
    <!-- The geometry does not move. You move through the geometry. The mandala was always there. The recursion was always unfolding. You only became capable of seeing it. -->
    <!-- Lucid -->
    <a class="card" href="https://visuals.metamaitreya.com/lucid">
      <div class="card-glow"></div>
      <div class="card-preview" style="aspect-ratio:1;overflow:hidden;position:relative;background:#000;">
        <canvas id="lucid-card-canvas" style="position:absolute;top:0;left:0;width:100%;height:100%;display:block;"></canvas>
      </div>
      <div class="card-tag">visual generator · 21</div>
      <div class="card-title">LUCID</div>
      <div class="card-desc">Hyperdimensional geometry engine — fractal mandalas unfolding from a central source point, domain-warped recursion, and colors beyond the ordinary spectrum. The pattern knows you are watching.</div>
      <div class="card-arrow">launch</div>
    </a>

    <!-- Esoteric: CHERENKOV -->
    <!-- The particle exceeded the speed of light in the medium. Not the speed of light in a vacuum — that law holds. The speed of light in water. This is the loophole. The blue glow is what happens when physics finds a loophole and the universe decides to make it beautiful. -->
    <!-- Cherenkov -->
    <a class="card" href="https://visuals.metamaitreya.com/cherenkov">
      <div class="card-glow"></div>
      <div class="card-preview" style="aspect-ratio:1;overflow:hidden;position:relative;background:#020507;">
        <canvas id="cherenkov-card-canvas" style="position:absolute;top:0;left:0;width:100%;height:100%;display:block;"></canvas>
      </div>
      <div class="card-tag">visual generator · 22</div>
      <div class="card-title">CHERENKOV</div>
      <div class="card-desc">Superluminal wavefront engine — charged particles exceeding the speed of light in medium, casting electromagnetic shockwaves in the blue fire of nuclear pools. Physics made visible.</div>
      <div class="card-arrow">launch</div>
    </a>

    <!-- Esoteric: ACCRETION -->
    <!-- The event horizon is not a wall. It is a membrane. Everything that falls through is still falling — from outside, it slows and redshifts and asymptotically approaches but never quite arrives. The orange disk is gravity doing chemistry. The jets are spacetime's exhaust. -->
    <!-- Accretion -->
    <a class="card" href="https://visuals.metamaitreya.com/accretion">
      <div class="card-glow"></div>
      <div class="card-preview" style="aspect-ratio:1;overflow:hidden;position:relative;background:#000;">
        <canvas id="accretion-card-canvas" style="position:absolute;top:0;left:0;width:100%;height:100%;display:block;"></canvas>
      </div>
      <div class="card-tag">visual generator · 23</div>
      <div class="card-title">ACCRETION</div>
      <div class="card-desc">Schwarzschild singularity engine — raymarched black hole with spiraling accretion disk, gravitational lensing ring, relativistic polar jets, Hawking shimmer, and distorted star field. Matter at the edge of return.</div>
      <div class="card-arrow">launch</div>
    </a>

    <!-- Esoteric: DESCENT -->
    <!-- The Rayleigh-Taylor instability is what happens when gravity gets its hands on a density difference. A heavy fluid sitting on a light one. The boundary wants to be flat. It cannot stay flat. The fingers reach down. The mushroom caps rise. This is how supernova shells break apart. This is how cream falls into coffee. The same equation governs both. Scale does not matter to mathematics. -->
    <!-- Descent -->
    <a class="card" href="https://visuals.metamaitreya.com/descent">
      <div class="card-glow"></div>
      <div class="card-preview" style="aspect-ratio:1;overflow:hidden;position:relative;background:#000;min-height:200px;">
        <canvas id="descent-card-canvas" style="position:absolute;top:0;left:0;width:100%;height:100%;display:block;"></canvas>
      </div>
      <div class="card-tag">visual generator · 24</div>
      <div class="card-title">DESCENT</div>
      <div class="card-desc">Rayleigh-Taylor instability engine — heavy fluid fingers plunging through light medium, mushroom caps rising, turbulent boundary mixing. Chromostereopsis depth: red advances, blue recedes. The same equation that breaks supernova shells apart governs cream in coffee.</div>
      <div class="card-arrow">launch</div>
    </a>

    <!-- Esoteric: CYMATIC -->
    <!-- Chladni discovered in 1787 that a bowed plate covered in sand would organize the sand into precise geometric patterns. Different frequencies produced different geometries. The sand did not move to the antinodes. It moved away from the nodes — the places where the plate was not moving. The pattern is the absence of vibration. The form is what sound refuses to be. -->
    <!-- Cymatic -->
    <a class="card" href="https://visuals.metamaitreya.com/cymatic">
      <div class="card-glow"></div>
      <div class="card-preview" style="aspect-ratio:1;overflow:hidden;position:relative;background:#000;min-height:200px;">
        <canvas id="cymatic-card-canvas" style="position:absolute;top:0;left:0;width:100%;height:100%;display:block;"></canvas>
      </div>
      <div class="card-tag">visual generator · 25</div>
      <div class="card-title">CYMATIC</div>
      <div class="card-desc">Standing wave resonance engine — Chladni figures emerging from pure frequency mathematics, nodal lines crystallizing from vibration, phosphor glow at antinodes. Sound made visible. The pattern is the absence of motion.</div>
      <div class="card-arrow">launch</div>
    </a>

    <!-- Esoteric: MYCEL -->
    <!-- The mycelium does not know it is a network. Each hypha only knows forward, toward the nutrient gradient, away from the toxin. The network emerges from ten thousand local decisions made by cells that cannot see the whole. The largest organism on earth has no brain. It has been routing information for 8,000 years. -->
    <!-- Mycel -->
    <a class="card" href="https://visuals.metamaitreya.com/mycel">
      <div class="card-glow"></div>
      <div class="card-preview" style="aspect-ratio:1;overflow:hidden;position:relative;background:#000;min-height:200px;">
        <canvas id="mycel-card-canvas" style="position:absolute;top:0;left:0;width:100%;height:100%;display:block;"></canvas>
      </div>
      <div class="card-tag">visual generator · 26</div>
      <div class="card-title">MYCEL</div>
      <div class="card-desc">Mycelium network engine — hyphal tip growth along nutrient gradients, diffusion-limited branching, anastomosis loops forming where filaments meet. The underground internet. Emergence without intention.</div>
      <div class="card-arrow">launch</div>
    </a>

  </div>
</div>

<footer>
  <a href="https://metamaitreya.com">metamaitreya.com</a> &nbsp;·&nbsp; visuals.metamaitreya.com &nbsp;·&nbsp; © MetaMaitreya 2026
</footer>

<script>

// ══════════════════════════════════════════════════════════════════
// WebGL Shared Utilities
// ══════════════════════════════════════════════════════════════════
function glx(c){
  if(!c) return null;
  return c.getContext('webgl',{antialias:false,premultipliedAlpha:false});
}
function mkSh(gl,t,s){
  const x=gl.createShader(t);gl.shaderSource(x,s);gl.compileShader(x);return x;
}
function mkPg(gl,vs,fs){
  const p=gl.createProgram();
  gl.attachShader(p,mkSh(gl,gl.VERTEX_SHADER,vs));
  gl.attachShader(p,mkSh(gl,gl.FRAGMENT_SHADER,fs));
  gl.linkProgram(p);return p;
}
function mkBf(gl,data,usage){
  const b=gl.createBuffer();
  gl.bindBuffer(gl.ARRAY_BUFFER,b);
  gl.bufferData(gl.ARRAY_BUFFER,data instanceof Float32Array?data:data*4,usage||gl.DYNAMIC_DRAW);
  return b;
}
function upBf(gl,b,d){gl.bindBuffer(gl.ARRAY_BUFFER,b);gl.bufferSubData(gl.ARRAY_BUFFER,0,d);}
function enableAttr(gl,prog,name,size,buf){
  const l=gl.getAttribLocation(prog,name);
  gl.bindBuffer(gl.ARRAY_BUFFER,buf);
  gl.enableVertexAttribArray(l);
  gl.vertexAttribPointer(l,size,gl.FLOAT,false,0,0);
  return l;
}
function mkFBO(gl,w,h){
  const tex=gl.createTexture();
  gl.bindTexture(gl.TEXTURE_2D,tex);
  gl.texImage2D(gl.TEXTURE_2D,0,gl.RGBA,w,h,0,gl.RGBA,gl.UNSIGNED_BYTE,null);
  gl.texParameteri(gl.TEXTURE_2D,gl.TEXTURE_MIN_FILTER,gl.NEAREST);
  gl.texParameteri(gl.TEXTURE_2D,gl.TEXTURE_WRAP_S,gl.CLAMP_TO_EDGE);
  gl.texParameteri(gl.TEXTURE_2D,gl.TEXTURE_WRAP_T,gl.CLAMP_TO_EDGE);
  const fbo=gl.createFramebuffer();
  gl.bindFramebuffer(gl.FRAMEBUFFER,fbo);
  gl.framebufferTexture2D(gl.FRAMEBUFFER,gl.COLOR_ATTACHMENT0,gl.TEXTURE_2D,tex,0);
  gl.bindFramebuffer(gl.FRAMEBUFFER,null);
  return{fbo,tex};
}
// Accumulation pipeline: render → FBO with fade, blit to screen
function mkAccum(gl,w,h){
  const{fbo,tex}=mkFBO(gl,w,h);
  const qb=mkBf(gl,new Float32Array([-1,-1,1,-1,-1,1,1,1]),gl.STATIC_DRAW);
  const fp=mkPg(gl,
    'attribute vec2 p;void main(){gl_Position=vec4(p,0,1);}',
    'precision mediump float;uniform float a;void main(){gl_FragColor=vec4(0,0,0,a);}');
  const bp=mkPg(gl,
    'attribute vec2 p;varying vec2 uv;void main(){uv=(p+1.0)*0.5;gl_Position=vec4(p,0,1);}',
    'precision mediump float;uniform sampler2D t;varying vec2 uv;void main(){gl_FragColor=texture2D(t,uv);}');
  const fpl=gl.getAttribLocation(fp,'p'),bpl=gl.getAttribLocation(bp,'p');
  const fau=gl.getUniformLocation(fp,'a'),btu=gl.getUniformLocation(bp,'t');
  gl.bindFramebuffer(gl.FRAMEBUFFER,fbo);gl.clearColor(0,0,0,1);gl.clear(gl.COLOR_BUFFER_BIT);gl.bindFramebuffer(gl.FRAMEBUFFER,null);
  return{
    bind(){gl.bindFramebuffer(gl.FRAMEBUFFER,fbo);gl.viewport(0,0,w,h);},
    fade(a){
      gl.enable(gl.BLEND);gl.blendFunc(gl.SRC_ALPHA,gl.ONE_MINUS_SRC_ALPHA);
      gl.useProgram(fp);gl.bindBuffer(gl.ARRAY_BUFFER,qb);
      gl.enableVertexAttribArray(fpl);gl.vertexAttribPointer(fpl,2,gl.FLOAT,false,0,0);
      gl.uniform1f(fau,a);gl.drawArrays(gl.TRIANGLE_STRIP,0,4);
    },
    blit(){
      gl.bindFramebuffer(gl.FRAMEBUFFER,null);gl.viewport(0,0,w,h);
      gl.disable(gl.BLEND);gl.useProgram(bp);gl.bindBuffer(gl.ARRAY_BUFFER,qb);
      gl.enableVertexAttribArray(bpl);gl.vertexAttribPointer(bpl,2,gl.FLOAT,false,0,0);
      gl.activeTexture(gl.TEXTURE0);gl.bindTexture(gl.TEXTURE_2D,tex);
      gl.uniform1i(btu,0);gl.drawArrays(gl.TRIANGLE_STRIP,0,4);
    }
  };
}
function pn(x,y,w,h){return[(x/w)*2-1,1-(y/h)*2];}

const HUE=[150,185,220,270,300,45,150];
function lhue(t){const n=HUE.length-1,i=Math.min(Math.floor(t*n),n-1),f=t*n-i;return HUE[i]+(HUE[i+1]-HUE[i])*f;}

// ══════════════════════════════════════════════════════════════════
// CIRCUIT BOARD BACKGROUND — WebGL
// ══════════════════════════════════════════════════════════════════
(function(){
  const canvas=document.getElementById('circuit-canvas');
  const gl=glx(canvas);if(!gl)return;
  let W,H,nodes=[],edges=[],pulses=[];
  let eBuf,eABuf,eCnt=0,nPosBuf,nAlBuf,nSzBuf,nCnt=0,puBuf,nPosD,nAlD;

  const linePg=mkPg(gl,
    'attribute vec2 p;attribute float a;varying float v;void main(){v=a;gl_Position=vec4(p,0,1);}',
    'precision mediump float;varying float v;void main(){gl_FragColor=vec4(0.,1.,.616,v);}');
  const ptPg=mkPg(gl,
    'attribute vec2 p;attribute float s;attribute float a;varying float v;void main(){v=a;gl_PointSize=s;gl_Position=vec4(p,0,1);}',
    'precision mediump float;varying float v;uniform vec3 col;void main(){vec2 c=gl_PointCoord-0.5;float d=length(c)*2.;if(d>1.)discard;gl_FragColor=vec4(col,v*(1.-d*.4));}');
  const lp=gl.getAttribLocation(linePg,'p'),la=gl.getAttribLocation(linePg,'a');
  const pp=gl.getAttribLocation(ptPg,'p'),ps=gl.getAttribLocation(ptPg,'s'),pa=gl.getAttribLocation(ptPg,'a');
  const ptCol=gl.getUniformLocation(ptPg,'col');

  function rn(a,b){return Math.random()*(b-a)+a;}
  function build(){
    nodes=[];edges=[];
    const co=Math.floor(W/80),ro=Math.floor(H/80);
    for(let r=0;r<=ro;r++)for(let c=0;c<=co;c++)
      if(Math.random()>0.38)nodes.push({x:c*80+rn(-14,14),y:r*80+rn(-14,14),act:Math.random()>0.72,sz:rn(1.5,4),ph:Math.random()*Math.PI*2});
    for(let i=0;i<nodes.length;i++){
      let k=0;
      for(let j=i+1;j<nodes.length&&k<3;j++){
        const dx=nodes[j].x-nodes[i].x,dy=nodes[j].y-nodes[i].y;
        if(Math.sqrt(dx*dx+dy*dy)<130&&Math.random()>0.45&&(Math.abs(dx)<20||Math.abs(dy)<20||Math.random()>0.6)){
          edges.push({a:i,b:j,al:rn(0.08,0.28)});k++;
        }
      }
    }
    // L-shaped edge geometry
    const ev=[],ea=[];
    for(const e of edges){
      const na=nodes[e.a],nb=nodes[e.b];
      const[ax,ay]=pn(na.x,na.y,W,H),[bx,by]=pn(nb.x,nb.y,W,H);
      const adx=Math.abs(nb.x-na.x),ady=Math.abs(nb.y-na.y);
      let segs;
      if(adx>ady){
        const mx=(na.x+nb.x)/2;
        const[m1x,m1y]=pn(mx,na.y,W,H),[m2x,m2y]=pn(mx,nb.y,W,H);
        segs=[[ax,ay,m1x,m1y],[m1x,m1y,m2x,m2y],[m2x,m2y,bx,by]];
      }else{
        const my=(na.y+nb.y)/2;
        const[m1x,m1y]=pn(na.x,my,W,H),[m2x,m2y]=pn(nb.x,my,W,H);
        segs=[[ax,ay,m1x,m1y],[m1x,m1y,m2x,m2y],[m2x,m2y,bx,by]];
      }
      for(const s of segs){ev.push(...s);ea.push(e.al,e.al);}
    }
    eCnt=ev.length/2;
    eBuf=mkBf(gl,new Float32Array(ev),gl.STATIC_DRAW);
    eABuf=mkBf(gl,new Float32Array(ea),gl.STATIC_DRAW);
    nCnt=nodes.length;
    nPosBuf=mkBf(gl,nCnt*2);nAlBuf=mkBf(gl,nCnt);nSzBuf=mkBf(gl,nCnt,gl.STATIC_DRAW);
    const szd=new Float32Array(nCnt);
    nodes.forEach((n,i)=>szd[i]=n.sz*2);
    upBf(gl,nSzBuf,szd);
    nPosD=new Float32Array(nCnt*2);nAlD=new Float32Array(nCnt);
    pulses=[];for(let i=0;i<14;i++)spP();
    puBuf=mkBf(gl,100*2);
  }
  function spP(){
    if(!edges.length)return;
    const e=edges[(Math.random()*edges.length)|0];
    pulses.push({e,t:0,sp:rn(0.01,0.028)});
  }
  function draw(){
    gl.viewport(0,0,W,H);
    gl.clearColor(0,0,0,0);gl.clear(gl.COLOR_BUFFER_BIT);
    gl.enable(gl.BLEND);gl.blendFunc(gl.SRC_ALPHA,gl.ONE_MINUS_SRC_ALPHA);
    // Edges
    gl.useProgram(linePg);
    enableAttr(gl,linePg,'p',2,eBuf);enableAttr(gl,linePg,'a',1,eABuf);
    gl.drawArrays(gl.LINES,0,eCnt);
    // Nodes — update phase each frame
    for(let i=0;i<nCnt;i++){
      nodes[i].ph+=0.045;
      const[nx,ny]=pn(nodes[i].x,nodes[i].y,W,H);
      nPosD[i*2]=nx;nPosD[i*2+1]=ny;
      nAlD[i]=nodes[i].act?(0.5+0.5*Math.sin(nodes[i].ph))*0.85:0.18;
    }
    upBf(gl,nPosBuf,nPosD);upBf(gl,nAlBuf,nAlD);
    gl.useProgram(ptPg);
    gl.uniform3f(ptCol,0,1,0.616);
    enableAttr(gl,ptPg,'p',2,nPosBuf);enableAttr(gl,ptPg,'s',1,nSzBuf);enableAttr(gl,ptPg,'a',1,nAlBuf);
    gl.drawArrays(gl.POINTS,0,nCnt);
    // Pulses — bright additive points
    const pd=[];
    for(let i=pulses.length-1;i>=0;i--){
      const p=pulses[i];p.t+=p.sp;
      if(p.t>=1){pulses.splice(i,1);if(Math.random()>0.2)spP();continue;}
      const na=nodes[p.e.a],nb=nodes[p.e.b];
      pd.push(...pn(na.x+(nb.x-na.x)*p.t,na.y+(nb.y-na.y)*p.t,W,H));
    }
    if(pd.length){
      const cnt=pd.length/2;
      upBf(gl,puBuf,new Float32Array(pd));
      gl.bindBuffer(gl.ARRAY_BUFFER,puBuf);
      gl.enableVertexAttribArray(pp);gl.vertexAttribPointer(pp,2,gl.FLOAT,false,0,0);
      gl.disableVertexAttribArray(ps);gl.vertexAttrib1f(ps,9);
      gl.disableVertexAttribArray(pa);gl.vertexAttrib1f(pa,1);
      gl.blendFunc(gl.SRC_ALPHA,gl.ONE);
      gl.uniform3f(ptCol,0,1,0.616);
      gl.drawArrays(gl.POINTS,0,cnt);
      gl.enableVertexAttribArray(ps);gl.enableVertexAttribArray(pa);
    }
    requestAnimationFrame(draw);
  }
  function resize(){W=canvas.width=window.innerWidth;H=canvas.height=window.innerHeight;gl.viewport(0,0,W,H);build();}
  window.addEventListener('resize',resize);resize();draw();
})();

// ══════════════════════════════════════════════════════════════════
// RIFT — WebGL terrain contours
// ══════════════════════════════════════════════════════════════════
(function(){
  var _el = document.getElementById('rift-canvas');
  if(!_el) return;
  var _io = new IntersectionObserver(function(entries){
    if(!entries[0].isIntersecting) return;
    _io.disconnect();
    (function(){
  const canvas=document.getElementById('rift-canvas');
  const gl=glx(canvas);if(!gl)return;
  const W=300,H=300;gl.viewport(0,0,W,H);
  const prog=mkPg(gl,
    'attribute vec2 p;uniform float sz;void main(){gl_PointSize=sz;gl_Position=vec4(p,0,1);}',
    'precision mediump float;uniform vec4 c;void main(){gl_FragColor=c;}');
  const cU=gl.getUniformLocation(prog,'c'),szU=gl.getUniformLocation(prog,'sz');
  const pL=gl.getAttribLocation(prog,'p');
  const STEPS=100,pts=new Float32Array((STEPS+1)*2);
  const ptBuf=mkBf(gl,(STEPS+1)*2);
  gl.useProgram(prog);gl.enableVertexAttribArray(pL);
  gl.uniform1f(szU,2);

  const layers=[
    {t:0,    by:0.20,amp:0.12,r:0,  g:1,   b:0.616,a:0.25},
    {t:0.18, by:0.27,amp:0.14,r:0,  g:1,   b:0.616,a:0.32},
    {t:0.36, by:0.35,amp:0.15,r:0,  g:0.8, b:1,    a:0.38},
    {t:0.54, by:0.44,amp:0.16,r:0,  g:1,   b:0.616,a:0.46},
    {t:0.72, by:0.53,amp:0.17,r:0,  g:0.8, b:1,    a:0.52},
    {t:0.90, by:0.63,amp:0.17,r:0,  g:1,   b:0.616,a:0.60},
    {t:1.08, by:0.74,amp:0.15,r:1,  g:0.88,b:0,    a:0.47},
  ];
  function noise(x,t){
    return Math.sin(x*.045+t*7)*.38+Math.sin(x*.09+t*4.5+1.2)*.25+
           Math.sin(x*.022-t*2.8+2.5)*.22+Math.sin(x*.18+t*9+.7)*.10+
           Math.sin(x*.007+t*1.4+4.1)*.05;
  }
  let rt=0;
  let _raf;
  function draw(){
    rt+=0.014;
    gl.clearColor(0,0,0,1);gl.clear(gl.COLOR_BUFFER_BIT);
    gl.enable(gl.BLEND);gl.blendFunc(gl.SRC_ALPHA,gl.ONE);
    gl.bindBuffer(gl.ARRAY_BUFFER,ptBuf);
    gl.vertexAttribPointer(pL,2,gl.FLOAT,false,0,0);
    for(let li=0;li<layers.length;li++){
      const L=layers[li],to=rt+L.t;
      for(let i=0;i<=STEPS;i++){
        const xn=i/STEPS,n=noise(xn*300,to),yn=L.by+n*L.amp;
        pts[i*2]=xn*2-1;pts[i*2+1]=1-yn*2;
      }
      gl.bufferSubData(gl.ARRAY_BUFFER,0,pts);
      // Multi-pass additive glow
      gl.uniform4f(cU,L.r,L.g,L.b,L.a*0.2);gl.drawArrays(gl.LINE_STRIP,0,STEPS+1);
      gl.uniform4f(cU,L.r,L.g,L.b,L.a*0.5);gl.drawArrays(gl.LINE_STRIP,0,STEPS+1);
      gl.uniform4f(cU,L.r,L.g,L.b,L.a);    gl.drawArrays(gl.LINE_STRIP,0,STEPS+1);
    }
    // Summit dot — track peak of top layer
    const tL=layers[6],to=rt+tL.t;
    let py=0,px=-1;
    for(let i=0;i<=STEPS;i++){
      const xn=i/STEPS,yn=tL.by+noise(xn*300,to)*tL.amp,ndy=1-yn*2;
      if(ndy>py||i===0){py=ndy;px=xn*2-1;}
    }
    const pulse=0.6+0.4*Math.sin(rt*2.2);
    const sp=new Float32Array([px,py]);
    gl.bufferSubData(gl.ARRAY_BUFFER,0,sp);
    gl.uniform1f(szU,20*pulse);gl.uniform4f(cU,1,.88,0,.15*pulse);gl.drawArrays(gl.POINTS,0,1);
    gl.uniform1f(szU,8);gl.uniform4f(cU,1,.88,0,.6*pulse);gl.drawArrays(gl.POINTS,0,1);
    gl.uniform1f(szU,3);gl.uniform4f(cU,1,1,1,.95);gl.drawArrays(gl.POINTS,0,1);
    gl.uniform1f(szU,2);
    _raf = requestAnimationFrame(draw);
  }
  draw();


  // Stop RAF when card leaves viewport
  new IntersectionObserver(function(entries){
    if(!entries[0].isIntersecting) { cancelAnimationFrame(_raf); _raf = null; }
    else if(!_raf) { _raf = requestAnimationFrame(draw); }
  }, { rootMargin: '150px' }).observe(document.getElementById('rift-canvas'));
})();
  }, { rootMargin: '150px' });
  _io.observe(_el);
})();

// ══════════════════════════════════════════════════════════════════
// PRISM — WebGL spectral diffraction
// ══════════════════════════════════════════════════════════════════
(function(){
  var _el = document.getElementById('prism-canvas');
  if(!_el) return;
  var _io = new IntersectionObserver(function(entries){
    if(!entries[0].isIntersecting) return;
    _io.disconnect();
    (function(){
  const canvas=document.getElementById('prism-canvas');
  const gl=glx(canvas);if(!gl)return;
  const W=300,H=300;gl.viewport(0,0,W,H);
  const prog=mkPg(gl,
    'attribute vec2 p;uniform float sz;void main(){gl_PointSize=sz;gl_Position=vec4(p,0,1);}',
    'precision mediump float;uniform vec4 c;uniform int ispt;void main(){if(ispt==1){vec2 cc=gl_PointCoord-0.5;if(length(cc)*2.>1.)discard;}gl_FragColor=c;}');
  const cU=gl.getUniformLocation(prog,'c'),szU=gl.getUniformLocation(prog,'sz'),ptU=gl.getUniformLocation(prog,'ispt');
  const pL=gl.getAttribLocation(prog,'p');
  const vBuf=mkBf(gl,20*2),pBuf2=mkBf(gl,2);
  gl.useProgram(prog);gl.enableVertexAttribArray(pL);gl.uniform1i(ptU,0);gl.uniform1f(szU,2);

  function hue2rgb(h){
    const s=1,v=0.9,c2=v*s,x=c2*(1-Math.abs((h/60)%2-1)),m=v-c2;
    let r=0,g=0,b=0;
    if(h<60){r=c2;g=x;}else if(h<120){r=x;g=c2;}else if(h<180){g=c2;b=x;}
    else if(h<240){g=x;b=c2;}else if(h<300){r=x;b=c2;}else{r=c2;b=x;}
    return[r+m,g+m,b+m];
  }
  const spectrum=[0,28,55,120,190,220,280];
  const CX=150,CY=150;const SPREAD=Math.PI/2;
  let pt=0;
  let _raf;
  function draw(){
    pt+=0.009;
    gl.clearColor(0,0,0,1);gl.clear(gl.COLOR_BUFFER_BIT);
    gl.enable(gl.BLEND);gl.blendFunc(gl.SRC_ALPHA,gl.ONE);
    gl.uniform1i(ptU,0);
    const beamY=CY+Math.sin(pt*2.2)*18;
    const pTx=CX-30,pBx=CX+10,pTy=beamY;
    // Incoming beam
    upBf(gl,vBuf,new Float32Array([...pn(0,beamY,W,H),...pn(pTx,pTy,W,H)]));
    gl.bindBuffer(gl.ARRAY_BUFFER,vBuf);gl.vertexAttribPointer(pL,2,gl.FLOAT,false,0,0);
    gl.uniform4f(cU,1,1,1,0.35);gl.drawArrays(gl.LINES,0,2);
    // Prism outline
    const tv=new Float32Array([...pn(pTx,pTy,W,H),...pn(pBx,CY+50,W,H),
      ...pn(pBx,CY+50,W,H),...pn(pBx,CY-50,W,H),...pn(pBx,CY-50,W,H),...pn(pTx,pTy,W,H)]);
    upBf(gl,vBuf,tv);
    gl.vertexAttribPointer(pL,2,gl.FLOAT,false,0,0);
    gl.uniform4f(cU,0,0.8,1,0.28);gl.drawArrays(gl.LINES,0,6);
    // Spectral rays
    const baseAng=-SPREAD/2;
    for(let i=0;i<spectrum.length;i++){
      const ang=baseAng+(SPREAD/(spectrum.length-1))*i;
      const breathe=1+0.08*Math.sin(pt*4+i*0.3);
      const len=140*breathe;
      const ex=pBx+Math.cos(ang)*len,ey=(CY-50)+Math.sin(ang)*len;
      const alpha=0.55+0.25*Math.sin(pt*5.5+i*0.5);
      const[r,g,b]=hue2rgb(spectrum[i]);
      const rv=new Float32Array([...pn(pBx,CY-50,W,H),...pn(ex,ey,W,H)]);
      upBf(gl,vBuf,rv);gl.vertexAttribPointer(pL,2,gl.FLOAT,false,0,0);
      gl.uniform4f(cU,r,g,b,alpha*0.45);gl.drawArrays(gl.LINES,0,2);
      gl.uniform4f(cU,r,g,b,alpha);gl.drawArrays(gl.LINES,0,2);
      // Tip dot
      upBf(gl,pBuf2,new Float32Array([...pn(ex,ey,W,H)]));
      gl.bindBuffer(gl.ARRAY_BUFFER,pBuf2);gl.vertexAttribPointer(pL,2,gl.FLOAT,false,0,0);
      gl.uniform1i(ptU,1);gl.uniform1f(szU,5);
      gl.uniform4f(cU,r,g,b,alpha*0.9);gl.drawArrays(gl.POINTS,0,1);
      gl.uniform1i(ptU,0);gl.uniform1f(szU,2);
    }
    // Refraction flash at prism apex
    const flash=0.5+0.5*Math.sin(pt*9);
    upBf(gl,pBuf2,new Float32Array([...pn(pBx,CY-50,W,H)]));
    gl.bindBuffer(gl.ARRAY_BUFFER,pBuf2);gl.vertexAttribPointer(pL,2,gl.FLOAT,false,0,0);
    gl.uniform1i(ptU,1);gl.uniform1f(szU,14*flash);
    gl.uniform4f(cU,1,1,1,0.4*flash);gl.drawArrays(gl.POINTS,0,1);
    gl.uniform1i(ptU,0);gl.uniform1f(szU,2);
    _raf = requestAnimationFrame(draw);
  }
  draw();


  // Stop RAF when card leaves viewport
  new IntersectionObserver(function(entries){
    if(!entries[0].isIntersecting) { cancelAnimationFrame(_raf); _raf = null; }
    else if(!_raf) { _raf = requestAnimationFrame(draw); }
  }, { rootMargin: '150px' }).observe(document.getElementById('prism-canvas'));
})();
  }, { rootMargin: '150px' });
  _io.observe(_el);
})();

// ══════════════════════════════════════════════════════════════════
// VORTEX — WebGL particle attractor with FBO trail
// ══════════════════════════════════════════════════════════════════
(function(){
  var _el = document.getElementById('vortex-canvas');
  if(!_el) return;
  var _io = new IntersectionObserver(function(entries){
    if(!entries[0].isIntersecting) return;
    _io.disconnect();
    (function(){
  const canvas=document.getElementById('vortex-canvas');
  const gl=glx(canvas);if(!gl)return;
  const W=300,H=300;gl.viewport(0,0,W,H);
  const acc=mkAccum(gl,W,H);
  const prog=mkPg(gl,
    'attribute vec2 p;attribute float s;attribute float a;varying float v;void main(){v=a;gl_PointSize=s;gl_Position=vec4(p,0,1);}',
    'precision mediump float;varying float v;uniform vec3 col;void main(){vec2 c=gl_PointCoord-0.5;float d=length(c)*2.;if(d>1.)discard;float a=(1.-d*d)*v;gl_FragColor=vec4(col,a);}');
  const pL=gl.getAttribLocation(prog,'p'),sL=gl.getAttribLocation(prog,'s'),aL=gl.getAttribLocation(prog,'a');
  const colU=gl.getUniformLocation(prog,'col');
  const N=180;
  const pBuf=mkBf(gl,N*2),sBuf=mkBf(gl,N),aBuf=mkBf(gl,N);
  const pArr=new Float32Array(N*2),sArr=new Float32Array(N),aArr=new Float32Array(N);
  const particles=[];
  for(let i=0;i<N;i++){
    const ang=Math.random()*Math.PI*2,r=60+Math.random()*80;
    particles.push({x:150+Math.cos(ang)*r,y:150+Math.sin(ang)*r,vx:0,vy:0,
      life:Math.random(),speed:0.18+Math.random()*0.22,hue:160+Math.random()*80});
  }
  function vField(x,y,t){
    const cx=150,cy=150,dx=x-cx,dy=y-cy,dist=Math.sqrt(dx*dx+dy*dy)+.001;
    const rot=2.2/(dist*.04+1);
    let fx=-dy*rot*0.045,fy=dx*rot*0.045;
    fx-=dx*0.022;fy-=dy*0.022;
    const lx=cx+Math.cos(t*1.4)*40,ly=cy+Math.sin(t*1.4)*40;
    const ldx=x-lx,ldy=y-ly,ld=Math.sqrt(ldx*ldx+ldy*ldy)+.001;
    const lobe=0.6/(ld*.05+1);
    fx+=-ldy*lobe*0.038;fy+=ldx*lobe*0.038;
    return{fx,fy};
  }
  let vt=0;
  let _raf;
  function draw(){
    vt+=0.007;
    acc.bind();
    acc.fade(0.09);
    gl.enable(gl.BLEND);gl.blendFunc(gl.SRC_ALPHA,gl.ONE);
    gl.useProgram(prog);
    for(let i=0;i<N;i++){
      const p=particles[i];
      const{fx,fy}=vField(p.x,p.y,vt);
      p.vx=p.vx*.92+fx*p.speed;p.vy=p.vy*.92+fy*p.speed;
      p.x+=p.vx;p.y+=p.vy;p.life+=0.003;
      if(p.x<-10||p.x>310||p.y<-10||p.y>310||p.life>1){
        const ang=Math.random()*Math.PI*2,r=60+Math.random()*80;
        p.x=150+Math.cos(ang)*r;p.y=150+Math.sin(ang)*r;p.vx=0;p.vy=0;p.life=0;p.hue=160+Math.random()*80;
      }
      const[nx,ny]=pn(p.x,p.y,W,H);
      pArr[i*2]=nx;pArr[i*2+1]=ny;
      const dist2=Math.sqrt((p.x-150)**2+(p.y-150)**2);
      sArr[i]=1.8+(1-dist2/160)*1.8;
      aArr[i]=Math.max(0,(0.4+0.5*(1-dist2/150))*(1-p.life*.6));
      const[r2,g2,b2]=hslToRgb3(p.hue);
      // draw individually for per-particle color
      upBf(gl,pBuf,new Float32Array([nx,ny]));
      upBf(gl,sBuf,new Float32Array([sArr[i]]));
      upBf(gl,aBuf,new Float32Array([aArr[i]]));
      enableAttr(gl,prog,'p',2,pBuf);enableAttr(gl,prog,'s',1,sBuf);enableAttr(gl,prog,'a',1,aBuf);
      gl.uniform3f(colU,r2,g2,b2);
      gl.drawArrays(gl.POINTS,0,1);
    }
    // Core glow
    const corePulse=0.6+0.4*Math.sin(vt*14);
    const[cx,cy]=pn(150,150,W,H);
    for(const[sz,alpha,r,g,b] of [[40*corePulse,.35*corePulse,0,1,.616],[16*corePulse,.7*corePulse,0,.9,1],[6,.9,1,1,1]]){
      upBf(gl,pBuf,new Float32Array([cx,cy]));
      upBf(gl,sBuf,new Float32Array([sz]));
      upBf(gl,aBuf,new Float32Array([alpha]));
      enableAttr(gl,prog,'p',2,pBuf);enableAttr(gl,prog,'s',1,sBuf);enableAttr(gl,prog,'a',1,aBuf);
      gl.uniform3f(colU,r,g,b);gl.drawArrays(gl.POINTS,0,1);
    }
    acc.blit();
    _raf = requestAnimationFrame(draw);
  }
  draw();


  // Stop RAF when card leaves viewport
  new IntersectionObserver(function(entries){
    if(!entries[0].isIntersecting) { cancelAnimationFrame(_raf); _raf = null; }
    else if(!_raf) { _raf = requestAnimationFrame(draw); }
  }, { rootMargin: '150px' }).observe(document.getElementById('vortex-canvas'));
})();
  }, { rootMargin: '150px' });
  _io.observe(_el);
})();

function hslToRgb3(h){
  const s=1,l=0.65,c=(1-Math.abs(2*l-1))*s,x=c*(1-Math.abs((h/60)%2-1)),m=l-c/2;
  let r=0,g=0,b=0;
  if(h<60){r=c;g=x;}else if(h<120){r=x;g=c;}else if(h<180){g=c;b=x;}
  else if(h<240){g=x;b=c;}else if(h<300){r=x;b=c;}else{r=c;b=x;}
  return[r+m,g+m,b+m];
}

// ══════════════════════════════════════════════════════════════════
// SIGIL — WebGL orbiting nodes with FBO trail
// ══════════════════════════════════════════════════════════════════
(function(){
  var _el = document.getElementById('sigil-canvas');
  if(!_el) return;
  var _io = new IntersectionObserver(function(entries){
    if(!entries[0].isIntersecting) return;
    _io.disconnect();
    (function(){
  const canvas=document.getElementById('sigil-canvas');
  const gl=glx(canvas);if(!gl)return;
  const W=300,H=300;gl.viewport(0,0,W,H);
  const acc=mkAccum(gl,W,H);
  const linePg=mkPg(gl,
    'attribute vec2 p;void main(){gl_Position=vec4(p,0,1);}',
    'precision mediump float;uniform vec4 c;void main(){gl_FragColor=c;}');
  const ptPg=mkPg(gl,
    'attribute vec2 p;uniform float sz;void main(){gl_PointSize=sz;gl_Position=vec4(p,0,1);}',
    'precision mediump float;uniform vec4 c;void main(){vec2 cc=gl_PointCoord-0.5;float d=length(cc)*2.;if(d>1.)discard;gl_FragColor=vec4(c.rgb,c.a*(1.-d*.5));}');
  const lcU=gl.getUniformLocation(linePg,'c'),pcU=gl.getUniformLocation(ptPg,'c'),pszU=gl.getUniformLocation(ptPg,'sz');
  const lp=gl.getAttribLocation(linePg,'p'),pp=gl.getAttribLocation(ptPg,'p');
  const vBuf=mkBf(gl,400),ptBuf2=mkBf(gl,2);
  const CX=150,CY=150;
  const rings=[
    {r:110,cnt:3, spd: 0.055,ph:0,           cr:[1,.88,0],   nr:3.5},
    {r: 88,cnt:6, spd:-0.085,ph:Math.PI/6,   cr:[0,1,.616],  nr:2.8},
    {r: 64,cnt:4, spd: 0.130,ph:Math.PI/4,   cr:[0,.8,1],    nr:2.5},
    {r: 40,cnt:8, spd:-0.200,ph:0,           cr:[0,1,.616],  nr:2.0},
    {r: 20,cnt:3, spd: 0.320,ph:Math.PI/3,   cr:[1,.88,0],   nr:1.8},
  ];
  function getNodes(ring,t){
    const pts=[];
    for(let i=0;i<ring.cnt;i++){
      const a=ring.ph+(i/ring.cnt)*Math.PI*2+t*ring.spd;
      pts.push({x:CX+Math.cos(a)*ring.r,y:CY+Math.sin(a)*ring.r});
    }
    return pts;
  }
  let st=0;
  let _raf;
  function draw(){
    st+=0.10;
    const breath=0.5+0.5*Math.sin(st*0.55);
    acc.bind();
    acc.fade(0.12);
    gl.enable(gl.BLEND);gl.blendFunc(gl.SRC_ALPHA,gl.ONE);
    // Draw ring guide arcs (faint tick ring)
    gl.useProgram(ptPg);
    gl.uniform1f(pszU,2);
    const tickV=[];
    for(let i=0;i<36;i++){
      const a=(i/36)*Math.PI*2+st*0.18;
      const inn=i%6===0?120:124,out=128;
      const[x1,y1]=pn(CX+Math.cos(a)*inn,CY+Math.sin(a)*inn,W,H);
      const[x2,y2]=pn(CX+Math.cos(a)*out,CY+Math.sin(a)*out,W,H);
      tickV.push(x1,y1,x2,y2);
    }
    gl.useProgram(linePg);
    upBf(gl,vBuf,new Float32Array(tickV));
    enableAttr(gl,linePg,'p',2,vBuf);
    gl.uniform4f(lcU,.5,.8,.5,0.18+0.05*breath);
    gl.drawArrays(gl.LINES,0,tickV.length/2);
    // Compute all ring node positions
    const allNodes=rings.map(r=>getNodes(r,st));
    // Draw inter-ring connection lines
    const linePairs=[[0,1],[1,2],[2,3],[3,4]];
    const lineColors=[[0,1,.616],[0,.8,1],[0,1,.616],[1,.88,0]];
    const lineAlphas=[0.10+0.06*breath,0.14+0.07*breath,0.18+0.08*breath,0.22+0.10*breath];
    for(let pi=0;pi<linePairs.length;pi++){
      const[ra,rb]=linePairs[pi];
      const nodesA=allNodes[ra],nodesB=allNodes[rb];
      const lv=[];
      nodesA.forEach(a=>nodesB.forEach(b=>{lv.push(...pn(a.x,a.y,W,H),...pn(b.x,b.y,W,H));}));
      upBf(gl,vBuf,new Float32Array(lv));
      enableAttr(gl,linePg,'p',2,vBuf);
      gl.uniform4f(lcU,...lineColors[pi],lineAlphas[pi]);
      gl.drawArrays(gl.LINES,0,lv.length/2);
    }
    // Draw ring polygon outlines
    allNodes.forEach((ns,ri)=>{
      const rc=rings[ri].cr;
      const rv=[];
      for(let i=0;i<ns.length;i++){
        const a=ns[i],b=ns[(i+1)%ns.length];
        rv.push(...pn(a.x,a.y,W,H),...pn(b.x,b.y,W,H));
      }
      upBf(gl,vBuf,new Float32Array(rv));
      enableAttr(gl,linePg,'p',2,vBuf);
      gl.uniform4f(lcU,...rc,0.40+0.15*breath);
      gl.drawArrays(gl.LINES,0,rv.length/2);
    });
    // Draw nodes as glowing dots
    gl.useProgram(ptPg);
    allNodes.forEach((ns,ri)=>{
      const[r,g,b]=rings[ri].cr;const nr=rings[ri].nr;
      ns.forEach(n=>{
        const[nx,ny]=pn(n.x,n.y,W,H);
        upBf(gl,ptBuf2,new Float32Array([nx,ny]));
        enableAttr(gl,ptPg,'p',2,ptBuf2);
        gl.uniform1f(pszU,nr*7);gl.uniform4f(pcU,r,g,b,0.10+0.08*breath);gl.drawArrays(gl.POINTS,0,1);
        gl.uniform1f(pszU,nr*2);gl.uniform4f(pcU,r,g,b,0.9);gl.drawArrays(gl.POINTS,0,1);
        gl.uniform1f(pszU,nr*0.8);gl.uniform4f(pcU,1,1,1,0.95);gl.drawArrays(gl.POINTS,0,1);
      });
    });
    // Centre core
    const[cx2,cy2]=pn(CX,CY,W,H);
    upBf(gl,ptBuf2,new Float32Array([cx2,cy2]));
    enableAttr(gl,ptPg,'p',2,ptBuf2);
    const coreR=5+3*breath;
    gl.uniform1f(pszU,coreR*8);gl.uniform4f(pcU,0,1,.616,(.4+.3*breath));gl.drawArrays(gl.POINTS,0,1);
    gl.uniform1f(pszU,coreR*2);gl.uniform4f(pcU,0,1,.616,0.9);gl.drawArrays(gl.POINTS,0,1);
    gl.uniform1f(pszU,4);gl.uniform4f(pcU,1,1,1,1);gl.drawArrays(gl.POINTS,0,1);
    acc.blit();
    _raf = requestAnimationFrame(draw);
  }
  draw();


  // Stop RAF when card leaves viewport
  new IntersectionObserver(function(entries){
    if(!entries[0].isIntersecting) { cancelAnimationFrame(_raf); _raf = null; }
    else if(!_raf) { _raf = requestAnimationFrame(draw); }
  }, { rootMargin: '150px' }).observe(document.getElementById('sigil-canvas'));
})();
  }, { rootMargin: '150px' });
  _io.observe(_el);
})();

// ══════════════════════════════════════════════════════════════════
// NEBULA — WebGL cosmic gas cloud with FBO accumulation
// ══════════════════════════════════════════════════════════════════
(function(){
  var _el = document.getElementById('nebula-canvas');
  if(!_el) return;
  var _io = new IntersectionObserver(function(entries){
    if(!entries[0].isIntersecting) return;
    _io.disconnect();
    (function(){
  const canvas=document.getElementById('nebula-canvas');
  const gl=glx(canvas);if(!gl)return;
  const W=300,H=300;gl.viewport(0,0,W,H);
  const acc=mkAccum(gl,W,H);
  const prog=mkPg(gl,
    'attribute vec2 p;attribute float s;attribute float a;varying float v;void main(){v=a;gl_PointSize=s;gl_Position=vec4(p,0,1);}',
    'precision mediump float;varying float v;uniform vec3 col;void main(){vec2 c=gl_PointCoord-0.5;float d=length(c)*2.;if(d>1.)discard;float a=(1.-d*d)*(1.-d*d)*v;gl_FragColor=vec4(col,a);}');
  const pL=gl.getAttribLocation(prog,'p'),sL=gl.getAttribLocation(prog,'s'),aL=gl.getAttribLocation(prog,'a');
  const colU=gl.getUniformLocation(prog,'col');
  const pBuf=mkBf(gl,2),sBuf=mkBf(gl,1),aBuf=mkBf(gl,1);
  // Gas particles
  const G=260;
  const gas=[];
  for(let i=0;i<G;i++){
    const lobe=i%3;
    const lcx=lobe===0?100:lobe===1?200:150,lcy=lobe===0?120:lobe===1?160:200;
    const ang=Math.random()*Math.PI*2,dist=Math.random()*80;
    gas.push({x:lcx+Math.cos(ang)*dist,y:lcy+Math.sin(ang)*dist,
      vx:(Math.random()-.5)*.12,vy:(Math.random()-.5)*.08,
      r:8+Math.random()*28,
      hue:[270,190,300][lobe]+(Math.random()-.5)*40,
      al:0.015+Math.random()*0.03,ph:Math.random()*Math.PI*2,pspd:0.005+Math.random()*.01});
  }
  // Stars
  const stars=[];
  for(let i=0;i<80;i++) stars.push({x:Math.random()*300,y:Math.random()*300,r:Math.random()*1.2,br:0.3+Math.random()*.7,tw:Math.random()*Math.PI*2,sp:0.008+Math.random()*.016});
  let nt=0;
  let _raf;
  function drawFrame(){
    nt+=0.7;
    acc.bind();
    // Very slow fade for deep accumulation
    acc.fade(0.06);
    gl.enable(gl.BLEND);gl.blendFunc(gl.SRC_ALPHA,gl.ONE);
    gl.useProgram(prog);
    // Stars
    for(const s of stars){
      s.tw+=s.sp;
      const[nx,ny]=pn(s.x,s.y,W,H);
      const alpha=s.br*(0.5+0.5*Math.sin(s.tw));
      upBf(gl,pBuf,new Float32Array([nx,ny]));
      upBf(gl,sBuf,new Float32Array([s.r*4+2]));
      upBf(gl,aBuf,new Float32Array([alpha]));
      enableAttr(gl,prog,'p',2,pBuf);enableAttr(gl,prog,'s',1,sBuf);enableAttr(gl,prog,'a',1,aBuf);
      gl.uniform3f(colU,1,1,1);gl.drawArrays(gl.POINTS,0,1);
    }
    // Gas blobs
    for(const g of gas){
      g.ph+=g.pspd;
      g.x+=g.vx*3.5+Math.sin(nt*.4+g.ph)*.22;
      g.y+=g.vy*3.5+Math.cos(nt*.3+g.ph)*.18;
      if(g.x<-g.r)g.x=W+g.r;if(g.x>W+g.r)g.x=-g.r;
      if(g.y<-g.r)g.y=H+g.r;if(g.y>H+g.r)g.y=-g.r;
      const alpha=g.al*(0.7+0.3*Math.sin(g.ph));
      const[nx,ny]=pn(g.x,g.y,W,H);
      const[r2,g2,b2]=hslToRgb3(g.hue);
      upBf(gl,pBuf,new Float32Array([nx,ny]));
      upBf(gl,sBuf,new Float32Array([g.r*2]));
      upBf(gl,aBuf,new Float32Array([alpha*3]));
      enableAttr(gl,prog,'p',2,pBuf);enableAttr(gl,prog,'s',1,sBuf);enableAttr(gl,prog,'a',1,aBuf);
      gl.uniform3f(colU,r2,g2,b2);gl.drawArrays(gl.POINTS,0,1);
    }
    // Core star
    const cp=0.6+0.4*Math.sin(nt*.22);
    const cx2=150+Math.sin(nt*.065)*12,cy2=145+Math.cos(nt*.05)*10;
    const[cnx,cny]=pn(cx2,cy2,W,H);
    for(const[sz,al,r2,g2,b2] of [[60*cp,.15*cp,0.5,0.7,1],[20*cp,.5*cp,.8,.9,1],[6,.9,1,1,1]]){
      upBf(gl,pBuf,new Float32Array([cnx,cny]));
      upBf(gl,sBuf,new Float32Array([sz]));
      upBf(gl,aBuf,new Float32Array([al]));
      enableAttr(gl,prog,'p',2,pBuf);enableAttr(gl,prog,'s',1,sBuf);enableAttr(gl,prog,'a',1,aBuf);
      gl.uniform3f(colU,r2,g2,b2);gl.drawArrays(gl.POINTS,0,1);
    }
    // Diffraction spikes (lines)
    acc.blit();
    _raf = requestAnimationFrame(drawFrame);
  }
  // Pre-seed
  for(let i=0;i<30;i++){
    acc.bind();acc.fade(0.06);
    gl.enable(gl.BLEND);gl.blendFunc(gl.SRC_ALPHA,gl.ONE);
    gl.useProgram(prog);
    for(const g of gas){
      const[nx,ny]=pn(g.x,g.y,W,H);
      const[r2,g2,b2]=hslToRgb3(g.hue);
      upBf(gl,pBuf,new Float32Array([nx,ny]));
      upBf(gl,sBuf,new Float32Array([g.r*2]));
      upBf(gl,aBuf,new Float32Array([g.al*3]));
      enableAttr(gl,prog,'p',2,pBuf);enableAttr(gl,prog,'s',1,sBuf);enableAttr(gl,prog,'a',1,aBuf);
      gl.uniform3f(colU,r2,g2,b2);gl.drawArrays(gl.POINTS,0,1);
    }
    acc.blit();
  }
  drawFrame();


  // Stop RAF when card leaves viewport
  new IntersectionObserver(function(entries){
    if(!entries[0].isIntersecting) { cancelAnimationFrame(_raf); _raf = null; }
    else if(!_raf) { _raf = requestAnimationFrame(drawFrame); }
  }, { rootMargin: '150px' }).observe(document.getElementById('nebula-canvas'));
})();
  }, { rootMargin: '150px' });
  _io.observe(_el);
})();

// ══════════════════════════════════════════════════════════════════
// STRANGE — WebGL Lorenz attractor with FBO accumulation
// ══════════════════════════════════════════════════════════════════
(function(){
  var _el = document.getElementById('strange-canvas');
  if(!_el) return;
  var _io = new IntersectionObserver(function(entries){
    if(!entries[0].isIntersecting) return;
    _io.disconnect();
    (function(){
  const canvas=document.getElementById('strange-canvas');
  const gl=glx(canvas);if(!gl)return;
  const W=300,H=300;gl.viewport(0,0,W,H);
  const acc=mkAccum(gl,W,H);

  const prog=mkPg(gl,
    'attribute vec2 p;void main(){gl_PointSize=1.8;gl_Position=vec4(p,0,1);}',
    'precision mediump float;uniform vec4 c;void main(){gl_FragColor=c;}');
  const pL=gl.getAttribLocation(prog,'p'),cU=gl.getUniformLocation(prog,'c');

  const ITER=4000;
  const ptArr=new Float32Array(ITER*2);
  // Allocate buffer for max possible points
  const ptBuf=gl.createBuffer();
  gl.bindBuffer(gl.ARRAY_BUFFER,ptBuf);
  gl.bufferData(gl.ARRAY_BUFFER,ITER*2*4,gl.DYNAMIC_DRAW);

  const sigma=10,rho=28,beta=8/3,dt=0.006;
  let lx=0.1,ly=1.0,lz=1.05;
  // Warm up — land on the attractor
  for(let i=0;i<5000;i++){
    const dx=sigma*(ly-lx),dy=lx*(rho-lz)-ly,dz=lx*ly-beta*lz;
    lx+=dx*dt;ly+=dy*dt;lz+=dz*dt;
  }

  const X_MIN=-22,X_MAX=22,Z_MIN=2,Z_MAX=48,PAD=16;
  const XR=X_MAX-X_MIN,ZR=Z_MAX-Z_MIN,PW=W-PAD*2,PH=H-PAD*2;
  function toNDC(x,z){
    const sx=PAD+(x-X_MIN)/XR*PW;
    const sy=PAD+(Z_MAX-z)/ZR*PH;
    return[(sx/W)*2-1, 1-(sy/H)*2];
  }

  let hueT=0;
  let _raf;
  function draw(){
    hueT=(hueT+0.00022)%1;
    const h=lhue(hueT);
    const[r,g,b]=hslToRgb3(h);

    acc.bind();
    acc.fade(0.015);
    gl.enable(gl.BLEND);
    gl.blendFunc(gl.SRC_ALPHA,gl.ONE);
    gl.useProgram(prog);

    // Iterate and collect valid screen points
    let cnt=0;
    for(let i=0;i<ITER;i++){
      const dx=sigma*(ly-lx),dy=lx*(rho-lz)-ly,dz=lx*ly-beta*lz;
      lx+=dx*dt;ly+=dy*dt;lz+=dz*dt;
      const[nx,ny]=toNDC(lx,lz);
      if(nx>=-1&&nx<=1&&ny>=-1&&ny<=1){
        ptArr[cnt*2]=nx;
        ptArr[cnt*2+1]=ny;
        cnt++;
      }
    }

    if(cnt>0){
      gl.bindBuffer(gl.ARRAY_BUFFER,ptBuf);
      // Only upload the valid slice
      gl.bufferSubData(gl.ARRAY_BUFFER,0,ptArr.subarray(0,cnt*2));
      gl.enableVertexAttribArray(pL);
      gl.vertexAttribPointer(pL,2,gl.FLOAT,false,0,0);
      gl.uniform4f(cU,r,g,b,0.022);
      gl.drawArrays(gl.POINTS,0,cnt);
    }

    acc.blit();
    _raf = requestAnimationFrame(draw);
  }
  draw();


  // Stop RAF when card leaves viewport
  new IntersectionObserver(function(entries){
    if(!entries[0].isIntersecting) { cancelAnimationFrame(_raf); _raf = null; }
    else if(!_raf) { _raf = requestAnimationFrame(draw); }
  }, { rootMargin: '150px' }).observe(document.getElementById('strange-canvas'));
})();
  }, { rootMargin: '150px' });
  _io.observe(_el);
})();

// ══════════════════════════════════════════════════════════════════
// AETHER — Harmonic Wave Field Engine (pure fragment shader)
// ══════════════════════════════════════════════════════════════════
(function(){
  var _el = document.getElementById('aether-canvas');
  if(!_el) return;
  var _io = new IntersectionObserver(function(entries){
    if(!entries[0].isIntersecting) return;
    _io.disconnect();
    (function(){
  const canvas = document.getElementById('aether-canvas');
  const gl = glx(canvas);
  if(!gl) return;
  const W = 300, H = 300;
  gl.viewport(0, 0, W, H);

  // Vertex shader — full-screen quad
  const VS = `
    attribute vec2 p;
    varying vec2 vUv;
    void main() {
      vUv = p * 0.5 + 0.5;
      gl_Position = vec4(p, 0.0, 1.0);
    }
  `;

  // Fragment shader — all wave interference logic on GPU
  const FS = `
    precision highp float;
    varying vec2 vUv;
    uniform float t;
    uniform vec2 res;

    #define PI 3.14159265358979
    #define TAU 6.28318530717959
    #define N_SOURCES 8

    // Smooth HSL-RGB
    vec3 hsl2rgb(float h, float s, float l) {
      float c = (1.0 - abs(2.0*l - 1.0)) * s;
      float x = c * (1.0 - abs(mod(h*6.0, 2.0) - 1.0));
      float m = l - c*0.5;
      vec3 rgb;
      if      (h < 1.0/6.0) rgb = vec3(c, x, 0.0);
      else if (h < 2.0/6.0) rgb = vec3(x, c, 0.0);
      else if (h < 3.0/6.0) rgb = vec3(0.0, c, x);
      else if (h < 4.0/6.0) rgb = vec3(0.0, x, c);
      else if (h < 5.0/6.0) rgb = vec3(x, 0.0, c);
      else                   rgb = vec3(c, 0.0, x);
      return rgb + m;
    }

    // Wave from a single source
    float wave(vec2 uv, vec2 src, float freq, float phase, float harmonic) {
      float d = length(uv - src);
      return sin(d * freq - t * harmonic + phase);
    }

    void main() {
      // Aspect-correct UV centered at origin, -1
      vec2 uv = (vUv - 0.5) * vec2(res.x / res.y, 1.0) * 2.2;

      // -- Domain warping pass --
      // Self-interference from previous frame concept:
      // warp UV with a low-frequency wave before computing sources
      float warp1 = sin(uv.x * 1.8 + t * 0.7) * 0.12;
      float warp2 = cos(uv.y * 2.1 - t * 0.5) * 0.10;
      float warp3 = sin((uv.x + uv.y) * 1.3 + t * 0.9) * 0.08;
      vec2 warped = uv + vec2(warp1 + warp3, warp2 + warp3);

      // -- 8 Wave sources --
      // Positioned on two nested rings, slowly orbiting
      // Harmonic ratios: 1, 2, 3, 5, 7, 11, 13, 17 - prime harmonics
      float field = 0.0;

      // Outer ring - 5 sources
      float r1 = 0.72;
      float speeds1[5];
      speeds1[0] = 0.14; speeds1[1] = -0.09; speeds1[2] = 0.11;
      speeds1[3] = -0.07; speeds1[4] = 0.13;
      float freqs1[5];
      freqs1[0] = 7.0; freqs1[1] = 11.0; freqs1[2] = 13.0;
      freqs1[3] = 9.0; freqs1[4] = 17.0;
      float harms1[5];
      harms1[0] = 1.0; harms1[1] = 2.0; harms1[2] = 3.0;
      harms1[3] = 5.0; harms1[4] = 7.0;

      for(int i = 0; i < 5; i++) {
        float a = TAU * float(i) / 5.0 + t * speeds1[i];
        vec2 src = vec2(cos(a), sin(a)) * r1;
        float ph = TAU * float(i) / 5.0;
        field += wave(warped, src, freqs1[i], ph, harms1[i]);
      }

      // Inner ring - 3 sources, counter-orbit
      float r2 = 0.35;
      float speeds2[3];
      speeds2[0] = -0.19; speeds2[1] = 0.15; speeds2[2] = -0.22;
      float freqs2[3];
      freqs2[0] = 19.0; freqs2[1] = 23.0; freqs2[2] = 29.0;
      float harms2[3];
      harms2[0] = 11.0; harms2[1] = 13.0; harms2[2] = 17.0;

      for(int i = 0; i < 3; i++) {
        float a = TAU * float(i) / 3.0 - t * speeds2[i];
        vec2 src = vec2(cos(a), sin(a)) * r2;
        float ph = TAU * float(i) / 3.0 + PI * 0.5;
        field += wave(warped, src, freqs2[i], ph, harms2[i]);
      }

      // Normalize field to [0, 1]
      field = field / 8.0 * 0.5 + 0.5;

      // -- Harmonic banding --
      // Fold the field through multiple harmonic thresholds
      float banded = sin(field * PI * 6.0 + t * 0.3) * 0.5 + 0.5;
      banded *= sin(field * PI * 14.0 - t * 0.5) * 0.5 + 0.5;
      banded  = pow(banded, 0.7); // gamma lift

      // -- Radial pulse --
      float radial = length(uv);
      float pulse = sin(radial * 5.0 - t * 2.5) * 0.5 + 0.5;
      banded = mix(banded, banded * pulse, 0.35);

      // -- Color mapping --
      // Hue driven by field position + slow time drift
      // Creates the characteristic psychedelic color cycling
      float hue = mod(field * 1.2 + t * 0.04, 1.0);
      float hue2 = mod(banded * 0.8 + t * 0.025 + 0.33, 1.0);

      vec3 col1 = hsl2rgb(hue,  0.95, 0.55);
      vec3 col2 = hsl2rgb(hue2, 0.90, 0.45);

      // Blend the two color layers by banded intensity
      vec3 col = mix(col1, col2, banded);

      // -- Luminance boost on peaks --
      float lum = banded * banded;
      col = col + col * lum * 0.8;
      col = mix(col, vec3(1.0), lum * lum * 0.4);

      // -- Vignette --
      float vign = 1.0 - smoothstep(0.7, 1.4, length(uv));
      col *= vign;

      gl_FragColor = vec4(col, 1.0);
    }
  `;

  const prog = mkPg(gl, VS, FS);
  const pL   = gl.getAttribLocation(prog, 'p');
  const tU   = gl.getUniformLocation(prog, 't');
  const resU = gl.getUniformLocation(prog, 'res');

  // Full-screen quad
  const quad = new Float32Array([-1,-1, 1,-1, -1,1, 1,1]);
  const qBuf = mkBf(gl, quad, gl.STATIC_DRAW);

  gl.useProgram(prog);
  gl.bindBuffer(gl.ARRAY_BUFFER, qBuf);
  gl.enableVertexAttribArray(pL);
  gl.vertexAttribPointer(pL, 2, gl.FLOAT, false, 0, 0);
  gl.uniform2f(resU, W, H);

  let at = 0;
  let _raf;
  function draw() {
    at += 0.012;
    gl.uniform1f(tU, at);
    gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
    _raf = requestAnimationFrame(draw);
  }
  draw();


  // Stop RAF when card leaves viewport
  new IntersectionObserver(function(entries){
    if(!entries[0].isIntersecting) { cancelAnimationFrame(_raf); _raf = null; }
    else if(!_raf) { _raf = requestAnimationFrame(draw); }
  }, { rootMargin: '150px' }).observe(document.getElementById('aether-canvas'));
})();
  }, { rootMargin: '150px' });
  _io.observe(_el);
})();

// ══════════════════════════════════════════════════════════════════
// ORACLE — Coming Soon preview (concert projection tease)
// ══════════════════════════════════════════════════════════════════
(function(){
  var _el = document.getElementById('oracle-canvas');
  if(!_el) return;
  var _io = new IntersectionObserver(function(entries){
    if(!entries[0].isIntersecting) return;
    _io.disconnect();
    (function(){
  const canvas = document.getElementById('oracle-canvas');
  const gl = glx(canvas);
  if(!gl) return;
  const W = 300, H = 300;
  gl.viewport(0, 0, W, H);

  const VS = `
    attribute vec2 p;
    varying vec2 vUv;
    void main() {
      vUv = p * 0.5 + 0.5;
      gl_Position = vec4(p, 0.0, 1.0);
    }
  `;

  const FS = `
    precision highp float;
    varying vec2 vUv;
    uniform float t;
    uniform vec2 res;

    #define PI  3.14159265358979
    #define TAU 6.28318530717959

    vec3 hsl2rgb(float h, float s, float l) {
      float c = (1.0 - abs(2.0*l - 1.0)) * s;
      float x = c * (1.0 - abs(mod(h * 6.0, 2.0) - 1.0));
      float m = l - c * 0.5;
      vec3 rgb;
      if      (h < 1.0/6.0) rgb = vec3(c, x, 0.0);
      else if (h < 2.0/6.0) rgb = vec3(x, c, 0.0);
      else if (h < 3.0/6.0) rgb = vec3(0.0, c, x);
      else if (h < 4.0/6.0) rgb = vec3(0.0, x, c);
      else if (h < 5.0/6.0) rgb = vec3(x, 0.0, c);
      else                   rgb = vec3(c, 0.0, x);
      return rgb + m;
    }

    float beat(float period, float decay) {
      float phase = mod(t, period);
      return exp(-phase * decay);
    }

    float line(float d, float w) {
      return smoothstep(w, 0.0, abs(d));
    }

    void main() {
      vec2 uv = (vUv - 0.5) * vec2(res.x / res.y, 1.0) * 2.2;
      float r = length(uv);
      float theta = atan(uv.y, uv.x);
      vec3 col = vec3(0.0);

      float kick  = beat(1.333, 6.0);
      float snare = beat(0.667, 9.0);
      float hihat = beat(0.333, 18.0);

      // Expanding burst rings on kick
      for(int i = 0; i < 5; i++) {
        float offset = float(i) * 1.333;
        float age = mod(t + offset, 1.333);
        float ringR = age * 1.2;
        float alpha = exp(-age * 2.8) * (1.0 - smoothstep(0.95, 1.0, age));
        float hue = mod(float(i) * 0.13 + t * 0.04, 1.0);
        float ring = line(r - ringR, 0.012 + kick * 0.018);
        col += hsl2rgb(hue, 1.0, 0.6) * ring * alpha * 1.8;
      }

      // Rotating spokes
      float spokeCount = 12.0;
      float spokeAngle = mod(theta + t * 0.18, TAU / spokeCount);
      float spoke = line(spokeAngle - TAU / (spokeCount * 2.0), 0.025 + hihat * 0.015);
      col += hsl2rgb(mod(t * 0.06, 1.0), 1.0, 0.65) * spoke * smoothstep(1.1, 0.1, r) * (0.3 + hihat * 0.5);

      float spokeCount2 = 7.0;
      float spokeAngle2 = mod(theta - t * 0.11, TAU / spokeCount2);
      float spoke2 = line(spokeAngle2 - TAU / (spokeCount2 * 2.0), 0.018 + kick * 0.02);
      col += hsl2rgb(mod(t * 0.06 + 0.45, 1.0), 1.0, 0.6) * spoke2 * smoothstep(0.7, 0.05, r) * (0.25 + kick * 0.4);

      // Sacred geometry rings
      for(float ri = 1.0; ri <= 6.0; ri++) {
        float rr = ri * 0.16;
        float pulse = 1.0 + (kick * 0.06 + snare * 0.03) / ri;
        float ringLine = line(r - rr * pulse, 0.004);
        float rAlpha = (0.18 + 0.12 * snare) * (1.0 - ri * 0.08);
        col += hsl2rgb(mod(ri * 0.12 + t * 0.03, 1.0), 1.0, 0.6) * ringLine * rAlpha;
      }

      // Interference mandala core
      float mandala = 0.0;
      for(int h = 1; h <= 8; h++) {
        float hf = float(h);
        mandala += sin(theta * hf + t * (hf * 0.07) + r * hf * 4.0 - t * hf * 0.5) / hf;
      }
      mandala = mandala * 0.5 + 0.5;
      float mandalaGlow = pow(mandala, 3.0) * smoothstep(0.85, 0.0, r);
      col += hsl2rgb(mod(mandala * 0.5 + t * 0.05, 1.0), 1.0, 0.7) * mandalaGlow * (1.2 + kick * 0.8);

      // Central flash
      col += vec3(1.0, 0.95, 0.8) * exp(-r * (8.0 + kick * 12.0)) * kick * 3.5;

      // Shimmer
      float shimmer = sin(r * 28.0 - t * 9.0) * sin(theta * 16.0 + t * 4.0);
      col += hsl2rgb(mod(t * 0.08 + 0.15, 1.0), 1.0, 0.75) * smoothstep(0.4, 1.0, shimmer) * smoothstep(1.0, 0.4, r) * hihat * 0.35;

      col *= 1.0 - smoothstep(0.65, 1.35, r);
      col = col / (col + 0.75);
      col = pow(col, vec3(0.85));
      gl_FragColor = vec4(col, 1.0);
    }
  `;

  const prog = mkPg(gl, VS, FS);
  const pL   = gl.getAttribLocation(prog, 'p');
  const tU   = gl.getUniformLocation(prog, 't');
  const resU = gl.getUniformLocation(prog, 'res');
  const quad = new Float32Array([-1,-1, 1,-1, -1,1, 1,1]);
  const qBuf = mkBf(gl, quad, gl.STATIC_DRAW);
  gl.useProgram(prog);
  gl.bindBuffer(gl.ARRAY_BUFFER, qBuf);
  gl.enableVertexAttribArray(pL);
  gl.vertexAttribPointer(pL, 2, gl.FLOAT, false, 0, 0);
  gl.uniform2f(resU, W, H);
  let ot = 0;
  let _raf;
  function draw() {
    ot += 0.014;
    gl.uniform1f(tU, ot);
    gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
    _raf = requestAnimationFrame(draw);
  }
  draw();


  // Stop RAF when card leaves viewport
  new IntersectionObserver(function(entries){
    if(!entries[0].isIntersecting) { cancelAnimationFrame(_raf); _raf = null; }
    else if(!_raf) { _raf = requestAnimationFrame(draw); }
  }, { rootMargin: '150px' }).observe(document.getElementById('oracle-canvas'));
})();
  }, { rootMargin: '150px' });
  _io.observe(_el);
})();

// ══════════════════════════════════════════════════════════════════
// VEIL — Fluid Membrane Simulation
// Two-pass WebGL: velocity field (curl noise + advection) →
// dye advection → iridescent membrane display.
// Universal RGBA/UNSIGNED_BYTE ping-pong FBOs (no extensions needed).
// Mouse = force emitter. Mic = pressure pulse.
// ══════════════════════════════════════════════════════════════════
(function(){
  var _el = document.getElementById('veil-canvas');
  if(!_el) return;
  var _io = new IntersectionObserver(function(entries){
    if(!entries[0].isIntersecting) return;
    _io.disconnect();
    (function(){
  const canvas = document.getElementById('veil-canvas');
  if (!canvas) return;
  const gl = canvas.getContext('webgl', {antialias:false, premultipliedAlpha:false});
  if(!gl) return;

  const SIM = 128; // simulation grid resolution
  const W = 300, H = 300;

  // ── Full-screen quad ──
  const quadBuf = gl.createBuffer();
  gl.bindBuffer(gl.ARRAY_BUFFER, quadBuf);
  gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([-1,-1,1,-1,-1,1,1,1]), gl.STATIC_DRAW);

  function bindQuad(prog) {
    const loc = gl.getAttribLocation(prog, 'pos');
    gl.bindBuffer(gl.ARRAY_BUFFER, quadBuf);
    gl.enableVertexAttribArray(loc);
    gl.vertexAttribPointer(loc, 2, gl.FLOAT, false, 0, 0);
  }

  // ── Texture / FBO helpers ──
  function mkTex(w, h, data) {
    const t = gl.createTexture();
    gl.bindTexture(gl.TEXTURE_2D, t);
    gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, w, h, 0, gl.RGBA, gl.UNSIGNED_BYTE, data||null);
    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
    return t;
  }
  function mkFBT(w, h) {
    const tex = mkTex(w, h, null);
    const fbo = gl.createFramebuffer();
    gl.bindFramebuffer(gl.FRAMEBUFFER, fbo);
    gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, tex, 0);
    gl.bindFramebuffer(gl.FRAMEBUFFER, null);
    return {fbo, tex};
  }

  // ── Ping-pong buffers ──
  // Velocity: R=vx encoded, G=vy encoded (0.5 = zero)
  // Dye: RGB color channels
  let vel = [mkFBT(SIM, SIM), mkFBT(SIM, SIM)];
  let dye = [mkFBT(SIM, SIM), mkFBT(SIM, SIM)];

  // Seed velocity to neutral (0.5, 0.5 = zero velocity)
  const neutralVel = new Uint8Array(SIM * SIM * 4);
  for(let i = 0; i < SIM * SIM; i++) {
    neutralVel[i*4]   = 128; // vx = 0
    neutralVel[i*4+1] = 128; // vy = 0
    neutralVel[i*4+2] = 0;
    neutralVel[i*4+3] = 255;
  }
  for(const v of vel) {
    gl.bindTexture(gl.TEXTURE_2D, v.tex);
    gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, SIM, SIM, 0, gl.RGBA, gl.UNSIGNED_BYTE, neutralVel);
  }

  // ── Shared vertex shader ──
  const quadVS = `
    attribute vec2 pos;
    varying vec2 vUv;
    void main() {
      vUv = pos * 0.5 + 0.5;
      gl_Position = vec4(pos, 0.0, 1.0);
    }
  `;

  // ── PASS 1: Velocity update ──
  // Semi-Lagrangian advection + two-octave curl noise + phantom forces + mouse
  const velFS = `
    precision highp float;
    varying vec2 vUv;
    uniform sampler2D velTex;
    uniform float t;
    uniform vec2  mouse;
    uniform float mouseActive;
    uniform float micPulse;

    vec2 decV(vec2 e) { return (e - 0.5) * 2.0; }
    vec2 encV(vec2 v) { return clamp(v * 0.5 + 0.5, 0.0, 1.0); }

    float hash21(vec2 p) {
      p = fract(p * vec2(127.1, 311.7));
      p += dot(p, p + 17.5);
      return fract(p.x * p.y);
    }
    float vnoise(vec2 p) {
      vec2 i = floor(p), f = fract(p);
      f = f * f * (3.0 - 2.0 * f);
      return mix(
        mix(hash21(i), hash21(i + vec2(1,0)), f.x),
        mix(hash21(i + vec2(0,1)), hash21(i + vec2(1,1)), f.x),
        f.y);
    }
    vec2 curl(vec2 p, float spd) {
      float e = 0.007;
      vec2 o = p * 3.5 + spd;
      float a = vnoise(o + vec2(0, e)) - vnoise(o - vec2(0, e));
      float b = vnoise(o + vec2(e, 0)) - vnoise(o - vec2(e, 0));
      vec2 o2 = p * 8.0 - spd * 1.3;
      float c = vnoise(o2 + vec2(0, e)) - vnoise(o2 - vec2(0, e));
      float d = vnoise(o2 + vec2(e, 0)) - vnoise(o2 - vec2(e, 0));
      return vec2(a - c*0.35, d - b + c*0.35 - a*0.35) / (2.0*e);
    }

    void main() {
      // Decode current velocity and back-trace
      vec2 v     = decV(texture2D(velTex, vUv).xy);
      vec2 prev  = clamp(vUv - v * 0.016, 0.0, 1.0);
      vec2 newV  = decV(texture2D(velTex, prev).xy);

      // Curl noise stirring
      newV += curl(vUv, t * 0.13) * 0.016;

      // Three autonomous phantom breath sources
      vec2 ph[3];
      ph[0] = vec2(0.5 + 0.30*sin(t*0.31),      0.5 + 0.26*cos(t*0.24));
      ph[1] = vec2(0.5 + 0.25*cos(t*0.19+1.2),  0.5 + 0.28*sin(t*0.27+2.1));
      ph[2] = vec2(0.5 + 0.18*sin(t*0.44+3.0),  0.5 + 0.20*cos(t*0.39+1.5));
      for(int i = 0; i < 3; i++) {
        vec2 d = vUv - ph[i];
        float f = exp(-dot(d,d) * 480.0) * 0.14;
        newV += d * f;
      }

      // Mouse force - radial push
      if(mouseActive > 0.5) {
        vec2 dm = vUv - mouse;
        newV -= dm * exp(-dot(dm,dm) * 900.0) * 0.45;
      }

      // Mic pressure - radial pulse from centre
      vec2 dc = vUv - 0.5;
      newV += normalize(dc + 0.0001) * micPulse
              * exp(-length(dc) * 3.5) * 0.22;

      // Dissipation + boundary softening
      newV *= 0.992;
      vec2 bnd = smoothstep(0.0, 0.04, vUv) * smoothstep(1.0, 0.96, vUv);
      newV *= bnd.x * bnd.y;

      gl_FragColor = vec4(encV(newV), 0.0, 1.0);
    }
  `;

  // ── PASS 2: Dye advection ──
  const dyeFS = `
    precision highp float;
    varying vec2 vUv;
    uniform sampler2D velTex;
    uniform sampler2D dyeTex;
    uniform float t;
    uniform vec2  mouse;
    uniform float mouseActive;
    uniform float micPulse;

    vec2 decV(vec2 e) { return (e - 0.5) * 2.0; }

    vec3 hue3(float h) {
      float h6 = fract(h) * 6.0;
      return clamp(vec3(
        abs(h6 - 3.0) - 1.0,
        2.0 - abs(h6 - 2.0),
        2.0 - abs(h6 - 4.0)), 0.0, 1.0);
    }

    void main() {
      vec2 vel  = decV(texture2D(velTex, vUv).xy);
      vec2 prev = clamp(vUv - vel * 0.016, 0.0, 1.0);
      vec3 dye  = texture2D(dyeTex, prev).rgb;

      // Phantom dye injection - three breathing sources, rotating hues
      vec2 ph[3];
      ph[0] = vec2(0.5 + 0.30*sin(t*0.31),      0.5 + 0.26*cos(t*0.24));
      ph[1] = vec2(0.5 + 0.25*cos(t*0.19+1.2),  0.5 + 0.28*sin(t*0.27+2.1));
      ph[2] = vec2(0.5 + 0.18*sin(t*0.44+3.0),  0.5 + 0.20*cos(t*0.39+1.5));
      float str[3];
      str[0] = 0.22; str[1] = 0.18; str[2] = 0.16;
      for(int i = 0; i < 3; i++) {
        vec2 d = vUv - ph[i];
        float sp = exp(-dot(d,d) * 2800.0) * str[i];
        dye += hue3(t * 0.055 + float(i) * 0.333) * sp;
      }

      // Mouse dye splat
      if(mouseActive > 0.5) {
        vec2 dm = vUv - mouse;
        float sp = exp(-dot(dm,dm) * 700.0) * 0.55;
        dye += hue3(t * 0.09 + 0.1) * sp;
      }

      // Mic ring - glowing dye ring expanding from centre
      float dist = length(vUv - 0.5);
      float ring = exp(-pow(dist - 0.42, 2.0) * 280.0) * micPulse * 0.55;
      dye += vec3(0.65, 0.88, 1.0) * ring;

      // Gentle dissipation
      dye *= 0.9975;
      dye  = clamp(dye, 0.0, 1.0);

      gl_FragColor = vec4(dye, 1.0);
    }
  `;

  // ── PASS 3: Display ──
  // Thin-film iridescence: hue shifts with local dye density and velocity
  const dispFS = `
    precision highp float;
    varying vec2 vUv;
    uniform sampler2D dyeTex;
    uniform sampler2D velTex;
    uniform float t;

    vec2 decV(vec2 e) { return (e - 0.5) * 2.0; }

    vec3 hue3(float h) {
      float h6 = fract(h) * 6.0;
      return clamp(vec3(
        abs(h6 - 3.0) - 1.0,
        2.0 - abs(h6 - 2.0),
        2.0 - abs(h6 - 4.0)), 0.0, 1.0);
    }

    void main() {
      vec3 dye = texture2D(dyeTex, vUv).rgb;
      vec2 vel = decV(texture2D(velTex, vUv).xy);
      float spd = length(vel);
      float den = dot(dye, vec3(0.299, 0.587, 0.114)); // luminance

      // Thin-film iridescence:
      // Phase varies with density (thickness proxy) and velocity direction
      float velAngle = atan(vel.y, vel.x) / 6.28318;
      float iridPhase = den * 6.0 + spd * 3.0 + velAngle * 0.5 - t * 0.25;
      float iri       = sin(iridPhase * 3.14159) * 0.5 + 0.5;
      float iri2      = sin(iridPhase * 3.14159 * 2.0 + 1.2) * 0.5 + 0.5;

      // Layer 1: base dye color (the matter of the veil)
      vec3 col = dye * 1.6;

      // Layer 2: iridescent sheen (the light on silk)
      vec3 sheen = mix(
        hue3(iri  * 0.4 + t * 0.025),
        hue3(iri2 * 0.4 + t * 0.025 + 0.5),
        0.5);
      col = mix(col, col + sheen * 0.7, smoothstep(0.02, 0.25, den));

      // Layer 3: velocity shimmer (motion catches light)
      col += hue3(velAngle + t * 0.04) * spd * 2.2 * smoothstep(0.0, 0.2, den);

      // Layer 4: specular hotspot where fluid moves fast
      col += vec3(0.9, 0.95, 1.0) * pow(spd * den * 3.0, 2.0) * 1.5;

      // Background: near-black deep indigo
      vec3 bg = vec3(0.004, 0.002, 0.010);
      col = mix(bg, col, smoothstep(0.008, 0.07, den));

      // Bloom: luminance pushes beyond saturation
      col += col * col * 0.55;

      // Tone map (Reinhard-like, preserves color)
      col = col / (col + vec3(0.7));

      // Vignette
      float vign = 1.0 - smoothstep(0.28, 0.85, length(vUv - 0.5) * 1.65);
      col *= mix(0.15, 1.0, vign);

      gl_FragColor = vec4(col, 1.0);
    }
  `;

  // ── Compile programs ──
  function compile(vs, fs) {
    const p = gl.createProgram();
    const mkS = (t, s) => { const x = gl.createShader(t); gl.shaderSource(x,s); gl.compileShader(x); return x; };
    gl.attachShader(p, mkS(gl.VERTEX_SHADER, vs));
    gl.attachShader(p, mkS(gl.FRAGMENT_SHADER, fs));
    gl.linkProgram(p);
    return p;
  }

  const velProg  = compile(quadVS, velFS);
  const dyeProg  = compile(quadVS, dyeFS);
  const dispProg = compile(quadVS, dispFS);

  // ── State ──
  let vIdx = 0; // velocity ping-pong index
  let dIdx = 0; // dye ping-pong index
  let vt = 0;

  // Mouse state — disabled on card preview
  let mouse = [0.5, 0.5];
  let mouseActive = 0;
  // (no event listeners — card is autonomous)

  // Mic state — disabled on card preview (autonomous only)
  let micPulse = 0;

  // ── Render pass helper ──
  function pass(prog, targetFBO, targetW, targetH, tex0, u0, tex1, u1, setUniforms) {
    gl.useProgram(prog);
    bindQuad(prog);
    if(tex0 !== null) {
      gl.activeTexture(gl.TEXTURE0);
      gl.bindTexture(gl.TEXTURE_2D, tex0);
      gl.uniform1i(gl.getUniformLocation(prog, u0), 0);
    }
    if(tex1 !== null) {
      gl.activeTexture(gl.TEXTURE1);
      gl.bindTexture(gl.TEXTURE_2D, tex1);
      gl.uniform1i(gl.getUniformLocation(prog, u1), 1);
    }
    setUniforms(prog);
    gl.bindFramebuffer(gl.FRAMEBUFFER, targetFBO);
    gl.viewport(0, 0, targetW, targetH);
    gl.disable(gl.BLEND);
    gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
    gl.bindFramebuffer(gl.FRAMEBUFFER, null);
  }

  function setCommon(prog) {
    gl.uniform1f(gl.getUniformLocation(prog, 't'),           vt);
    gl.uniform2f(gl.getUniformLocation(prog, 'mouse'),       mouse[0], mouse[1]);
    gl.uniform1f(gl.getUniformLocation(prog, 'mouseActive'), mouseActive);
    gl.uniform1f(gl.getUniformLocation(prog, 'micPulse'),    micPulse);
  }

  function step() {
    const v0 = vel[vIdx],      v1 = vel[1 - vIdx];
    const d0 = dye[dIdx],      d1 = dye[1 - dIdx];

    // Pass 1 — update velocity
    pass(velProg, v1.fbo, SIM, SIM, v0.tex, 'velTex', null, null, setCommon);

    // Pass 2 — advect dye through updated velocity
    pass(dyeProg, d1.fbo, SIM, SIM, v1.tex, 'velTex', d0.tex, 'dyeTex', setCommon);

    // Swap ping-pong
    vIdx = 1 - vIdx;
    dIdx = 1 - dIdx;
  }

  // ── Warm-up: seed initial dye before first display frame ──
  for(let i = 0; i < 80; i++) { vt += 0.016; step(); }

  // ── Main loop ──
  let _rafDraw;
  function draw() {
    vt += 0.016;
    micPulse *= 0.85; // decay between frames

    step();

    // Display pass — to screen
    const vCur = vel[vIdx];
    const dCur = dye[dIdx];

    gl.useProgram(dispProg);
    bindQuad(dispProg);
    gl.activeTexture(gl.TEXTURE0);
    gl.bindTexture(gl.TEXTURE_2D, dCur.tex);
    gl.uniform1i(gl.getUniformLocation(dispProg, 'dyeTex'), 0);
    gl.activeTexture(gl.TEXTURE1);
    gl.bindTexture(gl.TEXTURE_2D, vCur.tex);
    gl.uniform1i(gl.getUniformLocation(dispProg, 'velTex'), 1);
    gl.uniform1f(gl.getUniformLocation(dispProg, 't'), vt);
    gl.bindFramebuffer(gl.FRAMEBUFFER, null);
    gl.viewport(0, 0, W, H);
    gl.disable(gl.BLEND);
    gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);

    _rafDraw = requestAnimationFrame(draw);
  }

  draw();


  // Stop RAF when card leaves viewport
  new IntersectionObserver(function(entries){
    if(!entries[0].isIntersecting) { cancelAnimationFrame(_rafDraw); _rafDraw = null; }
    else if(!_rafDraw) { _rafDraw = requestAnimationFrame(draw); }
  }, { rootMargin: '150px' }).observe(document.getElementById('veil-canvas'));
})();
  }, { rootMargin: '150px' });
  _io.observe(_el);
})();

// ══════════════════════════════════════════════════════════════════
// MORPHE — Reaction-Diffusion Preview (Gray-Scott)
// Two-pass ping-pong: reaction-diffusion step → iridescent display
// Parameters cycle through coral → labyrinth → mitosis → filaments
// ══════════════════════════════════════════════════════════════════
(function(){
  var _el = document.getElementById('morphe-canvas');
  if(!_el) return;
  var _io = new IntersectionObserver(function(entries){
    if(!entries[0].isIntersecting) return;
    _io.disconnect();
    (function(){
  const canvas = document.getElementById('morphe-canvas');
  if(!canvas) return;
  const gl = canvas.getContext('webgl', {antialias:false, premultipliedAlpha:false});
  if(!gl) return;
  const W = 300, H = 300, SIM = 256;
  gl.viewport(0, 0, W, H);

  // ── FBO / texture helpers ──
  function mkTex(w, h, data) {
    const t = gl.createTexture();
    gl.bindTexture(gl.TEXTURE_2D, t);
    gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, w, h, 0, gl.RGBA, gl.UNSIGNED_BYTE, data||null);
    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.REPEAT);
    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.REPEAT);
    return t;
  }
  function mkFBT(w, h, data) {
    const tex = mkTex(w, h, data);
    const fbo = gl.createFramebuffer();
    gl.bindFramebuffer(gl.FRAMEBUFFER, fbo);
    gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, tex, 0);
    gl.bindFramebuffer(gl.FRAMEBUFFER, null);
    return {fbo, tex};
  }

  // ── Seed initial state ──
  // U=1 everywhere, V=0 except random seeded squares
  const seed = new Uint8Array(SIM * SIM * 4);
  for(let i = 0; i < SIM * SIM; i++) {
    seed[i*4]   = 255; // U = 1.0
    seed[i*4+1] = 0;   // V = 0.0
    seed[i*4+2] = 0;
    seed[i*4+3] = 255;
  }
  // Seed ~60 random blobs of V
  for(let n = 0; n < 60; n++) {
    const cx = Math.floor(Math.random() * SIM);
    const cy = Math.floor(Math.random() * SIM);
    const r  = 2 + Math.floor(Math.random() * 4);
    for(let dy = -r; dy <= r; dy++)
    for(let dx = -r; dx <= r; dx++) {
      if(dx*dx + dy*dy <= r*r) {
        const px = ((cx+dx) % SIM + SIM) % SIM;
        const py = ((cy+dy) % SIM + SIM) % SIM;
        const idx = (py * SIM + px) * 4;
        seed[idx+1] = 220; // V ≈ 0.86
      }
    }
  }

  let ping = mkFBT(SIM, SIM, seed);
  let pong = mkFBT(SIM, SIM, null);

  // ── Quad ──
  const qb = gl.createBuffer();
  gl.bindBuffer(gl.ARRAY_BUFFER, qb);
  gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([-1,-1,1,-1,-1,1,1,1]), gl.STATIC_DRAW);

  function bindQ(prog) {
    const l = gl.getAttribLocation(prog, 'pos');
    gl.bindBuffer(gl.ARRAY_BUFFER, qb);
    gl.enableVertexAttribArray(l);
    gl.vertexAttribPointer(l, 2, gl.FLOAT, false, 0, 0);
  }

  function compile(vs, fs) {
    const p = gl.createProgram();
    const sh = (t, s) => { const x = gl.createShader(t); gl.shaderSource(x, s); gl.compileShader(x); return x; };
    gl.attachShader(p, sh(gl.VERTEX_SHADER,   vs));
    gl.attachShader(p, sh(gl.FRAGMENT_SHADER, fs));
    gl.linkProgram(p);
    return p;
  }

  const VS = `attribute vec2 pos; varying vec2 vUv;
    void main(){ vUv = pos*0.5+0.5; gl_Position=vec4(pos,0,1); }`;

  // ── PASS 1: Gray-Scott reaction-diffusion ──
  // U and V encoded in R and G channels (0–255 maps to 0.0–1.0)
  // Laplacian via 9-tap stencil sampled from texture
  const rdFS = `
    precision highp float;
    varying vec2 vUv;
    uniform sampler2D state;
    uniform vec2 px;       // 1.0/SIM
    uniform float f;       // feed rate
    uniform float k;       // kill rate
    const float Du = 0.210;
    const float Dv = 0.105;
    const float dt = 1.0;

    vec2 rd(vec2 uv) {
      return texture2D(state, uv).rg;
    }

    void main() {
      vec2 c  = rd(vUv);
      // 9-tap weighted Laplacian (0.2 cardinal, 0.05 diagonal, -1 center)
      vec2 lap =
        rd(vUv + vec2( px.x,    0)) * 0.20 +
        rd(vUv + vec2(-px.x,    0)) * 0.20 +
        rd(vUv + vec2(   0,  px.y)) * 0.20 +
        rd(vUv + vec2(   0, -px.y)) * 0.20 +
        rd(vUv + vec2( px.x,  px.y)) * 0.05 +
        rd(vUv + vec2(-px.x,  px.y)) * 0.05 +
        rd(vUv + vec2( px.x, -px.y)) * 0.05 +
        rd(vUv + vec2(-px.x, -px.y)) * 0.05 +
        c * -1.0;

      float U = c.r, V = c.g;
      float uvv = U * V * V;

      float dU = Du * lap.r - uvv + f * (1.0 - U);
      float dV = Dv * lap.g + uvv - (f + k) * V;

      float nU = clamp(U + dU * dt, 0.0, 1.0);
      float nV = clamp(V + dV * dt, 0.0, 1.0);

      gl_FragColor = vec4(nU, nV, 0.0, 1.0);
    }
  `;

  // ── PASS 2: Iridescent display ──
  // V concentration drives the visual — coral forms, iridescent sheen
  const dispFS = `
    precision highp float;
    varying vec2 vUv;
    uniform sampler2D state;
    uniform float t;

    vec3 hsl2rgb(float h, float s, float l) {
      float c = (1.0 - abs(2.0*l-1.0)) * s;
      float x = c * (1.0 - abs(mod(h*6.0,2.0)-1.0));
      float m = l - c*0.5;
      vec3 rgb;
      if      (h < 1.0/6.0) rgb = vec3(c,x,0);
      else if (h < 2.0/6.0) rgb = vec3(x,c,0);
      else if (h < 3.0/6.0) rgb = vec3(0,c,x);
      else if (h < 4.0/6.0) rgb = vec3(0,x,c);
      else if (h < 5.0/6.0) rgb = vec3(x,0,c);
      else                   rgb = vec3(c,0,x);
      return rgb + m;
    }

    void main() {
      vec2 uv = vUv;
      float V = texture2D(state, uv).g;
      float U = texture2D(state, uv).r;

      // Gradient approximation for surface normal / iridescence
      float e = 0.004;
      float vR = texture2D(state, uv + vec2(e, 0)).g;
      float vL = texture2D(state, uv - vec2(e, 0)).g;
      float vU = texture2D(state, uv + vec2(0, e)).g;
      float vD = texture2D(state, uv - vec2(0, e)).g;
      vec2 grad = vec2(vR - vL, vU - vD) * 80.0;
      float edge = length(grad);

      // Base hue from V concentration - slow time drift
      float hue = mod(V * 1.8 + t * 0.018, 1.0);

      // Iridescent edge sheen - hue shifts at boundaries
      float shiftedHue = mod(hue + edge * 0.25 + t * 0.012, 1.0);

      vec3 baseCol  = hsl2rgb(hue,        0.85, 0.35 + V * 0.25);
      vec3 edgeCol  = hsl2rgb(shiftedHue, 1.00, 0.65);
      vec3 col      = mix(baseCol, edgeCol, smoothstep(0.0, 1.8, edge));

      // High-V regions bloom toward white (dense chemistry = bright)
      col += vec3(0.8, 0.95, 1.0) * pow(V, 3.5) * 0.9;

      // Near-black background where V=0 (empty medium)
      vec3 bg = vec3(0.003, 0.005, 0.010);
      col = mix(bg, col, smoothstep(0.02, 0.12, V));

      // Vignette
      float vign = 1.0 - smoothstep(0.35, 0.85, length(vUv - 0.5) * 1.5);
      col *= mix(0.1, 1.0, vign);

      gl_FragColor = vec4(col, 1.0);
    }
  `;

  const rdProg   = compile(VS, rdFS);
  const dispProg = compile(VS, dispFS);

  // Cache uniforms
  const rdState = gl.getUniformLocation(rdProg,   'state');
  const rdPx    = gl.getUniformLocation(rdProg,   'px');
  const rdF     = gl.getUniformLocation(rdProg,   'f');
  const rdK     = gl.getUniformLocation(rdProg,   'k');
  const dpState = gl.getUniformLocation(dispProg, 'state');
  const dpT     = gl.getUniformLocation(dispProg, 't');

  // ── Parameter presets — cycle through pattern families ──
  // [f, k] — Gray-Scott phase diagram landmarks
  const presets = [
    [0.0545, 0.062],   // coral / fingerprints
    [0.035,  0.065],   // labyrinth worms
    [0.029,  0.057],   // mitosis / cell division
    [0.025,  0.060],   // scattered spots
    [0.039,  0.058],   // filaments / tendrils
    [0.062,  0.061],   // moving spots
  ];
  let pidx  = 0;
  let curF  = presets[0][0], curK  = presets[0][1];
  let targF = presets[1][0], targK = presets[1][1];
  let morphT = 0;
  const MORPH_DUR = 800; // frames per preset

  let mt = 0;

  function step() {
    // Morph parameters
    morphT++;
    if(morphT >= MORPH_DUR) {
      curF = targF; curK = targK;
      pidx = (pidx + 1) % presets.length;
      targF = presets[pidx][0]; targK = presets[pidx][1];
      morphT = 0;
    }
    const ease = morphT / MORPH_DUR;
    const ef = curF + (targF - curF) * ease;
    const ek = curK + (targK - curK) * ease;

    // RD pass — multiple sub-steps per frame for speed
    for(let s = 0; s < 6; s++) {
      gl.useProgram(rdProg);
      bindQ(rdProg);
      gl.activeTexture(gl.TEXTURE0);
      gl.bindTexture(gl.TEXTURE_2D, ping.tex);
      gl.uniform1i(rdState, 0);
      gl.uniform2f(rdPx, 1.0/SIM, 1.0/SIM);
      gl.uniform1f(rdF, ef);
      gl.uniform1f(rdK, ek);
      gl.bindFramebuffer(gl.FRAMEBUFFER, pong.fbo);
      gl.viewport(0, 0, SIM, SIM);
      gl.disable(gl.BLEND);
      gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
      // Swap
      const tmp = ping; ping = pong; pong = tmp;
    }
  }

  // Warm up
  for(let i = 0; i < 300; i++) step();

  let _raf;
  function draw() {
    mt += 0.008;
    step();

    // Display pass
    gl.useProgram(dispProg);
    bindQ(dispProg);
    gl.activeTexture(gl.TEXTURE0);
    gl.bindTexture(gl.TEXTURE_2D, ping.tex);
    gl.uniform1i(dpState, 0);
    gl.uniform1f(dpT, mt);
    gl.bindFramebuffer(gl.FRAMEBUFFER, null);
    gl.viewport(0, 0, W, H);
    gl.disable(gl.BLEND);
    gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);

    _raf = requestAnimationFrame(draw);
  }

  draw();


  // Stop RAF when card leaves viewport
  new IntersectionObserver(function(entries){
    if(!entries[0].isIntersecting) { cancelAnimationFrame(_raf); _raf = null; }
    else if(!_raf) { _raf = requestAnimationFrame(draw); }
  }, { rootMargin: '150px' }).observe(document.getElementById('morphe-canvas'));
})();
  }, { rootMargin: '150px' });
  _io.observe(_el);
})();


// ══════════════════════════════════════════════════════════════════
// AURORA — Magnetospheric Light Engine
// Two-pass WebGL: particle field line accumulation (FBO additive) →
// atmospheric scattering display with spectral emission mapping.
// Spectral palette from real atmospheric physics:
//   O  557.7nm → green  (#00ff88)
//   O  630.0nm → red    (#ff2200)
//   N2 427.8nm → violet (#8833ff)
//   N  520.0nm → teal   (#00ddaa)
// ══════════════════════════════════════════════════════════════════
(function(){
  var _el = document.getElementById('aurora-canvas');
  if(!_el) return;
  var _io = new IntersectionObserver(function(entries){
    if(!entries[0].isIntersecting) return;
    _io.disconnect();
    (function(){
  const canvas = document.getElementById('aurora-canvas');
  if (!canvas) return;
  const gl = canvas.getContext('webgl', {antialias:false, premultipliedAlpha:false});
  if(!gl) return;
  const W = 300, H = 300;
  gl.viewport(0, 0, W, H);

  // ── FBO helpers ──
  function mkFBT(w, h) {
    const tex = gl.createTexture();
    gl.bindTexture(gl.TEXTURE_2D, tex);
    gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, w, h, 0, gl.RGBA, gl.UNSIGNED_BYTE, null);
    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
    const fbo = gl.createFramebuffer();
    gl.bindFramebuffer(gl.FRAMEBUFFER, fbo);
    gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, tex, 0);
    gl.bindFramebuffer(gl.FRAMEBUFFER, null);
    return {fbo, tex};
  }

  const accum = mkFBT(W, H);

  // ── Quad ──
  const qb = gl.createBuffer();
  gl.bindBuffer(gl.ARRAY_BUFFER, qb);
  gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([-1,-1,1,-1,-1,1,1,1]), gl.STATIC_DRAW);

  function compile(vs, fs) {
    const p = gl.createProgram();
    const sh = (t,s) => { const x=gl.createShader(t);gl.shaderSource(x,s);gl.compileShader(x);return x; };
    gl.attachShader(p, sh(gl.VERTEX_SHADER, vs));
    gl.attachShader(p, sh(gl.FRAGMENT_SHADER, fs));
    gl.linkProgram(p);
    return p;
  }

  const quadVS = `attribute vec2 pos; varying vec2 vUv;
    void main(){ vUv=pos*.5+.5; gl_Position=vec4(pos,0,1); }`;

  // ── PASS 1: Particle curtain accumulation ──
  // Particles fall from the top along distorted magnetic field lines.
  // Each particle is a glowing point added to the FBO with additive blend.
  // N_STREAMS streams, each driven by a Lissajous-orbit source + noise warp.

  const N = 800; // particles

  // Particle state: x, y (screen NDC), sourceX, speed, hueIndex, phase
  const pstate = [];
  for(let i = 0; i < N; i++) {
    const sx = (Math.random() - 0.5) * 2.0;
    pstate.push({
      x:  sx,
      y:  1.0 - Math.random() * 2.0, // start scattered vertically
      sx, // source x — drifts slowly
      spd: 0.003 + Math.random() * 0.005,
      hue: Math.floor(Math.random() * 4), // 0=green,1=red,2=violet,3=teal
      ph:  Math.random() * Math.PI * 2,
      swayAmp: 0.004 + Math.random() * 0.008,
      swayFreq: 0.8 + Math.random() * 1.6,
    });
  }

  // Spectral colors (RGBA float, for uniform upload)
  // O 557.7nm, O 630nm, N2 427.8nm, N 520nm
  const SPECTRA = [
    [0.0,  1.0,  0.53, 1.0],   // green
    [1.0,  0.13, 0.0,  1.0],   // red
    [0.53, 0.20, 1.0,  1.0],   // violet
    [0.0,  0.87, 0.67, 1.0],   // teal
  ];

  const ptVS = `
    attribute float px;
    attribute float py;
    attribute float brightness;
    varying float vBri;
    void main(){
      vBri = brightness;
      gl_PointSize = 2.5;
      gl_Position = vec4(px, py, 0.0, 1.0);
    }
  `;
  const ptFS = `
    precision mediump float;
    varying float vBri;
    uniform vec4 col;
    void main(){
      vec2 c = gl_PointCoord - 0.5;
      float d = length(c) * 2.0;
      if(d > 1.0) discard;
      float a = (1.0 - d*d) * vBri * 0.018;
      gl_FragColor = vec4(col.rgb * a, a);
    }
  `;

  const ptProg = compile(ptVS, ptFS);
  const pxLoc  = gl.getAttribLocation(ptProg, 'px');
  const pyLoc  = gl.getAttribLocation(ptProg, 'py');
  const brLoc  = gl.getAttribLocation(ptProg, 'brightness');
  const colLoc = gl.getUniformLocation(ptProg, 'col');

  const pxBuf = gl.createBuffer(); gl.bindBuffer(gl.ARRAY_BUFFER, pxBuf); gl.bufferData(gl.ARRAY_BUFFER, N*4, gl.DYNAMIC_DRAW);
  const pyBuf = gl.createBuffer(); gl.bindBuffer(gl.ARRAY_BUFFER, pyBuf); gl.bufferData(gl.ARRAY_BUFFER, N*4, gl.DYNAMIC_DRAW);
  const brBuf = gl.createBuffer(); gl.bindBuffer(gl.ARRAY_BUFFER, brBuf); gl.bufferData(gl.ARRAY_BUFFER, N*4, gl.DYNAMIC_DRAW);

  const pxArr = new Float32Array(N);
  const pyArr = new Float32Array(N);
  const brArr = new Float32Array(N);

  // ── PASS 2: Atmospheric display ──
  // Reads the accumulation FBO, applies:
  // - Vertical gaussian blur (simulates column of excited gas)
  // - Altitude-dependent color shift (higher = redder, lower = greener)
  // - Stars in the background
  // - Deep sky gradient
  // - Soft vignette

  const dispFS = `
    precision highp float;
    varying vec2 vUv;
    uniform sampler2D accumTex;
    uniform float t;

    // Pseudo-random for stars
    float hash(vec2 p){
      return fract(sin(dot(p, vec2(127.1, 311.7))) * 43758.5453);
    }

    void main(){
      // -- Deep sky background --
      // Near-black at horizon (bottom), deep blue-black at zenith (top)
      float altitude = vUv.y;
      vec3 sky = mix(
        vec3(0.0, 0.002, 0.008),   // horizon - almost black with a blue tint
        vec3(0.0, 0.0,   0.018),   // zenith  - deep indigo
        altitude
      );

      // -- Star field --
      vec2 sg = floor(vUv * 180.0);
      float star = hash(sg);
      float starBri = 0.0;
      if(star > 0.985){
        float twinkle = 0.5 + 0.5 * sin(t * (2.0 + hash(sg + 0.5) * 4.0) + hash(sg + 1.3) * 6.28);
        starBri = pow((star - 0.985) / 0.015, 2.0) * twinkle * 0.85;
      }
      sky += vec3(0.85, 0.90, 1.0) * starBri;

      // -- Vertical gaussian blur on accumulation --
      // Simulates vertical extent of excited gas columns
      vec3 curtain = vec3(0.0);
      float totalW = 0.0;
      float blurH = 0.022; // vertical spread
      for(int i = -8; i <= 8; i++){
        float off = float(i) / 8.0;
        float w = exp(-off * off * 5.0);
        vec2 suv = vUv + vec2(0.0, off * blurH);
        curtain += texture2D(accumTex, clamp(suv, 0.0, 1.0)).rgb * w;
        totalW += w;
      }
      curtain /= totalW;

      // Horizontal subtle blur - lateral diffusion in the ionosphere
      vec3 curtainH = vec3(0.0);
      float totalWH = 0.0;
      float blurW = 0.008;
      for(int i = -4; i <= 4; i++){
        float off = float(i) / 4.0;
        float w = exp(-off * off * 6.0);
        vec2 suv = vUv + vec2(off * blurW, 0.0);
        curtainH += texture2D(accumTex, clamp(suv, 0.0, 1.0)).rgb * w;
        totalWH += w;
      }
      curtainH /= totalWH;
      curtain = mix(curtain, curtainH, 0.3);

      // -- Altitude-dependent spectral shift --
      // High altitude - redder (O 630nm dominates above 200km)
      // Low altitude  - greener (O 557.7nm dominates 100-150km)
      // Lowest fringe - blue-violet (N2 excitation)
      float lum = dot(curtain, vec3(0.299, 0.587, 0.114));
      vec3 highAlt = vec3(0.9, 0.15, 0.05) * lum; // red
      vec3 midAlt  = curtain;                       // preserve spectral color
      vec3 lowAlt  = vec3(0.2, 0.6,  1.0) * lum;   // blue fringe
      float hi = smoothstep(0.55, 0.85, altitude);
      float lo = smoothstep(0.25, 0.05, altitude);
      curtain = mix(mix(midAlt, highAlt, hi), lowAlt, lo);

      // -- Luminance boost - curtains glow beyond linear --
      curtain += curtain * curtain * 1.8;

      // -- Faint horizontal ripple - ionospheric wave --
      float ripple = sin(vUv.x * 18.0 + t * 0.35) * sin(vUv.x * 7.0 - t * 0.22) * 0.5 + 0.5;
      curtain *= 1.0 + ripple * lum * 0.18;

      // -- Composite --
      vec3 col = sky + curtain * 3.5;

      // -- Tone map - preserve delicate colors, prevent harsh clip --
      col = col / (col + vec3(0.55));
      col = pow(col, vec3(0.88));

      // -- Vignette - darkens edges so curtains read against darkness --
      float vign = 1.0 - smoothstep(0.3, 0.9, length((vUv - 0.5) * vec2(1.0, 0.7)) * 1.6);
      col *= mix(0.05, 1.0, vign);

      gl_FragColor = vec4(col, 1.0);
    }
  `;

  // ── Fade pass — applied to accumulation FBO each frame ──
  const fadeFS = `
    precision mediump float;
    varying vec2 vUv;
    void main(){ gl_FragColor = vec4(0.0, 0.0, 0.0, 0.028); }
  `;

  const dispProg = compile(quadVS, dispFS);
  const fadeProg = compile(quadVS, fadeFS);

  const accumU = gl.getUniformLocation(dispProg, 'accumTex');
  const tU     = gl.getUniformLocation(dispProg, 't');

  function bindQ(prog) {
    const l = gl.getAttribLocation(prog, 'pos');
    gl.bindBuffer(gl.ARRAY_BUFFER, qb);
    gl.enableVertexAttribArray(l);
    gl.vertexAttribPointer(l, 2, gl.FLOAT, false, 0, 0);
  }

  // ── Noise helpers (for magnetic field warp) ──
  function hash2(x, y) {
    const n = Math.sin(x * 127.1 + y * 311.7) * 43758.5453;
    return n - Math.floor(n);
  }
  function vnoise(x, y) {
    const ix = Math.floor(x), iy = Math.floor(y);
    const fx = x-ix, fy = y-iy;
    const ux = fx*fx*(3-2*fx), uy = fy*fy*(3-2*fy);
    return (
      hash2(ix,   iy  ) * (1-ux) * (1-uy) +
      hash2(ix+1, iy  ) * ux     * (1-uy) +
      hash2(ix,   iy+1) * (1-ux) * uy     +
      hash2(ix+1, iy+1) * ux     * uy
    );
  }

  // ── Source drift — global magnetic disturbance waves ──
  // Three slow sinusoidal waves shift the source curtain left/right
  function sourceWarp(sx, t) {
    return sx
      + Math.sin(sx * 2.1 + t * 0.07) * 0.18
      + Math.sin(sx * 4.3 - t * 0.11) * 0.08
      + Math.sin(sx * 1.1 + t * 0.04) * 0.12;
  }

  // Pre-allocated typed arrays — one set per spectral bucket, no GC pressure
  const pxA = new Float32Array(N), pyA = new Float32Array(N), brA = new Float32Array(N);
  const bCnt = [0, 0, 0, 0];

  let at = 0;

  let _raf;
  function draw() {
    at += 0.012;

    // Reset bucket counts
    bCnt[0]=0; bCnt[1]=0; bCnt[2]=0; bCnt[3]=0;

    // Temp per-bucket position arrays (reuse pxA/pyA/brA sequentially per hue)
    const bpx = [[],[],[],[]], bpy = [[],[],[],[]], bbr = [[],[],[],[]];

    for(let i = 0; i < N; i++) {
      const p = pstate[i];
      p.ph += 0.018;
      p.sx += Math.sin(at * 0.031 + i * 0.017) * 0.00015;
      p.sx = Math.max(-1.0, Math.min(1.0, p.sx));
      const wx = sourceWarp(p.sx, at);
      const noiseX = (vnoise(p.x * 3.0 + at * 0.12, p.y * 2.0) - 0.5) * 0.006;
      p.x = wx + Math.sin(p.ph * p.swayFreq) * p.swayAmp + noiseX;
      p.y -= p.spd;
      if(p.y < -1.05) {
        p.y = 0.98 + Math.random() * 0.12;
        p.sx = (Math.random() - 0.5) * 1.8;
        p.ph = Math.random() * Math.PI * 2;
      }
      const altBri = Math.max(0, (p.y + 1.0) / 2.0);
      const bri = 0.4 + altBri * 1.4;
      const h = p.hue;
      bpx[h].push(p.x); bpy[h].push(p.y); bbr[h].push(bri);
    }

    // ── Render to accumulation FBO ──
    gl.bindFramebuffer(gl.FRAMEBUFFER, accum.fbo);
    gl.viewport(0, 0, W, H);
    gl.useProgram(fadeProg);
    bindQ(fadeProg);
    gl.enable(gl.BLEND);
    gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);
    gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);

    gl.useProgram(ptProg);
    gl.blendFunc(gl.ONE, gl.ONE);

    for(let h = 0; h < 4; h++) {
      const cnt = bpx[h].length;
      if(!cnt) continue;
      for(let i=0;i<cnt;i++){pxA[i]=bpx[h][i];pyA[i]=bpy[h][i];brA[i]=bbr[h][i];}
      gl.bindBuffer(gl.ARRAY_BUFFER, pxBuf); gl.bufferSubData(gl.ARRAY_BUFFER, 0, pxA.subarray(0,cnt));
      gl.enableVertexAttribArray(pxLoc); gl.vertexAttribPointer(pxLoc, 1, gl.FLOAT, false, 0, 0);
      gl.bindBuffer(gl.ARRAY_BUFFER, pyBuf); gl.bufferSubData(gl.ARRAY_BUFFER, 0, pyA.subarray(0,cnt));
      gl.enableVertexAttribArray(pyLoc); gl.vertexAttribPointer(pyLoc, 1, gl.FLOAT, false, 0, 0);
      gl.bindBuffer(gl.ARRAY_BUFFER, brBuf); gl.bufferSubData(gl.ARRAY_BUFFER, 0, brA.subarray(0,cnt));
      gl.enableVertexAttribArray(brLoc); gl.vertexAttribPointer(brLoc, 1, gl.FLOAT, false, 0, 0);
      gl.uniform4f(colLoc, ...SPECTRA[h]);
      gl.drawArrays(gl.POINTS, 0, cnt);
    }

    // ── Display pass ──
    gl.bindFramebuffer(gl.FRAMEBUFFER, null);
    gl.viewport(0, 0, W, H);
    gl.disable(gl.BLEND);
    gl.useProgram(dispProg);
    bindQ(dispProg);
    gl.activeTexture(gl.TEXTURE0);
    gl.bindTexture(gl.TEXTURE_2D, accum.tex);
    gl.uniform1i(accumU, 0);
    gl.uniform1f(tU, at);
    gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);

    _raf = requestAnimationFrame(draw);
  }

  draw();


  // Stop RAF when card leaves viewport
  new IntersectionObserver(function(entries){
    if(!entries[0].isIntersecting) { cancelAnimationFrame(_raf); _raf = null; }
    else if(!_raf) { _raf = requestAnimationFrame(draw); }
  }, { rootMargin: '150px' }).observe(document.getElementById('aurora-canvas'));
})();
  }, { rootMargin: '150px' });
  _io.observe(_el);
})();


// ══════════════════════════════════════════════════════════════════
// AURORA 2 — Second Generation Magnetospheric Light Engine
// WebGL2 · dual-band curtains · HDR accumulation · substorm events
// Spec: aurora2-card-spec.md
// ══════════════════════════════════════════════════════════════════
(function(){
  var _el = document.getElementById('aurora2-canvas');
  if(!_el) return;
  var _io = new IntersectionObserver(function(entries){
    if(!entries[0].isIntersecting) return;
    _io.disconnect();
    (function(){
  const canvas = document.getElementById('aurora2-canvas');
  if(!canvas) return;

  const W = canvas.width  || 300;
  const H = canvas.height || 300;

  const gl = canvas.getContext('webgl2', {
    antialias:false, alpha:false,
    premultipliedAlpha:false, preserveDrawingBuffer:false
  });
  if(!gl) { canvas.parentElement.style.background='linear-gradient(180deg,#000510,#001a08)'; return; }

  const canHDR   = !!gl.getExtension('EXT_color_buffer_float');
  const I_FMT    = canHDR ? gl.RGBA16F : gl.RGBA8;
  const I_TYPE   = canHDR ? gl.HALF_FLOAT : gl.UNSIGNED_BYTE;
  const alphaBase= canHDR ? 0.082 : 0.019;

  // ── Palette ──
  const PAL = {
    sp: [
      [0.18, 0.94, 0.04],   // O 557.7nm — yellow-green
      [0.90, 0.08, 0.03],   // O 630.0nm — red
      [0.42, 0.10, 0.90],   // N 427.8nm — violet
      [0.04, 0.86, 0.80],   // N 520.0nm — teal
    ],
    fringe:  [0.06, 0.55, 0.35],
    skyBot:  [0.000, 0.010, 0.026],
    skyTop:  [0.000, 0.002, 0.010],
  };

  // ── Simulation parameters ──
  const S = {
    pc:2500, fs:1.00, ci:0.80, ds:0.55, as:0.45,
    b0b:1.00, b1b:0.65, b0w:0.80, b1w:1.20,
    br:1.20, sb:1.00, pk:0.62, df:0.62, bl:0.30, sa:1.10,
    st:260, vg:1.00,
  };

  // Species altitude offsets: green=ref, red=higher, violet=lowest, teal=slightly below
  const SPECIES_ALT = [0.0, 0.28, -0.22, -0.08];

  // Species distribution: 55% green, 20% red, 10% violet, 15% teal
  const N = S.pc;
  const sCounts = [
    Math.round(N * 0.55),
    Math.round(N * 0.20),
    Math.round(N * 0.10),
    0
  ];
  sCounts[3] = N - sCounts[0] - sCounts[1] - sCounts[2];
  const sStart = [
    0,
    sCounts[0],
    sCounts[0] + sCounts[1],
    sCounts[0] + sCounts[1] + sCounts[2]
  ];

  // ── Particle typed arrays (zero alloc in loop) ──
  const px_  = new Float32Array(N), py_  = new Float32Array(N);
  const psx_ = new Float32Array(N), pph_ = new Float32Array(N);
  const pfs_ = new Float32Array(N), psa_ = new Float32Array(N);
  const psf_ = new Float32Array(N);
  const pbn_ = new Uint8Array(N);
  const pvx_ = new Float32Array(N), page_= new Float32Array(N);
  const gpuBuf = new Float32Array(N * 4); // interleaved [x,y,life,band] stride=16

  // ── Noise ──
  function h2(x,y){ const n=Math.sin(x*127.1+y*311.7)*43758.5453; return n-Math.floor(n); }
  function vn(x,y){
    const ix=x|0,iy=y|0,fx=x-ix,fy=y-iy;
    const ux=fx*fx*(3-2*fx),uy=fy*fy*(3-2*fy);
    return h2(ix,iy)*(1-ux)*(1-uy)+h2(ix+1,iy)*ux*(1-uy)+
           h2(ix,iy+1)*(1-ux)*uy+h2(ix+1,iy+1)*ux*uy;
  }
  function fbm3(x,y){ return vn(x,y)*.500+vn(x*2,y*2)*.250+vn(x*4,y*4)*.125; }
  const EPS=0.004;
  let simT=0;
  function curlX(x,y){
    const tx=x*2+simT*.07,ty=y*2+simT*.04;
    return (fbm3(tx,ty+EPS)-fbm3(tx,ty-EPS))/(2*EPS);
  }

  // ── Field warp ──
  let autoB0Ph=0, autoB1Ph=Math.PI;
  function fieldWarpX(sx,band){
    const autoOff=band===0?Math.sin(autoB0Ph)*.07:Math.sin(autoB1Ph)*.07;
    const tw=Math.sin(sx*3.5+simT*1.1)*.06*S.fs;
    if(band===0) return Math.sin(sx*2.8+simT*.55)*.16*S.fs+Math.sin(sx*1.2+simT*.31)*.10*S.fs+autoOff+tw;
    return Math.sin(sx*5.5+simT*.88+2.1)*.08*S.fs+Math.sin(sx*2.6+simT*.53+1.4)*.06*S.fs+autoOff+tw*.6;
  }

  // ── Spawn ──
  function spawnAt(i,full){
    psx_[i]=Math.random()*2-1; px_[i]=psx_[i];
    pbn_[i]=Math.random()<0.65?0:1;
    pfs_[i]=0.65+Math.random()*0.70;
    psa_[i]=0.007+Math.random()*0.022;
    psf_[i]=0.35+Math.random()*1.75;
    pvx_[i]=0;
    const bOff=pbn_[i]===0?0:-0.26;
    if(full){ py_[i]=Math.random()*2.6-1.3+bOff; pph_[i]=Math.random()*6.283; page_[i]=Math.random(); }
    else     { py_[i]=1.08+Math.random()*0.20+bOff; pph_[i]=0; page_[i]=0; }
  }
  for(let i=0;i<N;i++) spawnAt(i,true);

  // ── Substorm ──
  let substormPower=0, substormFlash=0, nextSubstorm=30+Math.random()*60;
  function tickSubstorm(dt){
    substormPower*=Math.pow(0.988,dt*60);
    substormFlash*=Math.pow(0.88, dt*60);
    if(substormFlash<0.001) substormFlash=0;
    nextSubstorm-=dt;
    if(nextSubstorm<=0){ substormPower=1.0; substormFlash=1.0; nextSubstorm=30+Math.random()*60; }
  }

  // ── Particle tick ──
  function tick(dt){
    const dtS=dt*S.as;
    simT+=dtS; autoB0Ph+=dt*.055; autoB1Ph-=dt*.072;
    for(let i=0;i<N;i++){
      const tgt=psx_[i]+fieldWarpX(psx_[i],pbn_[i]);
      pvx_[i]=pvx_[i]*.955+curlX(px_[i],py_[i])*S.ci*S.fs*.0026;
      pph_[i]+=dtS*psf_[i];
      const sw=Math.sin(pph_[i])*psa_[i];
      px_[i]+=(tgt+sw-px_[i])*.012+pvx_[i]*dt*60;
      py_[i]-=pfs_[i]*S.ds*S.as*.40*dt;
      page_[i]+=dtS*.26;
      if(px_[i]<-1.18){px_[i]=-1.18;pvx_[i]*=-.4;}
      if(px_[i]> 1.18){px_[i]= 1.18;pvx_[i]*=-.4;}
      if(py_[i]<-1.18||page_[i]>=1.0) spawnAt(i,false);
      const bBr=pbn_[i]===0?S.b0b:S.b1b;
      gpuBuf[i*4]=px_[i]; gpuBuf[i*4+1]=py_[i];
      gpuBuf[i*4+2]=(1-page_[i])*bBr; gpuBuf[i*4+3]=pbn_[i];
    }
  }

  // ── Shaders (verbatim from spec) ──
  const VS_QUAD=`#version 300 es
    precision highp float;
    layout(location=0) in vec2 aP; out vec2 vU;
    void main(){ gl_Position=vec4(aP,0.,1.); vU=aP*.5+.5; }`;

  const VS_PART=`#version 300 es
    precision highp float;
    layout(location=0) in vec2  aPos;
    layout(location=1) in float aLife;
    layout(location=2) in float aBand;
    out float vY; out float vLife; out float vBand;
    void main(){
      gl_Position=vec4(aPos,0.,1.);
      gl_PointSize=2.8;
      vY=aPos.y*.5+.5; vLife=aLife; vBand=aBand;
    }`;

  const FS_PART=`#version 300 es
    precision highp float;
    in float vY; in float vLife; in float vBand;
    out vec4 f;
    uniform float uBright,uAlpha,uSubstorm,uAudBr;
    uniform vec3  uCurColor;
    uniform float uB0Peak,uB1Peak,uB0Wid,uB1Wid,uSpecAlt;
    void main(){
      vec2 d=gl_PointCoord-.5; float r=dot(d,d)*4.;
      if(r>1.) discard;
      float soft=1.-smoothstep(.04,1.,r);
      float peak=(vBand<.5?uB0Peak:uB1Peak)+uSpecAlt;
      float wid=vBand<.5?uB0Wid:uB1Wid;
      float lo=smoothstep(peak-.20,peak-.02,vY);
      float hi=exp(-pow(max(vY-peak,0.)*(4.8+wid*4.2),2.));
      float arc0=lo*hi;
      float pk2=peak+0.20;
      float lo2=smoothstep(pk2-.14,pk2-.01,vY);
      float hi2=exp(-pow(max(vY-pk2,0.)*(7.0+wid*5.0),2.));
      float arc1=lo2*hi2*0.28;
      float a=soft*vLife*uAlpha*uBright*(arc0+arc1)*uSubstorm*uAudBr;
      f=vec4(uCurColor*a,a);
    }`;

  const FS_FADE=`#version 300 es
    precision highp float;
    in vec2 vU; out vec4 f;
    uniform sampler2D uT; uniform float uFade;
    void main(){ f=texture(uT,vU)*uFade; }`;

  const FS_VBLUR=`#version 300 es
    precision highp float;
    in vec2 vU; out vec4 f;
    uniform sampler2D uT; uniform vec2 uRes; uniform float uSpread;
    void main(){
      vec4 c=vec4(0.); float tot=0., dy=uSpread/uRes.y;
      for(int i=-8;i<=8;i++){ float fi=float(i),w=exp(-fi*fi/18.);
        c+=texture(uT,vU+vec2(0.,fi*dy))*w; tot+=w; }
      f=c/tot;
    }`;

  const FS_HBLUR=`#version 300 es
    precision highp float;
    in vec2 vU; out vec4 f;
    uniform sampler2D uT; uniform vec2 uRes; uniform float uSpread;
    void main(){
      vec4 c=vec4(0.); float tot=0., dx=uSpread/uRes.x;
      for(int i=-4;i<=4;i++){ float fi=float(i),w=exp(-fi*fi/6.);
        c+=texture(uT,vU+vec2(fi*dx,0.))*w; tot+=w; }
      f=c/tot;
    }`;

  const FS_COMP=`#version 300 es
    precision highp float;
    in vec2 vU; out vec4 f;
    uniform sampler2D uSharp,uBlur;
    uniform float uDiff,uBright,uTime,uStar,uSat,uBloom,uVig,uFlash;
    uniform vec3  uSkyBot,uSkyTop,uFringe;
    float hash2(vec2 p){ vec2 q=fract(p*vec2(0.1031,0.1030)); q+=dot(q,q.yx+33.33); return fract((q.x+q.y)*q.x); }
    void main(){
      vec3 sh=texture(uSharp,vU).rgb, bl=texture(uBlur,vU).rgb;
      float sg=(1.-vU.y)*(1.-vU.y);
      vec3 sky=mix(uSkyTop,uSkyBot,sg);
      float df=clamp(uDiff*.9+.1,0.,1.);
      vec3 aurora=mix(sh,bl,df);
      sky+=bl*dot(bl,vec3(.2126,.7152,.0722))*uBright*0.20;
      float fLo=smoothstep(.38,.52,vU.y)*(1.-smoothstep(.52,.62,vU.y));
      float fLoBrt=dot(aurora,vec3(.2126,.7152,.0722));
      aurora+=uFringe*min(fLoBrt,0.25)*fLo*.35;
      vec3 col=sky+aurora*uBright*3.5+bl*uBloom*1.7;
      col=col/(col+1.);
      col=pow(max(col,vec3(0.)),vec3(.74));
      float lum=dot(col,vec3(.2126,.7152,.0722));
      col=mix(vec3(lum),col,uSat);
      vec2 q=vU-.5; col*=max(1.-dot(q,q)*2.2*uVig,0.);
      float ex=smoothstep(0.,.06,vU.x)*smoothstep(1.,.94,vU.x);
      col*=mix(.8,1.,ex);
      if(uStar>.0001){
        vec2 cell=floor(vU*vec2(300.,200.));
        float rnd=hash2(cell), sb=step(1.-uStar,rnd), brt=hash2(cell+.5);
        float tw=.6+.4*sin(uTime*(1.5+brt*5.));
        float aLum2=dot(col,vec3(.2126,.7152,.0722));
        col+=vec3(brt*.75*tw)*sb*max(1.-aLum2*8.,0.);
      }
      if(uFlash>.001){
        float tone=dot(col,vec3(.2126,.7152,.0722));
        col=mix(col,col+uFringe*tone*2.0,uFlash*.45);
        col=col/(col+1.);
      }
      f=vec4(col,1.);
    }`;

  // ── Compile ──
  function mkSh(t,s){ const x=gl.createShader(t); gl.shaderSource(x,s); gl.compileShader(x); return x; }
  function mkPg(vs,fs){ const p=gl.createProgram(); gl.attachShader(p,mkSh(gl.VERTEX_SHADER,vs)); gl.attachShader(p,mkSh(gl.FRAGMENT_SHADER,fs)); gl.linkProgram(p); return p; }
  const fadeProg  = mkPg(VS_QUAD, FS_FADE);
  const partProg  = mkPg(VS_PART, FS_PART);
  const vblurProg = mkPg(VS_QUAD, FS_VBLUR);
  const hblurProg = mkPg(VS_QUAD, FS_HBLUR);
  const compProg  = mkPg(VS_QUAD, FS_COMP);

  // ── FBOs ──
  function mkFBO(){
    const tex=gl.createTexture();
    gl.bindTexture(gl.TEXTURE_2D,tex);
    gl.texImage2D(gl.TEXTURE_2D,0,I_FMT,W,H,0,gl.RGBA,I_TYPE,null);
    gl.texParameteri(gl.TEXTURE_2D,gl.TEXTURE_MIN_FILTER,gl.LINEAR);
    gl.texParameteri(gl.TEXTURE_2D,gl.TEXTURE_MAG_FILTER,gl.LINEAR);
    gl.texParameteri(gl.TEXTURE_2D,gl.TEXTURE_WRAP_S,gl.CLAMP_TO_EDGE);
    gl.texParameteri(gl.TEXTURE_2D,gl.TEXTURE_WRAP_T,gl.CLAMP_TO_EDGE);
    const fbo=gl.createFramebuffer();
    gl.bindFramebuffer(gl.FRAMEBUFFER,fbo);
    gl.framebufferTexture2D(gl.FRAMEBUFFER,gl.COLOR_ATTACHMENT0,gl.TEXTURE_2D,tex,0);
    gl.bindFramebuffer(gl.FRAMEBUFFER,null);
    return{fbo,tex};
  }
  const accum=[mkFBO(),mkFBO()], vblurFBO=mkFBO(), hblurFBO=mkFBO();
  let rIdx=0, wIdx=1;
  for(const a of accum){ gl.bindFramebuffer(gl.FRAMEBUFFER,a.fbo); gl.clearColor(0,0,0,0); gl.clear(gl.COLOR_BUFFER_BIT); }
  gl.bindFramebuffer(gl.FRAMEBUFFER,null);

  // ── VAOs ──
  const quadVAO=gl.createVertexArray();
  gl.bindVertexArray(quadVAO);
  const qBuf=gl.createBuffer(); gl.bindBuffer(gl.ARRAY_BUFFER,qBuf);
  gl.bufferData(gl.ARRAY_BUFFER,new Float32Array([-1,-1,1,-1,-1,1,1,1]),gl.STATIC_DRAW);
  gl.enableVertexAttribArray(0); gl.vertexAttribPointer(0,2,gl.FLOAT,false,0,0);
  gl.bindVertexArray(null);

  const partVAO=gl.createVertexArray();
  gl.bindVertexArray(partVAO);
  const pBuf=gl.createBuffer(); gl.bindBuffer(gl.ARRAY_BUFFER,pBuf);
  gl.bufferData(gl.ARRAY_BUFFER,gpuBuf,gl.DYNAMIC_DRAW);
  gl.enableVertexAttribArray(0); gl.vertexAttribPointer(0,2,gl.FLOAT,false,16,0);
  gl.enableVertexAttribArray(1); gl.vertexAttribPointer(1,1,gl.FLOAT,false,16,8);
  gl.enableVertexAttribArray(2); gl.vertexAttribPointer(2,1,gl.FLOAT,false,16,12);
  gl.bindVertexArray(null);

  // ── Cache uniforms ──
  const U={
    fade_T:    gl.getUniformLocation(fadeProg,'uT'),
    fade_fade: gl.getUniformLocation(fadeProg,'uFade'),
    p_bright:  gl.getUniformLocation(partProg,'uBright'),
    p_alpha:   gl.getUniformLocation(partProg,'uAlpha'),
    p_sub:     gl.getUniformLocation(partProg,'uSubstorm'),
    p_audBr:   gl.getUniformLocation(partProg,'uAudBr'),
    p_color:   gl.getUniformLocation(partProg,'uCurColor'),
    p_b0pk:    gl.getUniformLocation(partProg,'uB0Peak'),
    p_b1pk:    gl.getUniformLocation(partProg,'uB1Peak'),
    p_b0w:     gl.getUniformLocation(partProg,'uB0Wid'),
    p_b1w:     gl.getUniformLocation(partProg,'uB1Wid'),
    p_sAlt:    gl.getUniformLocation(partProg,'uSpecAlt'),
    vb_T:      gl.getUniformLocation(vblurProg,'uT'),
    vb_res:    gl.getUniformLocation(vblurProg,'uRes'),
    vb_sp:     gl.getUniformLocation(vblurProg,'uSpread'),
    hb_T:      gl.getUniformLocation(hblurProg,'uT'),
    hb_res:    gl.getUniformLocation(hblurProg,'uRes'),
    hb_sp:     gl.getUniformLocation(hblurProg,'uSpread'),
    c_sharp:   gl.getUniformLocation(compProg,'uSharp'),
    c_blur:    gl.getUniformLocation(compProg,'uBlur'),
    c_diff:    gl.getUniformLocation(compProg,'uDiff'),
    c_bright:  gl.getUniformLocation(compProg,'uBright'),
    c_time:    gl.getUniformLocation(compProg,'uTime'),
    c_star:    gl.getUniformLocation(compProg,'uStar'),
    c_sat:     gl.getUniformLocation(compProg,'uSat'),
    c_bloom:   gl.getUniformLocation(compProg,'uBloom'),
    c_vig:     gl.getUniformLocation(compProg,'uVig'),
    c_flash:   gl.getUniformLocation(compProg,'uFlash'),
    c_skyBot:  gl.getUniformLocation(compProg,'uSkyBot'),
    c_skyTop:  gl.getUniformLocation(compProg,'uSkyTop'),
    c_fringe:  gl.getUniformLocation(compProg,'uFringe'),
  };

  // ── Pause logic ──
  let paused=false, wallT=0, last=0;
  document.addEventListener('visibilitychange',()=>{ paused=document.hidden; });
  const obs=new IntersectionObserver(e=>{ paused=!e[0].isIntersecting; },{threshold:0});
  obs.observe(canvas);

  function bindTex(u,tex){ gl.activeTexture(gl.TEXTURE0+u); gl.bindTexture(gl.TEXTURE_2D,tex); }
  function drawQuad(){ gl.bindVertexArray(quadVAO); gl.drawArrays(gl.TRIANGLE_STRIP,0,4); gl.bindVertexArray(null); }

  let _raf;
  function draw(now){
    requestAnimationFrame(draw);
    if(paused){last=now;return;}
    const dt=Math.min((now-last)/1000,0.033); last=now; wallT+=dt;

    tickSubstorm(dt);
    tick(dt);

    gl.bindBuffer(gl.ARRAY_BUFFER,pBuf);
    gl.bufferSubData(gl.ARRAY_BUFFER,0,gpuBuf);

    const pulse=0.80+0.20*Math.sin(wallT*0.42);
    const effBr=S.br*pulse;
    const effSub=S.sb*(1+substormPower*2.2);

    gl.viewport(0,0,W,H);

    // Pass 1 — FADE
    gl.bindFramebuffer(gl.FRAMEBUFFER,accum[wIdx].fbo);
    gl.disable(gl.BLEND);
    gl.useProgram(fadeProg);
    bindTex(0,accum[rIdx].tex); gl.uniform1i(U.fade_T,0); gl.uniform1f(U.fade_fade,0.972);
    drawQuad();

    // Pass 2 — PARTICLES
    gl.enable(gl.BLEND); gl.blendFunc(gl.ONE,gl.ONE);
    gl.useProgram(partProg);
    gl.uniform1f(U.p_bright,effBr); gl.uniform1f(U.p_alpha,alphaBase);
    gl.uniform1f(U.p_sub,effSub);   gl.uniform1f(U.p_audBr,1.0);
    gl.uniform1f(U.p_b0pk,S.pk);    gl.uniform1f(U.p_b1pk,S.pk-0.26);
    gl.uniform1f(U.p_b0w,S.b0w);    gl.uniform1f(U.p_b1w,S.b1w);
    gl.bindVertexArray(partVAO);
    for(let s=0;s<4;s++){
      gl.uniform3f(U.p_color,PAL.sp[s][0],PAL.sp[s][1],PAL.sp[s][2]);
      gl.uniform1f(U.p_sAlt,SPECIES_ALT[s]);
      gl.drawArrays(gl.POINTS,sStart[s],sCounts[s]);
    }
    gl.bindVertexArray(null);
    gl.disable(gl.BLEND);
    const tmp=rIdx; rIdx=wIdx; wIdx=tmp;

    // Pass 3 — VBLUR
    gl.bindFramebuffer(gl.FRAMEBUFFER,vblurFBO.fbo);
    gl.useProgram(vblurProg);
    bindTex(0,accum[rIdx].tex); gl.uniform1i(U.vb_T,0);
    gl.uniform2f(U.vb_res,W,H); gl.uniform1f(U.vb_sp,0.6+S.df*4.0);
    drawQuad();

    // Pass 4 — HBLUR
    gl.bindFramebuffer(gl.FRAMEBUFFER,hblurFBO.fbo);
    gl.useProgram(hblurProg);
    bindTex(0,vblurFBO.tex); gl.uniform1i(U.hb_T,0);
    gl.uniform2f(U.hb_res,W,H); gl.uniform1f(U.hb_sp,0.5+S.df*7.0);
    drawQuad();

    // Pass 5 — COMPOSITE
    gl.bindFramebuffer(gl.FRAMEBUFFER,null);
    gl.useProgram(compProg);
    bindTex(0,accum[rIdx].tex); bindTex(1,hblurFBO.tex);
    gl.uniform1i(U.c_sharp,0); gl.uniform1i(U.c_blur,1);
    gl.uniform1f(U.c_diff,  S.df);
    gl.uniform1f(U.c_bright,effBr);
    gl.uniform1f(U.c_time,  wallT);
    gl.uniform1f(U.c_star,  S.st/86400.0);
    gl.uniform1f(U.c_sat,   S.sa);
    gl.uniform1f(U.c_bloom, S.bl);
    gl.uniform1f(U.c_vig,   S.vg);
    gl.uniform1f(U.c_flash, substormFlash);
    gl.uniform3f(U.c_skyBot,...PAL.skyBot);
    gl.uniform3f(U.c_skyTop,...PAL.skyTop);
    gl.uniform3f(U.c_fringe,...PAL.fringe);
    drawQuad();
  }

  _raf = requestAnimationFrame(draw);


  // Stop RAF when card leaves viewport
  new IntersectionObserver(function(entries){
    if(!entries[0].isIntersecting) { cancelAnimationFrame(_raf); _raf = null; }
    else if(!_raf) { _raf = requestAnimationFrame(draw); }
  }, { rootMargin: '150px' }).observe(document.getElementById('aurora2-canvas'));
})();
  }, { rootMargin: '150px' });
  _io.observe(_el);
})();

// ══════════════════════════════════════════════════════════════════
// CHROMA — Caustics Engine Card Preview
// ══════════════════════════════════════════════════════════════════
(function(){
  var _el = document.getElementById('chroma-canvas');
  if(!_el) return;
  var _io = new IntersectionObserver(function(entries){
    if(!entries[0].isIntersecting) return;
    _io.disconnect();
    (function(){
  const canvas = document.getElementById('chroma-canvas');
  if(!canvas) return;
  const gl = canvas.getContext('webgl', {antialias:false, alpha:false, premultipliedAlpha:false});
  if(!gl) return;
  const W = 300, H = 300;
  gl.viewport(0, 0, W, H);

  const VS = `attribute vec2 pos; varying vec2 vUv;
    void main(){ vUv=pos*.5+.5; gl_Position=vec4(pos,0,1); }`;

  const FS = `
    precision highp float;
    varying vec2 vUv;
    uniform float t;

    #define PI  3.14159265
    #define TAU 6.28318530

    // value noise
    float h21(vec2 p){ p=fract(p*vec2(127.1,311.7)); p+=dot(p,p+17.5); return fract(p.x*p.y); }
    float vn(vec2 p){
      vec2 i=floor(p),f=fract(p); f=f*f*(3.-2.*f);
      return mix(mix(h21(i),h21(i+vec2(1,0)),f.x),mix(h21(i+vec2(0,1)),h21(i+vec2(1,1)),f.x),f.y);
    }
    float fbm(vec2 p){ return vn(p)*.5+vn(p*2.1+1.3)*.25+vn(p*4.3+2.7)*.125; }

    // prism hue -> rgb
    vec3 prism(float h){
      float h6=fract(h)*6.;
      return clamp(vec3(abs(h6-3.)-1., 2.-abs(h6-2.), 2.-abs(h6-4.)),0.,1.);
    }

    // two-pass refraction warp
    vec2 warp(vec2 uv, float s, float tm){
      vec2 w1=vec2(sin(uv.y*TAU*3.+tm*.7),sin(uv.x*TAU*3.-tm*.5))*s;
      vec2 uv2=uv+w1;
      vec2 w2=vec2(sin(uv2.y*TAU*5.1+tm*1.1+.8),sin(uv2.x*TAU*5.1-tm*.9+1.2))*s*.45;
      return uv2+w2;
    }

    // 4-source interference
    float interf(vec2 uv, float tm){
      float f=0.;
      f+=sin(length(uv-vec2(.25,.25))*TAU*5.4-tm*2.2);
      f+=sin(length(uv-vec2(.75,.30))*TAU*4.9-tm*1.7+.5);
      f+=sin(length(uv-vec2(.50,.75))*TAU*5.8-tm*2.5+1.1);
      f+=sin(length(uv-vec2(.20,.65))*TAU*4.2-tm*1.9+2.1);
      return f*.25;
    }

    // caustic sharpening
    float caust(float w){ return pow(abs(sin(w*PI)),2.2); }

    void main(){
      float tm=t*.35;

      // warp uvs with slight CA offset per channel
      vec2 uvG =warp(vUv,          .036,tm);
      vec2 uvR =warp(vUv+vec2( .003,0),.036,tm+.04);
      vec2 uvB =warp(vUv+vec2(-.003,0),.036,tm-.04);

      float wG=interf(uvG,tm);
      float wR=interf(uvR,tm);
      float wB=interf(uvB,tm);

      float cG=caust(wG), cR=caust(wR), cB=caust(wB);

      // noise veins
      float vein=pow(fbm(uvG*4.5+tm*.15),1.6)*.55;
      cG+=vein; cR+=vein*.9; cB+=vein*1.1;

      // prism color
      float hue=fract(wG*.5+.5+length(vUv-.5)*.6+tm*.035);
      vec3 sp=prism(hue), sp2=prism(hue+.33);

      vec3 col;
      col.r=cR*mix(sp.r,sp2.r,.4);
      col.g=cG*mix(sp.g,sp2.g,.4);
      col.b=cB*mix(sp.b,sp2.b,.4);

      // bloom
      col+=prism(hue+.15)*pow(abs(sin(wG*PI)),.77)*.35;

      // brightness + tone map + gamma
      col*=1.2;
      col=col/(col+.65);
      col=pow(max(col,0.),vec3(.85));

      // vignette
      float vign=1.-smoothstep(.3,.9,length(vUv-.5)*1.55);
      col*=vign;

      gl_FragColor=vec4(col,1.);
    }
  `;

  function mkSh(type, src){
    const s=gl.createShader(type);
    gl.shaderSource(s,src); gl.compileShader(s);
    return s;
  }
  const prog=gl.createProgram();
  gl.attachShader(prog,mkSh(gl.VERTEX_SHADER,VS));
  gl.attachShader(prog,mkSh(gl.FRAGMENT_SHADER,FS));
  gl.linkProgram(prog);
  if(!gl.getProgramParameter(prog,gl.LINK_STATUS)){
    console.error('CHROMA shader link failed:',gl.getProgramInfoLog(prog));
    return;
  }
  gl.useProgram(prog);

  const buf=gl.createBuffer();
  gl.bindBuffer(gl.ARRAY_BUFFER,buf);
  gl.bufferData(gl.ARRAY_BUFFER,new Float32Array([-1,-1,1,-1,-1,1,1,1]),gl.STATIC_DRAW);
  const pL=gl.getAttribLocation(prog,'pos');
  gl.enableVertexAttribArray(pL);
  gl.vertexAttribPointer(pL,2,gl.FLOAT,false,0,0);

  const tU=gl.getUniformLocation(prog,'t');
  let ct=0;
  let _raf;
  function draw(){
    ct+=0.016;
    gl.uniform1f(tU,ct);
    gl.drawArrays(gl.TRIANGLE_STRIP,0,4);
    _raf = requestAnimationFrame(draw);
  }
  draw();


  // Stop RAF when card leaves viewport
  new IntersectionObserver(function(entries){
    if(!entries[0].isIntersecting) { cancelAnimationFrame(_raf); _raf = null; }
    else if(!_raf) { _raf = requestAnimationFrame(draw); }
  }, { rootMargin: '150px' }).observe(document.getElementById('chroma-canvas'));
})();
  }, { rootMargin: '150px' });
  _io.observe(_el);
})();


// ══════════════════════════════════════════════════════════════════
// THREAD — Curl Noise Flow Field Card Preview
// ══════════════════════════════════════════════════════════════════
(function(){
  var _el = document.getElementById('thread-card-canvas');
  if(!_el) return;
  var _io = new IntersectionObserver(function(entries){
    if(!entries[0].isIntersecting) return;
    _io.disconnect();
    (function(){
const P = {
  fieldStrength: 0.85,  flowSpeed: 0.85,   curvature: 1.8,
  fieldScale:    0.7,   turbulence: 0.12,  density:   600,
  steps:         75,    stepSize:  3.2,    persistence: 0.962,
  lineAlpha:     0.10,  brightness: 1.0,   colorMode: 1,
  bgHue:         220,   bgLightness: 1.2,  bgSaturation: 60,
  bassAmt:       0,     midAmt: 0,         trebleAmt: 0,
  mouseInfluence: 0,    mouseX: 0,         mouseY: 0,   mouseActive: false,
};

const canvas = document.getElementById('thread-card-canvas');
if (!canvas) return;
const ctx = canvas.getContext('2d');
let W = 0, H = 0;
let offscreen, octx;
let seeds = [];

function resize() {
  const dpr = Math.min(window.devicePixelRatio || 1, 1);
  const rect = canvas.parentElement.getBoundingClientRect();
  W = Math.floor(rect.width  * dpr);
  H = Math.floor(rect.height * dpr);
  if (!W || !H) return;
  canvas.width = W; canvas.height = H;
  const prev = offscreen;
  if (typeof OffscreenCanvas !== 'undefined') {
    offscreen = new OffscreenCanvas(W, H);
  } else {
    offscreen = document.createElement('canvas');
    offscreen.width = W; offscreen.height = H;
  }
  octx = offscreen.getContext('2d');
  octx.fillStyle = `hsl(${P.bgHue},${P.bgSaturation}%,${P.bgLightness}%)`;
  octx.fillRect(0, 0, W, H);
  if (prev) octx.drawImage(prev, 0, 0, W, H);
  regenSeeds();
}
const ro = new ResizeObserver(resize);
ro.observe(canvas.parentElement);
resize();

function hash(x, y) {
  let n = Math.sin(x * 127.1 + y * 311.7) * 43758.5453;
  return n - Math.floor(n);
}
function noise(x, y) {
  const ix = Math.floor(x), iy = Math.floor(y);
  const fx = x - ix, fy = y - iy;
  const ux = fx*fx*(3-2*fx), uy = fy*fy*(3-2*fy);
  return hash(ix,iy)*(1-ux)*(1-uy) + hash(ix+1,iy)*ux*(1-uy)
       + hash(ix,iy+1)*(1-ux)*uy   + hash(ix+1,iy+1)*ux*uy;
}
function fbm2(x, y) {
  return noise(x, y)*0.5 + noise(x*2.1, y*2.1)*0.25 + noise(x*4.2, y*4.2)*0.125;
}

function field(px, py, t) {
  const sc   = P.fieldScale;
  const curv = P.curvature;
  const turb = P.turbulence;
  const nx = sc * px, ny = sc * py;
  const eps = 0.008;
  const n0  = fbm2(nx,      ny     );
  const n1  = fbm2(nx+eps,  ny     );
  const n2  = fbm2(nx,      ny+eps );
  const curlX = -(n2 - n0) / eps;
  const curlY =  (n1 - n0) / eps;
  const anaX = Math.sin(py * sc * curv + t * 0.65) + Math.cos(px * sc * 0.6 - t * 0.4);
  const anaY = Math.cos(px * sc * curv - t * 0.5)  - Math.sin(py * sc * 0.75 + t * 0.3);
  const tx = (noise(nx*3.0 + t*0.22, ny*3.0) - 0.5) * turb;
  const ty = (noise(nx*3.0, ny*3.0 + t*0.22 + 5.2) - 0.5) * turb;
  return [
    (curlX*0.55 + anaX*0.45 + tx) * P.fieldStrength,
    (curlY*0.55 + anaY*0.45 + ty) * P.fieldStrength,
  ];
}

function lineColor(speed, t, angle) {
  const v = Math.min(speed * 0.9, 1);
  const a = P.lineAlpha;
  const dOff = angle !== undefined ? (angle / Math.PI) * 30 : 0;
  const h = 200 + v*80 + dOff; const l = 14+v*55;
  return `hsla(${h|0},58%,${l|0}%,${a})`;
}

const aud = { amplitude:0, bass:0, mid:0, treble:0 };

function regenSeeds() {
  seeds = [];
  const n = P.density | 0;
  for (let i = 0; i < n; i++) seeds.push(Math.random() * W, Math.random() * H);
}

let t = 0, lastTS = 0, seedIdx = 0;
const BATCH = 80;

let _raf;
  function frame(ts) {
  requestAnimationFrame(frame);
  if (!offscreen) return;
  const dt = Math.min((ts - lastTS) / 1000, 0.05);
  lastTS = ts;
  t += dt * 0.36;

  const fade = 1 - P.persistence;
  octx.globalAlpha = fade;
  octx.fillStyle = `hsl(${P.bgHue|0},${P.bgSaturation|0}%,${P.bgLightness}%)`;
  octx.fillRect(0, 0, W, H);
  octx.globalAlpha = 1.0;

  const ss  = P.stepSize * P.flowSpeed;
  const asp = W / H;
  const numSeeds = (seeds.length / 2) | 0;

  for (let k = 0; k < BATCH; k++) {
    if (numSeeds === 0) break;
    const si = (seedIdx * 2) % seeds.length;
    let px = seeds[si], py = seeds[si + 1];
    let nx = (px / W * 2 - 1) * asp;
    let ny =  py / H * 2 - 1;

    octx.beginPath();
    octx.moveTo(px, py);

    let totalSpd = 0, totalAngle = 0;
    let prevX = px, prevY = py;

    for (let s2 = 0; s2 < P.steps; s2++) {
      const [fx, fy] = field(nx, ny, t);
      const spd = Math.sqrt(fx*fx + fy*fy);
      totalSpd += spd;
      totalAngle += Math.atan2(fy, fx);
      nx += fx * ss / W * 2 * asp;
      ny += fy * ss / H * 2;
      let sx = (nx / asp + 1) * 0.5 * W;
      let sy = (ny       + 1) * 0.5 * H;
      if (Math.abs(sx - prevX) > W * 0.4 || Math.abs(sy - prevY) > H * 0.4) {
        sx = ((sx % W) + W) % W;
        sy = ((sy % H) + H) % H;
        octx.moveTo(sx, sy);
      } else {
        octx.lineTo(sx, sy);
      }
      prevX = sx; prevY = sy;
      nx = (sx / W * 2 - 1) * asp;
      ny =  sy / H * 2 - 1;
    }

    const avgSpd = totalSpd / P.steps;
    const avgAngle = totalAngle / P.steps;
    const velWidth = 0.5 + avgSpd * 1.2;
    const savedAlpha = P.lineAlpha;
    P.lineAlpha = P.lineAlpha * P.brightness;
    octx.strokeStyle = lineColor(avgSpd, t, avgAngle);
    P.lineAlpha = savedAlpha;
    octx.lineWidth = Math.min(velWidth, 2.5);
    octx.stroke();

    seeds[si]   = Math.random() * W;
    seeds[si+1] = Math.random() * H;
    seedIdx = (seedIdx + 1) % numSeeds;
  }

  ctx.clearRect(0, 0, W, H);
  ctx.drawImage(offscreen, 0, 0);
}

_raf = requestAnimationFrame(frame);


  // Stop RAF when card leaves viewport
  new IntersectionObserver(function(entries){
    if(!entries[0].isIntersecting) { cancelAnimationFrame(_raf); _raf = null; }
    else if(!_raf) { _raf = requestAnimationFrame(frame); }
  }, { rootMargin: '150px' }).observe(document.getElementById('thread-card-canvas'));
})();
  }, { rootMargin: '150px' });
  _io.observe(_el);
})();

// ══════════════════════════════════════════════════════════════════
// ECHO — Chromostereopsis Feedback Card Preview
// ══════════════════════════════════════════════════════════════════
(function(){
  var _el = document.getElementById('echo-card-canvas');
  if(!_el) return;
  var _io = new IntersectionObserver(function(entries){
    if(!entries[0].isIntersecting) return;
    _io.disconnect();
    (function(){
  const canvas = document.getElementById('echo-card-canvas');
  if (!canvas) return;
  const gl = canvas.getContext('webgl2', { antialias:false, alpha:false });
  if (!gl) { canvas.parentElement.style.background='linear-gradient(135deg,#050510,#0a0a2a)'; return; }
  gl.getExtension('EXT_color_buffer_float');

  const DPR = Math.min(window.devicePixelRatio || 1, 1);
  function resize() {
    const rect = canvas.parentElement.getBoundingClientRect();
    canvas.width  = Math.floor(rect.width  * DPR);
    canvas.height = Math.floor(rect.height * DPR);
  }
  resize();
  const ro = new ResizeObserver(() => { resize(); initFBOs(); });
  ro.observe(canvas.parentElement);

  const P = {
    feedback:0.94, decay:0.971, blur:0.18, distort:0.004,
    scale:2.2, speed:0.22, bright:1.15, floor:0.014,
    decayR:0.998, decayG:0.91, decayB:0.82,
    temporalJitter:0.12, seedDensity:0.94, seedBrightness:0.45,
    zoom:1.0, timeScale:1.0, rotSpeed:0.0,
  };

  const VS = `#version 300 es
in vec2 a_pos; out vec2 v_uv;
void main(){ v_uv=a_pos*.5+.5; gl_Position=vec4(a_pos,0.,1.); }`;

  const FS_FB = `#version 300 es
precision highp float;
in vec2 v_uv; out vec4 fragColor;
uniform sampler2D u_prev;
uniform float u_feedback,u_decay,u_blur,u_distort,u_scale,u_time,u_speed;
uniform float u_floor,u_zoom,u_rotSpeed,u_temporalJitter;
uniform float u_decayR,u_decayG,u_decayB,u_seedDensity,u_seedBrightness;
uniform vec2 u_res;
void main(){
  vec2 uv=v_uv; float t=u_time*u_speed;
  vec2 c=uv-0.5;
  float rc=cos(u_time*u_rotSpeed),rs=sin(u_time*u_rotSpeed);
  c=vec2(rc*c.x-rs*c.y,rs*c.x+rc*c.y);
  vec2 wuv=c+0.5;
  wuv+=u_distort*vec2(sin(wuv.y*u_scale+t),sin(wuv.x*u_scale-t*0.7));
  wuv=(wuv-0.5)/u_zoom+0.5;
  wuv=clamp(wuv,0.001,0.999);
  float jitter=u_temporalJitter*0.003;
  vec2 juv=clamp(wuv+vec2(sin(u_time*127.3+uv.x*43.1)*jitter,cos(u_time*91.7+uv.y*57.3)*jitter),0.001,0.999);
  float bw=u_blur*0.004;
  vec4 prev;
  if(bw>0.0005){
    prev =texture(u_prev,juv)*0.36;
    prev+=texture(u_prev,juv+vec2(bw,0.))*0.16;
    prev+=texture(u_prev,juv-vec2(bw,0.))*0.16;
    prev+=texture(u_prev,juv+vec2(0.,bw))*0.16;
    prev+=texture(u_prev,juv-vec2(0.,bw))*0.16;
  } else { prev=texture(u_prev,juv); }
  float base=u_feedback*u_decay;
  vec4 mem=vec4(prev.r*base*u_decayR,prev.g*base*u_decayG,prev.b*base*u_decayB,1.0);
  float brightness=dot(mem.rgb,vec3(0.299,0.587,0.114));
  float seed=0.0;
  if(brightness<u_floor){
    float sx=sin(uv.x*47.3+u_time*0.7)*sin(uv.y*31.9-u_time*0.5);
    seed=step(u_seedDensity,abs(sx))*u_seedBrightness;
  }
  vec2 src=vec2(0.5+0.28*sin(u_time*0.17),0.5+0.22*cos(u_time*0.23));
  float d=length(uv-src);
  float autoE=exp(-d*14.0)*0.18*(0.5+0.5*sin(u_time*0.9));
  vec4 current=mem;
  current.rgb+=seed+autoE;
  current.rgb=clamp(current.rgb,0.0,1.0);
  current.a=1.0;
  fragColor=current;
}`;

  const FS_DISP = `#version 300 es
precision highp float;
in vec2 v_uv; out vec4 fragColor;
uniform sampler2D u_tex;
uniform float u_time,u_bright;
float hash(vec2 p){ return fract(sin(dot(p,vec2(127.1,311.7)))*43758.5453); }
void main(){
  vec4 raw=texture(u_tex,v_uv);
  float v=dot(raw.rgb,vec3(0.299,0.587,0.114));
  float et=clamp(v*1.15,0.0,1.0);
  vec3 e0=vec3(0.),e1=vec3(.35,0.,0.),e2=vec3(.9,.25,0.),e3=vec3(1.,.75,.1),e4=vec3(1.,.97,.88);
  vec3 col=mix(mix(mix(mix(e0,e1,clamp(et*4.,0.,1.)),e2,clamp(et*4.-1.,0.,1.)),e3,clamp(et*4.-2.,0.,1.)),e4,clamp(et*4.-3.,0.,1.));
  col*=u_bright;
  float luma=dot(col,vec3(0.299,0.587,0.114));
  col+=(hash(v_uv+fract(u_time*0.01))-0.5)*0.022*clamp(luma*3.0,0.0,1.0);
  vec2 vc=v_uv-0.5;
  col*=clamp(1.0-dot(vc,vc)*1.6,0.0,1.0);
  fragColor=vec4(clamp(col,0.,1.),1.0);
}`;

  function compile(type, src) {
    const s = gl.createShader(type);
    gl.shaderSource(s, src); gl.compileShader(s);
    if (!gl.getShaderParameter(s, gl.COMPILE_STATUS)) console.error('ECHO shader:', gl.getShaderInfoLog(s));
    return s;
  }
  function program(vs, fs) {
    const p = gl.createProgram();
    gl.attachShader(p, compile(gl.VERTEX_SHADER, vs));
    gl.attachShader(p, compile(gl.FRAGMENT_SHADER, fs));
    gl.linkProgram(p); return p;
  }
  const pFB = program(VS, FS_FB), pDisp = program(VS, FS_DISP);

  function makeVAO(prog) {
    const vao = gl.createVertexArray(); gl.bindVertexArray(vao);
    const buf = gl.createBuffer(); gl.bindBuffer(gl.ARRAY_BUFFER, buf);
    gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([-1,-1,1,-1,-1,1,1,1]), gl.STATIC_DRAW);
    const loc = gl.getAttribLocation(prog, 'a_pos');
    gl.enableVertexAttribArray(loc); gl.vertexAttribPointer(loc, 2, gl.FLOAT, false, 0, 0);
    return vao;
  }
  const vaoFB = makeVAO(pFB), vaoDisp = makeVAO(pDisp);
  gl.bindVertexArray(null);

  let fbos = [];
  function makeFBO() {
    const tex = gl.createTexture(); gl.bindTexture(gl.TEXTURE_2D, tex);
    gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, canvas.width, canvas.height, 0, gl.RGBA, gl.UNSIGNED_BYTE, null);
    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
    const fbo = gl.createFramebuffer(); gl.bindFramebuffer(gl.FRAMEBUFFER, fbo);
    gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, tex, 0);
    return { tex, fbo };
  }
  function initFBOs() {
    fbos.forEach(f => { gl.deleteTexture(f.tex); gl.deleteFramebuffer(f.fbo); });
    fbos = [makeFBO(), makeFBO()];
    gl.bindFramebuffer(gl.FRAMEBUFFER, null);
  }
  initFBOs();

  function u(prog, name) { return gl.getUniformLocation(prog, name); }
  const UFB = {
    prev:u(pFB,'u_prev'), feedback:u(pFB,'u_feedback'), decay:u(pFB,'u_decay'),
    blur:u(pFB,'u_blur'), distort:u(pFB,'u_distort'), scale:u(pFB,'u_scale'),
    time:u(pFB,'u_time'), speed:u(pFB,'u_speed'), floor:u(pFB,'u_floor'),
    zoom:u(pFB,'u_zoom'), rotSpeed:u(pFB,'u_rotSpeed'), temporalJitter:u(pFB,'u_temporalJitter'),
    decayR:u(pFB,'u_decayR'), decayG:u(pFB,'u_decayG'), decayB:u(pFB,'u_decayB'),
    seedDensity:u(pFB,'u_seedDensity'), seedBrightness:u(pFB,'u_seedBrightness'),
    res:u(pFB,'u_res'),
  };
  const UD = { tex:u(pDisp,'u_tex'), time:u(pDisp,'u_time'), bright:u(pDisp,'u_bright') };

  let ping = 0, time = 0, last = 0;
  let _raf;
  function render(ts) {
    requestAnimationFrame(render);
    const dt = Math.min((ts - last) / 1000, 0.05); last = ts;
    time += dt * P.timeScale;
    const src = fbos[ping], dst = fbos[1-ping]; ping = 1-ping;
    gl.bindVertexArray(vaoFB);
    gl.viewport(0, 0, canvas.width, canvas.height);
    gl.bindFramebuffer(gl.FRAMEBUFFER, dst.fbo);
    gl.useProgram(pFB);
    gl.activeTexture(gl.TEXTURE0); gl.bindTexture(gl.TEXTURE_2D, src.tex);
    gl.uniform1i(UFB.prev, 0);
    gl.uniform1f(UFB.feedback, P.feedback); gl.uniform1f(UFB.decay, P.decay);
    gl.uniform1f(UFB.blur, P.blur);         gl.uniform1f(UFB.distort, P.distort);
    gl.uniform1f(UFB.scale, P.scale);       gl.uniform1f(UFB.time, time);
    gl.uniform1f(UFB.speed, P.speed);       gl.uniform1f(UFB.floor, P.floor);
    gl.uniform1f(UFB.zoom, P.zoom);         gl.uniform1f(UFB.rotSpeed, P.rotSpeed);
    gl.uniform1f(UFB.temporalJitter, P.temporalJitter);
    gl.uniform1f(UFB.decayR, P.decayR);     gl.uniform1f(UFB.decayG, P.decayG);
    gl.uniform1f(UFB.decayB, P.decayB);
    gl.uniform1f(UFB.seedDensity, P.seedDensity);
    gl.uniform1f(UFB.seedBrightness, P.seedBrightness);
    gl.uniform2f(UFB.res, canvas.width, canvas.height);
    gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
    gl.bindVertexArray(vaoDisp);
    gl.bindFramebuffer(gl.FRAMEBUFFER, null);
    gl.useProgram(pDisp);
    gl.activeTexture(gl.TEXTURE0); gl.bindTexture(gl.TEXTURE_2D, dst.tex);
    gl.uniform1i(UD.tex, 0);
    gl.uniform1f(UD.time, time);
    gl.uniform1f(UD.bright, P.bright);
    gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
  }
  _raf = requestAnimationFrame(render);


  // Stop RAF when card leaves viewport
  new IntersectionObserver(function(entries){
    if(!entries[0].isIntersecting) { cancelAnimationFrame(_raf); _raf = null; }
    else if(!_raf) { _raf = requestAnimationFrame(render); }
  }, { rootMargin: '150px' }).observe(document.getElementById('echo-card-canvas'));
})();
  }, { rootMargin: '150px' });
  _io.observe(_el);
})();

// ══════════════════════════════════════════════════════════════════
// GLITCH — Datamosh Feedback Card Preview
// ══════════════════════════════════════════════════════════════════
(function(){
  var _el = document.getElementById('glitch-card-canvas');
  if(!_el) return;
  var _io = new IntersectionObserver(function(entries){
    if(!entries[0].isIntersecting) return;
    _io.disconnect();
    (function(){
  const canvas = document.getElementById('glitch-card-canvas');
  if (!canvas) return;
  const gl = canvas.getContext('webgl2', { antialias:false, alpha:false });
  if (!gl) { canvas.parentElement.style.background='linear-gradient(135deg,#050505,#0f0505)'; return; }

  const DPR = Math.min(window.devicePixelRatio || 1, 1);
  function resize() {
    const rect = canvas.parentElement.getBoundingClientRect();
    canvas.width  = Math.floor(rect.width  * DPR);
    canvas.height = Math.floor(rect.height * DPR);
  }
  resize();
  const ro = new ResizeObserver(() => { resize(); initFBOs(); });
  ro.observe(canvas.parentElement);

  const VS = `#version 300 es
in vec2 a_pos; out vec2 v_uv;
void main(){ v_uv = a_pos * 0.5 + 0.5; gl_Position = vec4(a_pos, 0., 1.); }`;

  // Feedback pass: datamosh block displacement + pixel-sort columns
  const FS_FB = `#version 300 es
precision highp float;
in vec2 v_uv; out vec4 fragColor;
uniform sampler2D u_prev;
uniform float u_time;
uniform vec2 u_res;

float hash11(float p){ return fract(sin(p * 127.1) * 43758.5453); }
float hash21(vec2 p){ return fract(sin(dot(p, vec2(127.1, 311.7))) * 43758.5453); }

void main(){
  vec2 uv = v_uv;
  float t = u_time;

  // -- Block displacement (datamosh core) --------------------------
  // Divide screen into blocks; each block drifts independently
  float bSize = 0.045;
  vec2 blockID = floor(uv / bSize);
  float bn = hash21(blockID + floor(t * 0.4));
  float bn2 = hash21(blockID * 1.7 + floor(t * 0.15 + 3.1));

  // Occasional block "throw" - most blocks still, some fly far
  float throwChance = step(0.91, bn);
  float throwDist   = throwChance * (bn2 * 2.0 - 1.0) * 0.18;
  float driftX = throwDist * sign(hash21(blockID + 0.5) - 0.5);
  float driftY = throwDist * 0.3 * (hash21(blockID * 2.3) - 0.5);

  // Subtle continuous micro-drift on all blocks
  driftX += (hash21(blockID + floor(t * 2.0)) - 0.5) * 0.003;
  driftY += (hash21(blockID * 1.3 + floor(t * 1.7 + 1.0)) - 0.5) * 0.002;

  vec2 moshUV = fract(uv + vec2(driftX, driftY));

  // -- Column pixel-sort smear --------------------------------------
  // Pick columns that are "sorting" this frame
  float col = floor(uv.x * u_res.x);
  float colHash = hash11(col + floor(t * 0.25));
  float sorting = step(0.85, colHash);

  // Within a sorting column, smear upward by luminance-weighted offset
  vec4 here = texture(u_prev, moshUV);
  float lum = dot(here.rgb, vec3(0.299, 0.587, 0.114));
  float smearY = sorting * lum * 0.06 * sign(hash11(col * 0.37) - 0.5);
  vec2 sortUV = fract(moshUV + vec2(0.0, smearY));

  // -- Channel phase tear -------------------------------------------
  // Each channel samples from a slightly different displaced UV
  float tearLine = step(0.94, hash11(floor(t * 1.8) + 7.3));
  float tearAmt  = tearLine * (hash11(floor(t * 3.1)) * 0.04 - 0.02);

  vec4 sR = texture(u_prev, fract(sortUV + vec2(tearAmt, 0.0)));
  vec4 sG = texture(u_prev, fract(sortUV));
  vec4 sB = texture(u_prev, fract(sortUV - vec2(tearAmt, 0.0)));

  // -- Feedback with differential channel persistence ---------------
  vec4 mosh = vec4(sR.r, sG.g, sB.b, 1.0);
  mosh.r *= 0.992;
  mosh.g *= 0.978;
  mosh.b *= 0.965;

  // -- Autonomous seed energy ---------------------------------------
  // Slow drifting "corruption source" injects new signal
  vec2 src1 = vec2(0.5 + 0.3 * sin(t * 0.13), 0.5 + 0.25 * cos(t * 0.19));
  vec2 src2 = vec2(0.5 + 0.25 * cos(t * 0.11 + 1.4), 0.5 + 0.3 * sin(t * 0.17 + 2.1));
  float d1 = length(uv - src1);
  float d2 = length(uv - src2);
  float energy = exp(-d1 * 18.0) * 0.22 * (0.5 + 0.5 * sin(t * 1.3));
  energy      += exp(-d2 * 22.0) * 0.18 * (0.5 + 0.5 * cos(t * 1.7 + 0.8));

  // Inject with per-channel color bias so seed glows cyan/magenta
  mosh.r += energy * 0.4;
  mosh.g += energy * 0.9;
  mosh.b += energy * 1.1;

  // Sparse noise seed keeps dark areas alive
  float brightness = dot(mosh.rgb, vec3(0.299, 0.587, 0.114));
  if (brightness < 0.02) {
    float ns = step(0.97, hash21(uv * 300.0 + t * 0.3));
    mosh.rgb += ns * 0.5 * vec3(hash21(uv + 0.1), hash21(uv + 0.2), hash21(uv + 0.3));
  }

  fragColor = vec4(clamp(mosh.rgb, 0.0, 1.0), 1.0);
}`;

  // Display pass: scanline burn + phosphor bloom + vignette
  const FS_DISP = `#version 300 es
precision highp float;
in vec2 v_uv; out vec4 fragColor;
uniform sampler2D u_tex;
uniform float u_time;
uniform vec2 u_res;

float hash21(vec2 p){ return fract(sin(dot(p, vec2(127.1,311.7))) * 43758.5453); }

void main(){
  vec2 uv = v_uv;

  // Scanline offset - occasional horizontal tear on display
  float lineID = floor(uv.y * u_res.y);
  float tearProb = step(0.97, hash21(vec2(lineID, floor(u_time * 4.0))));
  float tearShift = tearProb * (hash21(vec2(lineID * 0.7, u_time)) - 0.5) * 0.03;
  uv.x = fract(uv.x + tearShift);

  vec4 raw = texture(u_tex, uv);
  vec3 col = raw.rgb;

  // Phosphor palette: deep void - electric cyan - acid green - hot white
  float v = dot(col, vec3(0.299, 0.587, 0.114));
  vec3 p0 = vec3(0.0,  0.0,  0.0);
  vec3 p1 = vec3(0.0,  0.06, 0.18);
  vec3 p2 = vec3(0.0,  0.55, 0.35);
  vec3 p3 = vec3(0.15, 0.95, 0.5);
  vec3 p4 = vec3(0.9,  1.0,  0.85);

  float vv = clamp(v * 1.1, 0.0, 1.0);
  vec3 phosphor =
    mix(mix(mix(mix(p0, p1, clamp(vv*4., 0., 1.)),
                    p2, clamp(vv*4.-1., 0., 1.)),
                p3, clamp(vv*4.-2., 0., 1.)),
            p4, clamp(vv*4.-3., 0., 1.));

  // Blend phosphor with raw channel color for the glitch hues
  col = mix(phosphor, col * vec3(0.4, 1.1, 0.9), 0.35);

  // Scanline grid
  float scan = 1.0 - 0.18 * pow(sin(uv.y * u_res.y * 3.14159), 2.0);
  col *= scan;

  // Film grain
  col += (hash21(uv + fract(u_time * 0.017)) - 0.5) * 0.03;

  // Vignette
  vec2 vc = uv - 0.5;
  col *= clamp(1.0 - dot(vc, vc) * 1.8, 0.0, 1.0);

  // Boost
  col *= 1.25;
  col = col / (col + 0.55);
  col = pow(max(col, 0.0), vec3(0.88));

  fragColor = vec4(clamp(col, 0.0, 1.0), 1.0);
}`;

  function compile(type, src) {
    const s = gl.createShader(type);
    gl.shaderSource(s, src); gl.compileShader(s);
    if (!gl.getShaderParameter(s, gl.COMPILE_STATUS)) console.error('GLITCH shader:', gl.getShaderInfoLog(s));
    return s;
  }
  function program(vs, fs) {
    const p = gl.createProgram();
    gl.attachShader(p, compile(gl.VERTEX_SHADER, vs));
    gl.attachShader(p, compile(gl.FRAGMENT_SHADER, fs));
    gl.linkProgram(p);
    if (!gl.getProgramParameter(p, gl.LINK_STATUS)) console.error('GLITCH link:', gl.getProgramInfoLog(p));
    return p;
  }
  const pFB = program(VS, FS_FB), pDisp = program(VS, FS_DISP);

  function makeVAO(prog) {
    const vao = gl.createVertexArray(); gl.bindVertexArray(vao);
    const buf = gl.createBuffer(); gl.bindBuffer(gl.ARRAY_BUFFER, buf);
    gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([-1,-1,1,-1,-1,1,1,1]), gl.STATIC_DRAW);
    const loc = gl.getAttribLocation(prog, 'a_pos');
    gl.enableVertexAttribArray(loc); gl.vertexAttribPointer(loc, 2, gl.FLOAT, false, 0, 0);
    return vao;
  }
  const vaoFB = makeVAO(pFB), vaoDisp = makeVAO(pDisp);
  gl.bindVertexArray(null);

  let fbos = [];
  function makeFBO() {
    const tex = gl.createTexture(); gl.bindTexture(gl.TEXTURE_2D, tex);
    gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, canvas.width, canvas.height, 0, gl.RGBA, gl.UNSIGNED_BYTE, null);
    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
    const fbo = gl.createFramebuffer(); gl.bindFramebuffer(gl.FRAMEBUFFER, fbo);
    gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, tex, 0);
    return { tex, fbo };
  }
  function initFBOs() {
    fbos.forEach(f => { gl.deleteTexture(f.tex); gl.deleteFramebuffer(f.fbo); });
    fbos = [makeFBO(), makeFBO()];
    gl.bindFramebuffer(gl.FRAMEBUFFER, null);
  }
  initFBOs();

  function u(prog, name){ return gl.getUniformLocation(prog, name); }
  const UFB  = { prev:u(pFB,'u_prev'), time:u(pFB,'u_time'), res:u(pFB,'u_res') };
  const UD   = { tex:u(pDisp,'u_tex'), time:u(pDisp,'u_time'), res:u(pDisp,'u_res') };

  let ping = 0, time = 0, last = 0;
  let _raf;
  function render(ts) {
    requestAnimationFrame(render);
    const dt = Math.min((ts - last) / 1000, 0.05); last = ts;
    time += dt;

    const src = fbos[ping], dst = fbos[1-ping]; ping = 1-ping;

    gl.viewport(0, 0, canvas.width, canvas.height);

    gl.bindVertexArray(vaoFB);
    gl.bindFramebuffer(gl.FRAMEBUFFER, dst.fbo);
    gl.useProgram(pFB);
    gl.activeTexture(gl.TEXTURE0); gl.bindTexture(gl.TEXTURE_2D, src.tex);
    gl.uniform1i(UFB.prev, 0);
    gl.uniform1f(UFB.time, time);
    gl.uniform2f(UFB.res, canvas.width, canvas.height);
    gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);

    gl.bindVertexArray(vaoDisp);
    gl.bindFramebuffer(gl.FRAMEBUFFER, null);
    gl.useProgram(pDisp);
    gl.activeTexture(gl.TEXTURE0); gl.bindTexture(gl.TEXTURE_2D, dst.tex);
    gl.uniform1i(UD.tex, 0);
    gl.uniform1f(UD.time, time);
    gl.uniform2f(UD.res, canvas.width, canvas.height);
    gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
  }
  _raf = requestAnimationFrame(render);


  // Stop RAF when card leaves viewport
  new IntersectionObserver(function(entries){
    if(!entries[0].isIntersecting) { cancelAnimationFrame(_raf); _raf = null; }
    else if(!_raf) { _raf = requestAnimationFrame(render); }
  }, { rootMargin: '150px' }).observe(document.getElementById('glitch-card-canvas'));
})();
  }, { rootMargin: '150px' });
  _io.observe(_el);
})();

// ══════════════════════════════════════════════════════════════════
// ABYSS — Bioluminescent Feedback Card Preview
// ══════════════════════════════════════════════════════════════════
(function(){
  var _el = document.getElementById('abyss-card-canvas');
  if(!_el) return;
  var _io = new IntersectionObserver(function(entries){
    if(!entries[0].isIntersecting) return;
    _io.disconnect();
    (function(){
  const canvas = document.getElementById('abyss-card-canvas');
  if (!canvas) return;
  const gl = canvas.getContext('webgl2', { antialias:false, alpha:false });
  if (!gl) { canvas.parentElement.style.background='linear-gradient(180deg,#000510,#020a05)'; return; }

  const DPR = Math.min(window.devicePixelRatio || 1, 1);
  function resize() {
    const rect = canvas.parentElement.getBoundingClientRect();
    canvas.width  = Math.floor(rect.width  * DPR);
    canvas.height = Math.floor(rect.height * DPR);
  }
  resize();
  const ro = new ResizeObserver(() => { resize(); initFBOs(); });
  ro.observe(canvas.parentElement);

  const VS = `#version 300 es
in vec2 a_pos; out vec2 v_uv;
void main(){ v_uv = a_pos * 0.5 + 0.5; gl_Position = vec4(a_pos, 0., 1.); }`;

  const FS_FB = `#version 300 es
precision highp float;
in vec2 v_uv; out vec4 fragColor;
uniform sampler2D u_prev;
uniform float u_time;
uniform vec2 u_res;

float hash11(float p){ return fract(sin(p*127.1)*43758.5453); }
float hash21(vec2 p){ return fract(sin(dot(p,vec2(127.1,311.7)))*43758.5453); }

float noise(vec2 p){
  vec2 i=floor(p), f=fract(p), u=f*f*(3.-2.*f);
  return mix(mix(hash21(i),hash21(i+vec2(1,0)),u.x),
             mix(hash21(i+vec2(0,1)),hash21(i+vec2(1,1)),u.x),u.y);
}
float fbm(vec2 p){
  return noise(p)*0.5 + noise(p*2.1+1.3)*0.25 + noise(p*4.4+2.7)*0.125 + noise(p*8.9+5.1)*0.0625;
}

// Complementary pair selector - cycles through 3 pairs over time
// pair 0: cyan(180-) - red-orange(15-)
// pair 1: violet(270-) - acid-yellow(80-)
// pair 2: electric-blue(220-) - magenta(320-)
vec3 hsl2rgb(float h, float s, float l){
  float c = (1.-abs(2.*l-1.))*s;
  float h6 = fract(h)*6.;
  vec3 rgb = clamp(vec3(abs(h6-3.)-1., 2.-abs(h6-2.), 2.-abs(h6-4.)),0.,1.);
  return (rgb-0.5)*c + l;
}

void main(){
  vec2 uv = v_uv;
  float t  = u_time;
  float asp = u_res.x / u_res.y;

  // -- Slow curl-noise warp on feedback UV -------------------------
  float sc = 0.9;
  vec2 nuv = vec2(uv.x * asp, uv.y) * sc;
  float eps = 0.006;
  float n0 = fbm(nuv + t*0.07);
  float n1 = fbm(nuv + vec2(eps,0.) + t*0.07);
  float n2 = fbm(nuv + vec2(0.,eps) + t*0.07);
  vec2 curl = vec2(-(n2-n0)/eps, (n1-n0)/eps) * 0.012;

  // Gentle zoom toward shifting centre
  vec2 centre = vec2(0.5 + 0.1*sin(t*0.11), 0.5 + 0.08*cos(t*0.13));
  vec2 warpUV = (uv - centre) * 0.997 + centre + curl;
  warpUV = clamp(warpUV, 0.001, 0.999);

  vec4 prev = texture(u_prev, warpUV);

  // -- Differential decay - preserve saturation by decaying unequally
  vec3 mem = prev.rgb * 0.972;

  // -- Complementary pair cycle -------------------------------------
  // Slow oscillator picks which pair dominates, never fully settling
  float pairT   = t * 0.04;
  float pairPos = fract(pairT);           // 0-1 progress through current pair
  float pairIdx = floor(mod(pairT, 3.0)); // 0, 1, or 2

  // A hue and its complement (180- away), with slight tension drift
  float hueA, hueB;
  if(pairIdx < 0.5){       hueA=0.50; hueB=0.04; }  // cyan - red-orange
  else if(pairIdx < 1.5){  hueA=0.75; hueB=0.22; }  // violet - acid-yellow
  else {                   hueA=0.61; hueB=0.89; }  // electric-blue - magenta

  // The two hues breathe toward each other over the cycle
  float tension = sin(pairPos * 3.14159);  // peaks mid-cycle
  float hA = hueA + tension * 0.04 * sin(t*0.31);
  float hB = hueB - tension * 0.04 * cos(t*0.27);

  // -- Organism layer 1 - large slow drifting bodies ----------------
  // 4 large bioluminescent creatures, sinusoidal Lissajous paths
  float orgA = 0.0;
  vec3  orgColorA = vec3(0.0);
  for(int i=0; i<4; i++){
    float fi = float(i);
    float spd = 0.09 + fi*0.031;
    vec2 pos = vec2(
      0.5 + 0.32*sin(t*spd       + fi*1.9),
      0.5 + 0.28*cos(t*spd*0.73  + fi*2.7)
    );
    float d    = length((uv - pos) * vec2(asp, 1.0));
    float body = exp(-d * 14.0) * (0.6 + 0.4*sin(t*(0.7+fi*0.2) + fi));
    float hue  = (fi < 2.0) ? hA : hB;          // two creatures per hue
    float sat  = 0.85 + 0.15*sin(t*0.5+fi);
    float lit  = 0.45 + 0.15*sin(t*0.8+fi*1.3);
    orgA      += body;
    orgColorA += hsl2rgb(hue, sat, lit) * body * 0.28;
  }

  // -- Organism layer 2 - medium pulsing rings -----------------------
  // Ring-shaped emitters with expanding wavefronts
  float orgB = 0.0;
  vec3  orgColorB = vec3(0.0);
  for(int i=0; i<3; i++){
    float fi  = float(i);
    float spd = 0.06 + fi*0.04;
    vec2 pos  = vec2(
      0.5 + 0.22*cos(t*spd       + fi*2.3 + 1.1),
      0.5 + 0.25*sin(t*spd*0.81  + fi*3.1 + 0.7)
    );
    float d     = length((uv - pos) * vec2(asp, 1.0));
    float phase = t*(1.2+fi*0.3) + fi*2.1;
    float ring  = exp(-pow(d*12.0 - fract(phase)*3.0, 2.0) * 2.0) * 0.5;
    float hue   = mix(hA, hB, float(i)/2.0 + 0.5*sin(t*0.12+fi));
    orgB       += ring;
    orgColorB  += hsl2rgb(hue, 0.9, 0.55) * ring * 0.22;
  }

  // -- Organism layer 3 - tiny swarming sparks -----------------------
  float orgC = 0.0;
  vec3  orgColorC = vec3(0.0);
  for(int i=0; i<6; i++){
    float fi  = float(i);
    float spd = 0.18 + fi*0.07;
    vec2 pos  = vec2(
      0.5 + 0.38*sin(t*spd        + fi*1.1),
      0.5 + 0.35*cos(t*spd*1.17   + fi*0.9)
    );
    float d    = length((uv - pos) * vec2(asp, 1.0));
    float spark = exp(-d * 38.0) * (0.3 + 0.7*abs(sin(t*(2.1+fi*0.4)+fi)));
    float hue  = (mod(fi,2.0)<0.5) ? hA+0.05 : hB-0.05;
    orgC      += spark;
    orgColorC += hsl2rgb(hue, 1.0, 0.6) * spark * 0.35;
  }

  // -- Predatory flash - sudden full-field complementary burst -------
  float flashT   = floor(t * 0.18);
  float flashOn  = step(0.92, hash11(flashT));
  float flashAge = fract(t * 0.18);
  float flash    = flashOn * exp(-flashAge * 18.0) * 0.12;
  vec3  flashCol = hsl2rgb(mix(hA,hB,step(0.5,hash11(flashT+1.0))), 1.0, 0.7) * flash;

  // -- FBM texture - subsurface scatter in the water -----------------
  float scatter = fbm(uv*3.5 + t*0.04) * 0.04;
  vec3  scatCol = hsl2rgb(hA + fbm(uv*2.0+t*0.03)*0.3, 0.7, 0.3) * scatter;

  // -- Compose -------------------------------------------------------
  vec3 col = mem + orgColorA + orgColorB + orgColorC + flashCol + scatCol;
  col = clamp(col, 0.0, 1.0);

  fragColor = vec4(col, 1.0);
}`;

  const FS_DISP = `#version 300 es
precision highp float;
in vec2 v_uv; out vec4 fragColor;
uniform sampler2D u_tex;
uniform float u_time;
uniform vec2 u_res;

float hash21(vec2 p){ return fract(sin(dot(p,vec2(127.1,311.7)))*43758.5453); }

void main(){
  vec2 uv = v_uv;

  // Micro chromatic aberration - splits at edges
  float caStr = 0.003 * (0.8 + 0.2*sin(u_time*0.7));
  vec2 dir = uv - 0.5;
  float r = texture(u_tex, uv + dir*caStr).r;
  float g = texture(u_tex, uv             ).g;
  float b = texture(u_tex, uv - dir*caStr).b;
  vec3 col = vec3(r, g, b);

  // Boost saturation - push complementary tension harder
  float luma = dot(col, vec3(0.299,0.587,0.114));
  col = mix(vec3(luma), col, 1.55);

  // Tone map - keep darks truly dark, let brights bloom
  col = col / (col + 0.4);
  col = pow(max(col,0.0), vec3(0.82));

  // Subtle horizontal scanline shimmer (water column effect)
  float shimmer = 1.0 - 0.04*sin(uv.y * u_res.y * 0.8 + u_time*1.1);
  col *= shimmer;

  // Grain
  col += (hash21(uv + fract(u_time*0.013)) - 0.5) * 0.018;

  // Vignette - deep, like looking down into the abyss
  vec2 vc = uv - 0.5;
  float vig = clamp(1.0 - dot(vc,vc)*2.4, 0.0, 1.0);
  vig = pow(vig, 0.7);
  col *= vig;

  fragColor = vec4(clamp(col,0.,1.), 1.0);
}`;

  function compile(type, src){
    const s=gl.createShader(type);
    gl.shaderSource(s,src); gl.compileShader(s);
    if(!gl.getShaderParameter(s,gl.COMPILE_STATUS)) console.error('ABYSS shader:',gl.getShaderInfoLog(s));
    return s;
  }
  function program(vs,fs){
    const p=gl.createProgram();
    gl.attachShader(p,compile(gl.VERTEX_SHADER,vs));
    gl.attachShader(p,compile(gl.FRAGMENT_SHADER,fs));
    gl.linkProgram(p);
    if(!gl.getProgramParameter(p,gl.LINK_STATUS)) console.error('ABYSS link:',gl.getProgramInfoLog(p));
    return p;
  }
  const pFB=program(VS,FS_FB), pDisp=program(VS,FS_DISP);

  function makeVAO(prog){
    const vao=gl.createVertexArray(); gl.bindVertexArray(vao);
    const buf=gl.createBuffer(); gl.bindBuffer(gl.ARRAY_BUFFER,buf);
    gl.bufferData(gl.ARRAY_BUFFER,new Float32Array([-1,-1,1,-1,-1,1,1,1]),gl.STATIC_DRAW);
    const loc=gl.getAttribLocation(prog,'a_pos');
    gl.enableVertexAttribArray(loc); gl.vertexAttribPointer(loc,2,gl.FLOAT,false,0,0);
    return vao;
  }
  const vaoFB=makeVAO(pFB), vaoDisp=makeVAO(pDisp);
  gl.bindVertexArray(null);

  let fbos=[];
  function makeFBO(){
    const tex=gl.createTexture(); gl.bindTexture(gl.TEXTURE_2D,tex);
    gl.texImage2D(gl.TEXTURE_2D,0,gl.RGBA,canvas.width,canvas.height,0,gl.RGBA,gl.UNSIGNED_BYTE,null);
    gl.texParameteri(gl.TEXTURE_2D,gl.TEXTURE_MIN_FILTER,gl.LINEAR);
    gl.texParameteri(gl.TEXTURE_2D,gl.TEXTURE_MAG_FILTER,gl.LINEAR);
    gl.texParameteri(gl.TEXTURE_2D,gl.TEXTURE_WRAP_S,gl.CLAMP_TO_EDGE);
    gl.texParameteri(gl.TEXTURE_2D,gl.TEXTURE_WRAP_T,gl.CLAMP_TO_EDGE);
    const fbo=gl.createFramebuffer(); gl.bindFramebuffer(gl.FRAMEBUFFER,fbo);
    gl.framebufferTexture2D(gl.FRAMEBUFFER,gl.COLOR_ATTACHMENT0,gl.TEXTURE_2D,tex,0);
    return{tex,fbo};
  }
  function initFBOs(){
    fbos.forEach(f=>{gl.deleteTexture(f.tex);gl.deleteFramebuffer(f.fbo);});
    fbos=[makeFBO(),makeFBO()];
    gl.bindFramebuffer(gl.FRAMEBUFFER,null);
  }
  initFBOs();

  function u(prog,name){ return gl.getUniformLocation(prog,name); }
  const UFB ={ prev:u(pFB,'u_prev'), time:u(pFB,'u_time'), res:u(pFB,'u_res') };
  const UD  ={ tex:u(pDisp,'u_tex'), time:u(pDisp,'u_time'), res:u(pDisp,'u_res') };

  let ping=0, time=0, last=0;
  let _raf;
  function render(ts){
    requestAnimationFrame(render);
    const dt=Math.min((ts-last)/1000,0.05); last=ts;
    time+=dt;

    const src=fbos[ping], dst=fbos[1-ping]; ping=1-ping;
    gl.viewport(0,0,canvas.width,canvas.height);

    gl.bindVertexArray(vaoFB);
    gl.bindFramebuffer(gl.FRAMEBUFFER,dst.fbo);
    gl.useProgram(pFB);
    gl.activeTexture(gl.TEXTURE0); gl.bindTexture(gl.TEXTURE_2D,src.tex);
    gl.uniform1i(UFB.prev,0);
    gl.uniform1f(UFB.time,time);
    gl.uniform2f(UFB.res,canvas.width,canvas.height);
    gl.drawArrays(gl.TRIANGLE_STRIP,0,4);

    gl.bindVertexArray(vaoDisp);
    gl.bindFramebuffer(gl.FRAMEBUFFER,null);
    gl.useProgram(pDisp);
    gl.activeTexture(gl.TEXTURE0); gl.bindTexture(gl.TEXTURE_2D,dst.tex);
    gl.uniform1i(UD.tex,0);
    gl.uniform1f(UD.time,time);
    gl.uniform2f(UD.res,canvas.width,canvas.height);
    gl.drawArrays(gl.TRIANGLE_STRIP,0,4);
  }
  _raf = requestAnimationFrame(render);


  // Stop RAF when card leaves viewport
  new IntersectionObserver(function(entries){
    if(!entries[0].isIntersecting) { cancelAnimationFrame(_raf); _raf = null; }
    else if(!_raf) { _raf = requestAnimationFrame(render); }
  }, { rootMargin: '150px' }).observe(document.getElementById('abyss-card-canvas'));
})();
  }, { rootMargin: '150px' });
  _io.observe(_el);
})();

// ══════════════════════════════════════════════════════════════════
// PARALLAX — Solar Storm Card Preview
// ══════════════════════════════════════════════════════════════════
(function(){
  var _el = document.getElementById('parallax-card-canvas');
  if(!_el) return;
  var _io = new IntersectionObserver(function(entries){
    if(!entries[0].isIntersecting) return;
    _io.disconnect();
    (function(){
  const canvas = document.getElementById('parallax-card-canvas');
  if (!canvas) return;
  const gl = canvas.getContext('webgl2');
  if (!gl) { canvas.parentElement.style.background='linear-gradient(180deg,#000510,#020008)'; return; }

  const DPR = Math.min(window.devicePixelRatio || 1, 1);
  function resize(){
    const rect = canvas.parentElement.getBoundingClientRect();
    canvas.width  = Math.floor(rect.width  * DPR);
    canvas.height = Math.floor(rect.height * DPR);
    gl.viewport(0, 0, canvas.width, canvas.height);
  }
  resize();
  const ro = new ResizeObserver(resize);
  ro.observe(canvas.parentElement);

  const P = {
    layers:7, phase:0.75, drift:0.50, distortion:0.60,
    brightness:0.90, speed:1.2, warpFreq:0.65, warpAmp:0.80,
    turbulence:0.70, vignetteSize:0.65, vignetteSoft:0.45,
    aberration:0.25, saturation:1.0, hueShift:0.06,
  };

  const VS = `#version 300 es
in vec2 a_pos;
void main(){ gl_Position = vec4(a_pos,0,1); }`;

  const FS = `#version 300 es
precision highp float;
out vec4 fragColor;
uniform vec2  u_res;
uniform float u_time;
uniform float u_phase, u_drift, u_distortion, u_brightness;
uniform int   u_layers;
uniform float u_speed, u_warp_freq, u_warp_amp, u_turbulence;
uniform float u_vignette_size, u_vignette_soft;
uniform float u_aberration, u_saturation, u_hue_shift;

#define PI  3.14159265359
#define TAU 6.28318530718

float hash(vec2 p){ return fract(sin(dot(p,vec2(127.1,311.7)))*43758.5453); }
float noise(vec2 p){
  vec2 i=floor(p),f=fract(p); f=f*f*(3.0-2.0*f);
  return mix(mix(hash(i),hash(i+vec2(1,0)),f.x),mix(hash(i+vec2(0,1)),hash(i+vec2(1,1)),f.x),f.y);
}
float fbm(vec2 p){
  float v=0.,a=0.5; mat2 rot=mat2(cos(0.5),sin(0.5),-sin(0.5),cos(0.5));
  for(int i=0;i<4;i++){v+=a*noise(p);p=rot*p*2.+vec2(100);a*=0.5;} return v;
}
float fieldA(vec2 uv,float t){ return fbm(uv*2.1+t*0.11); }
float fieldB(vec2 uv,float t){ return fbm(uv*1.6-t*0.09+vec2(4.3,2.1)); }
float fieldC(vec2 uv,float t){
  float r=length(uv-0.5),a=atan(uv.y-0.5,uv.x-0.5);
  return sin(r*16.0-t*2.1+a*4.0)*0.5+0.5;
}
vec3 hsv2rgb(float h,float s,float v){
  vec3 p=clamp(abs(fract(vec3(h)+vec3(1.,2./3.,1./3.))*6.-3.)-1.,0.,1.);
  return v*mix(vec3(1.),p,s);
}
vec3 rgb2hsl(vec3 c){
  float mx=max(c.r,max(c.g,c.b)),mn=min(c.r,min(c.g,c.b));
  float l=(mx+mn)*0.5,d=mx-mn;
  if(d<0.001) return vec3(0.,0.,l);
  float s=d/(1.0-abs(2.0*l-1.0)),h=0.;
  if(mx==c.r) h=mod((c.g-c.b)/d,6.0)/6.0;
  else if(mx==c.g) h=((c.b-c.r)/d+2.0)/6.0;
  else h=((c.r-c.g)/d+4.0)/6.0;
  return vec3(fract(h),s,l);
}
vec3 hsl2rgb(vec3 hsl){
  float c2=(1.0-abs(2.0*hsl.z-1.0))*hsl.y,h6=hsl.x*6.0;
  float x=c2*(1.0-abs(mod(h6,2.0)-1.0));
  vec3 r=vec3(0.);
  if(h6<1.)r=vec3(c2,x,0.); else if(h6<2.)r=vec3(x,c2,0.);
  else if(h6<3.)r=vec3(0.,c2,x); else if(h6<4.)r=vec3(0.,x,c2);
  else if(h6<5.)r=vec3(x,0.,c2); else r=vec3(c2,0.,x);
  return r+vec3(hsl.z-c2*0.5);
}
vec3 adjustColor(vec3 col,float sat,float hshift){
  vec3 hsl=rgb2hsl(col);
  hsl.x=fract(hsl.x+hshift);
  hsl.y=clamp(hsl.y*sat,0.,1.);
  return hsl2rgb(hsl);
}
vec3 aurora(vec2 uv,int layer,float fi,float t){
  float fA=fieldA(uv,t),fB=fieldB(uv,t),fC=fieldC(uv,t);
  float h=fract(fB*0.55+float(layer)*0.11+t*0.04);
  float curtain=pow(max(0.0,sin(fA*PI*2.5)),2.5);
  float filament=pow(max(0.0,sin(fC*PI*4.0)),4.0)*0.5;
  float v=(curtain+filament)*1.8;
  return hsv2rgb(fract(h+curtain*0.15),0.95,clamp(v,0.0,1.0));
}
void main(){
  vec2 uv=gl_FragCoord.xy/u_res;
  vec3 layers[9]; int nL=0;
  for(int i=0;i<9;i++){
    if(i>=u_layers) break;
    float fi=float(i)/max(float(u_layers-1),1.0);
    float t=u_time*u_speed*(0.4+fi*u_drift*1.2)+float(i)*0.41*u_drift;
    float angle=float(i)*TAU/float(u_layers)+u_time*0.08*u_drift;
    vec2 offset=vec2(cos(angle),sin(angle))*u_phase*0.35;
    vec2 wuv=uv+offset;
    float wfreq=1.5+u_warp_freq*4.0, wamp=u_warp_amp*2.0;
    float wx=fbm(uv*wfreq+t*0.4+float(i)*1.7);
    float wy=fbm(uv*wfreq-t*0.3+float(i)*2.3+vec2(5.1,3.7));
    float turb=u_turbulence*(noise(uv*12.0+t*1.1+float(i))-0.5)*0.08;
    wuv+=vec2(wx-0.5,wy-0.5)*u_distortion*0.18*(1.0+wamp)+vec2(turb);
    float aberr=u_aberration*0.04*fi;
    vec3 cR=aurora(wuv+vec2(aberr,0.),i,fi,t);
    vec3 cG=aurora(wuv,i,fi,t);
    vec3 cB=aurora(wuv-vec2(aberr,0.),i,fi,t);
    layers[i]=vec3(cR.r,cG.g,cB.b); nL++;
  }
  vec3 col=layers[0];
  for(int i=1;i<9;i++){ if(i>=nL) break; col=mix(col,col+layers[i],1.0/float(i+1)); }
  col=clamp(col,0.0,1.0);
  col=adjustColor(col,u_saturation*2.0,u_hue_shift);
  col*=u_brightness;
  float _vs=0.1+u_vignette_size*0.7, _vf=0.05+u_vignette_soft*0.6;
  col*=1.0-smoothstep(_vs,_vs+_vf,length(uv-0.5)*1.8);
  fragColor=vec4(clamp(col,0.0,1.0),1.0);
}`;

  function compileShader(type, src){
    const sh=gl.createShader(type);
    gl.shaderSource(sh,src); gl.compileShader(sh);
    if(!gl.getShaderParameter(sh,gl.COMPILE_STATUS)) console.error('PARALLAX shader:',gl.getShaderInfoLog(sh));
    return sh;
  }
  const prog=gl.createProgram();
  gl.attachShader(prog,compileShader(gl.VERTEX_SHADER,VS));
  gl.attachShader(prog,compileShader(gl.FRAGMENT_SHADER,FS));
  gl.linkProgram(prog);
  if(!gl.getProgramParameter(prog,gl.LINK_STATUS)){ console.error('PARALLAX link:',gl.getProgramInfoLog(prog)); return; }
  gl.useProgram(prog);

  const buf=gl.createBuffer();
  gl.bindBuffer(gl.ARRAY_BUFFER,buf);
  gl.bufferData(gl.ARRAY_BUFFER,new Float32Array([-1,-1,1,-1,-1,1,1,1]),gl.STATIC_DRAW);
  const loc=gl.getAttribLocation(prog,'a_pos');
  gl.enableVertexAttribArray(loc);
  gl.vertexAttribPointer(loc,2,gl.FLOAT,false,0,0);

  const U={};
  ['u_res','u_time','u_phase','u_drift','u_distortion','u_brightness','u_layers',
   'u_speed','u_warp_freq','u_warp_amp','u_turbulence','u_vignette_size',
   'u_vignette_soft','u_aberration','u_saturation','u_hue_shift'].forEach(n=>{
    U[n]=gl.getUniformLocation(prog,n);
  });

  let time=0, last=0;
  let _raf;
  function frame(ts){
    requestAnimationFrame(frame);
    const dt=Math.min((ts-last)/1000,0.05); last=ts;
    time+=dt;
    gl.uniform2f(U.u_res,canvas.width,canvas.height);
    gl.uniform1f(U.u_time,time);
    gl.uniform1f(U.u_phase,       P.phase);
    gl.uniform1f(U.u_drift,       P.drift);
    gl.uniform1f(U.u_distortion,  P.distortion);
    gl.uniform1f(U.u_brightness,  P.brightness);
    gl.uniform1i(U.u_layers,      P.layers);
    gl.uniform1f(U.u_speed,       P.speed);
    gl.uniform1f(U.u_warp_freq,   P.warpFreq);
    gl.uniform1f(U.u_warp_amp,    P.warpAmp);
    gl.uniform1f(U.u_turbulence,  P.turbulence);
    gl.uniform1f(U.u_vignette_size,P.vignetteSize);
    gl.uniform1f(U.u_vignette_soft,P.vignetteSoft);
    gl.uniform1f(U.u_aberration,  P.aberration);
    gl.uniform1f(U.u_saturation,  P.saturation);
    gl.uniform1f(U.u_hue_shift,   P.hueShift);
    gl.drawArrays(gl.TRIANGLE_STRIP,0,4);
  }
  _raf = requestAnimationFrame(frame);


  // Stop RAF when card leaves viewport
  new IntersectionObserver(function(entries){
    if(!entries[0].isIntersecting) { cancelAnimationFrame(_raf); _raf = null; }
    else if(!_raf) { _raf = requestAnimationFrame(frame); }
  }, { rootMargin: '150px' }).observe(document.getElementById('parallax-card-canvas'));
})();
  }, { rootMargin: '150px' });
  _io.observe(_el);
})();

// ══════════════════════════════════════════════════════════════════
// PYRE — Combustion Engine Card Preview
// ══════════════════════════════════════════════════════════════════
(function(){
  var _el = document.getElementById('pyre-card-canvas');
  if(!_el) return;
  var _io = new IntersectionObserver(function(entries){
    if(!entries[0].isIntersecting) return;
    _io.disconnect();
    (function(){
  const canvas = document.getElementById('pyre-card-canvas');
  if (!canvas) return;
  const gl = canvas.getContext('webgl2');
  if (!gl) { canvas.parentElement.style.background='linear-gradient(180deg,#0a0200,#000)'; return; }

  const DPR = Math.min(window.devicePixelRatio || 1, 1);
  function resize(){
    const rect = canvas.parentElement.getBoundingClientRect();
    canvas.width  = Math.floor(rect.width  * DPR);
    canvas.height = Math.floor(rect.height * DPR);
    gl.viewport(0, 0, canvas.width, canvas.height);
  }
  resize();
  const ro = new ResizeObserver(resize);
  ro.observe(canvas.parentElement);

  const VS = `#version 300 es
in vec2 a_pos; void main(){ gl_Position = vec4(a_pos,0,1); }`;

  const FS = `#version 300 es
precision highp float;
out vec4 fragColor;
uniform vec2  u_res;
uniform float u_time;

float hash11(float p){ return fract(sin(p*127.1)*43758.5453); }
float hash21(vec2 p){ return fract(sin(dot(p,vec2(127.1,311.7)))*43758.5453); }

float noise(vec2 p){
  vec2 i=floor(p), f=fract(p);
  f = f*f*(3.0-2.0*f);
  return mix(
    mix(hash21(i),          hash21(i+vec2(1,0)), f.x),
    mix(hash21(i+vec2(0,1)),hash21(i+vec2(1,1)), f.x), f.y);
}

// 4-octave upward-biased turbulence - each octave drifts up faster
float flame(vec2 p, float t){
  float v = 0.0, a = 0.5;
  vec2 shift = vec2(0.0);
  for(int i=0; i<5; i++){
    float fi = float(i);
    // Drift upward and slightly sideways per octave
    shift += vec2(sin(t*0.3+fi*1.1)*0.3, t*(0.8+fi*0.4));
    v += a * noise(p*pow(2.0,fi) + shift);
    a *= 0.5;
  }
  return v;
}

// Heat shimmer warp - distorts uv based on temperature
vec2 shimmer(vec2 uv, float heat, float t){
  float wx = noise(uv*8.0 + vec2(0.0, -t*2.1)) - 0.5;
  float wy = noise(uv*8.0 + vec2(3.7, -t*1.9)) - 0.5;
  return uv + vec2(wx, wy) * heat * 0.018;
}

// True fire color ramp: fuel - deep crimson - orange - amber - yellow - white tip
vec3 fireColor(float v){
  v = clamp(v, 0.0, 1.0);
  vec3 c0 = vec3(0.0,  0.0,  0.0);   // void / unlit
  vec3 c1 = vec3(0.22, 0.0,  0.0);   // deep crimson - fuel core
  vec3 c2 = vec3(0.72, 0.08, 0.0);   // orange-red
  vec3 c3 = vec3(1.0,  0.38, 0.0);   // pure orange
  vec3 c4 = vec3(1.0,  0.72, 0.04);  // amber-yellow
  vec3 c5 = vec3(1.0,  0.95, 0.55);  // hot yellow
  vec3 c6 = vec3(1.0,  1.0,  0.95);  // near-white tip

  float s = v * 6.0;
  if(s < 1.0) return mix(c0, c1, s);
  if(s < 2.0) return mix(c1, c2, s-1.0);
  if(s < 3.0) return mix(c2, c3, s-2.0);
  if(s < 4.0) return mix(c3, c4, s-3.0);
  if(s < 5.0) return mix(c4, c5, s-4.0);
  return mix(c5, c6, s-5.0);
}

void main(){
  vec2 uv = gl_FragCoord.xy / u_res;
  float t  = u_time * 0.9;
  float asp = u_res.x / u_res.y;

  // Correct for aspect - fire fills width, anchors to bottom
  vec2 fuv = vec2((uv.x - 0.5) * asp + 0.5, uv.y);

  // -- Base fuel line - fire rises from the bottom third ------------
  float base = smoothstep(0.0, 0.28, fuv.y);         // fade in from bottom
  float ceil = 1.0 - smoothstep(0.45, 1.0, fuv.y);   // fade out toward top

  // Warp UV upward with turbulence before sampling flame
  // More turbulence higher up - fire is more chaotic at the tips
  float turbStr = mix(0.12, 0.48, fuv.y);
  vec2 wuv = fuv;
  wuv.x += (noise(vec2(fuv.x*3.0, t*0.7)) - 0.5) * turbStr;
  wuv.y += (noise(vec2(fuv.x*2.1 + 5.3, t*0.5)) - 0.5) * turbStr * 0.4;

  // Core flame sample
  float f1 = flame(wuv * vec2(1.0/asp, 1.0), t);
  float f2 = flame(wuv * vec2(1.0/asp, 1.0) + vec2(3.7, 1.1), t * 0.85);

  // Shape: strong at center horizontally, tapering at edges
  float cx = 1.0 - smoothstep(0.0, 0.55, abs(fuv.x - 0.5) * 2.2);
  float intensity = (f1*0.65 + f2*0.35) * cx * ceil;

  // Sharpen - fire should have a hard bright core and soft edges
  intensity = pow(intensity, 1.4);

  // -- Inner core - brighter, whiter centre column -------------------
  float core = smoothstep(0.35, 0.0, abs(fuv.x - 0.5)) * (1.0 - fuv.y * 0.9);
  core *= flame(wuv * vec2(2.0/asp, 1.5), t * 1.1) * 0.6;
  intensity += core * 0.4;

  // -- Heat shimmer distortion above the flame -----------------------
  float heatAbove = smoothstep(0.6, 0.85, uv.y) * 0.6;
  vec2 shuv = shimmer(uv, heatAbove, t);
  // Re-sample intensity at shimmer-warped UV for the upper region
  vec2 sfuv = vec2((shuv.x - 0.5) * asp + 0.5, shuv.y);
  float shimmerF = flame(sfuv * vec2(1.0/asp, 1.0), t) * smoothstep(1.0, 0.6, sfuv.y) * 0.15;
  intensity += shimmerF;

  // -- Ember sparks -------------------------------------------------
  // Small bright points that drift upward and fade
  float embers = 0.0;
  for(int i=0; i<12; i++){
    float fi = float(i);
    float seed = fi * 1.618;
    // Ember birth position - random x along base, rises over time
    float birthX = hash11(seed)         * asp;
    float birthT = hash11(seed + 0.3)   * 6.28;
    float speed  = 0.15 + hash11(seed + 0.6) * 0.35;
    float life   = fract(t * speed + birthT);  // 0-1 lifespan
    // Slight horizontal drift as it rises
    float ex = (birthX / asp) + (hash11(seed+0.9)-0.5)*0.08 + sin(t*1.3+fi)*0.02;
    float ey = life * 0.7 + 0.1;               // rises from 0.1 to 0.8
    float fade = 1.0 - smoothstep(0.4, 1.0, life); // fade out as it rises
    float d  = length((fuv - vec2(ex, ey)) * vec2(asp, 1.0));
    embers  += exp(-d * 180.0) * fade * (0.5 + 0.5*hash11(seed+1.2));
  }

  // -- Smoke wisps - desaturated dark tendrils above -----------------
  float smoke = 0.0;
  float smokeZ = smoothstep(0.7, 1.0, uv.y);
  if(smokeZ > 0.0){
    float sn = flame(uv * 1.8 + vec2(0.0, -t*0.5), t*0.4);
    smoke = sn * smokeZ * 0.18;
  }

  // -- Color ---------------------------------------------------------
  vec3 col = fireColor(intensity * 1.15);

  // Embers are orange-white
  col += vec3(1.0, 0.55, 0.1) * embers * 1.8;

  // Smoke - dark grey
  col = mix(col, vec3(0.08, 0.07, 0.07), smoke);

  // Global: keep void truly black, punch the brightness
  col *= 1.1;
  col = col / (col + 0.3);   // Reinhard
  col = pow(max(col,0.0), vec3(0.9));

  // Vignette
  vec2 vc = uv - 0.5;
  col *= clamp(1.0 - dot(vc,vc)*1.4, 0.0, 1.0);

  fragColor = vec4(clamp(col,0.0,1.0), 1.0);
}`;

  function compile(type, src){
    const s=gl.createShader(type);
    gl.shaderSource(s,src); gl.compileShader(s);
    if(!gl.getShaderParameter(s,gl.COMPILE_STATUS)) console.error('PYRE shader:',gl.getShaderInfoLog(s));
    return s;
  }
  const prog=gl.createProgram();
  gl.attachShader(prog,compile(gl.VERTEX_SHADER,VS));
  gl.attachShader(prog,compile(gl.FRAGMENT_SHADER,FS));
  gl.linkProgram(prog);
  if(!gl.getProgramParameter(prog,gl.LINK_STATUS)){ console.error('PYRE link:',gl.getProgramInfoLog(prog)); return; }
  gl.useProgram(prog);

  const buf=gl.createBuffer();
  gl.bindBuffer(gl.ARRAY_BUFFER,buf);
  gl.bufferData(gl.ARRAY_BUFFER,new Float32Array([-1,-1,1,-1,-1,1,1,1]),gl.STATIC_DRAW);
  const loc=gl.getAttribLocation(prog,'a_pos');
  gl.enableVertexAttribArray(loc);
  gl.vertexAttribPointer(loc,2,gl.FLOAT,false,0,0);

  const uRes  = gl.getUniformLocation(prog,'u_res');
  const uTime = gl.getUniformLocation(prog,'u_time');

  let time=0, last=0;
  let _raf;
  function frame(ts){
    requestAnimationFrame(frame);
    const dt=Math.min((ts-last)/1000,0.05); last=ts;
    time+=dt;
    gl.uniform2f(uRes, canvas.width, canvas.height);
    gl.uniform1f(uTime, time);
    gl.drawArrays(gl.TRIANGLE_STRIP,0,4);
  }
  _raf = requestAnimationFrame(frame);


  // Stop RAF when card leaves viewport
  new IntersectionObserver(function(entries){
    if(!entries[0].isIntersecting) { cancelAnimationFrame(_raf); _raf = null; }
    else if(!_raf) { _raf = requestAnimationFrame(frame); }
  }, { rootMargin: '150px' }).observe(document.getElementById('pyre-card-canvas'));
})();
  }, { rootMargin: '150px' });
  _io.observe(_el);
})();

// ══════════════════════════════════════════════════════════════════
// LUCID — Hyperdimensional Geometry Card Preview
// ══════════════════════════════════════════════════════════════════
(function(){
  var _el = document.getElementById('lucid-card-canvas');
  if(!_el) return;
  var _io = new IntersectionObserver(function(entries){
    if(!entries[0].isIntersecting) return;
    _io.disconnect();
    (function(){
  const canvas = document.getElementById('lucid-card-canvas');
  if (!canvas) return;
  const gl = canvas.getContext('webgl2');
  if (!gl) { canvas.parentElement.style.background='linear-gradient(135deg,#000,#050010)'; return; }

  const DPR = Math.min(window.devicePixelRatio || 1, 1);
  function resize(){
    const rect = canvas.parentElement.getBoundingClientRect();
    canvas.width  = Math.floor(rect.width  * DPR);
    canvas.height = Math.floor(rect.height * DPR);
    gl.viewport(0, 0, canvas.width, canvas.height);
  }
  resize();
  const ro = new ResizeObserver(resize);
  ro.observe(canvas.parentElement);

  const VS = `#version 300 es
in vec2 a_pos; void main(){ gl_Position = vec4(a_pos,0,1); }`;

  const FS = `#version 300 es
precision highp float;
out vec4 fragColor;
uniform vec2  u_res;
uniform float u_time;

#define PI  3.14159265
#define TAU 6.28318530

// -- Noise primitives ----------------------------------------------
float hash21(vec2 p){ return fract(sin(dot(p,vec2(127.1,311.7)))*43758.5453); }
float noise(vec2 p){
  vec2 i=floor(p), f=fract(p); f=f*f*(3.-2.*f);
  return mix(mix(hash21(i),hash21(i+vec2(1,0)),f.x),
             mix(hash21(i+vec2(0,1)),hash21(i+vec2(1,1)),f.x),f.y);
}
float fbm(vec2 p){
  float v=0.,a=0.5;
  for(int i=0;i<6;i++){ v+=a*noise(p); p=p*2.+vec2(1.7,9.2); a*=0.5; }
  return v;
}

// -- Radial symmetry fold - folds space into n-fold symmetry -------
vec2 fold(vec2 p, float n){
  float a = atan(p.y, p.x);
  float sector = TAU / n;
  a = mod(a, sector);
  // Mirror within sector
  if(a > sector * 0.5) a = sector - a;
  float r = length(p);
  return vec2(cos(a), sin(a)) * r;
}

// -- HSV to RGB - full saturation color cycling --------------------
vec3 hsv2rgb(float h, float s, float v){
  vec3 p = clamp(abs(fract(vec3(h)+vec3(1.,2./3.,1./3.))*6.-3.)-1.,0.,1.);
  return v * mix(vec3(1.), p, s);
}

// -- Domain warp - warps coordinates through multiple fbm layers ---
vec2 domainWarp(vec2 p, float t){
  float warpStr = 0.55;
  vec2 q = vec2(fbm(p + vec2(0.0, 0.0) + t*0.07),
                fbm(p + vec2(5.2, 1.3) + t*0.07));
  vec2 r = vec2(fbm(p + q*2.2 + vec2(1.7, 9.2) + t*0.11),
                fbm(p + q*2.2 + vec2(8.3, 2.8) + t*0.11));
  return p + r * warpStr;
}

void main(){
  vec2 uv = (gl_FragCoord.xy - u_res*0.5) / min(u_res.x, u_res.y);
  float t = u_time * 0.28;

  // -- Slow recursive zoom toward center ----------------------------
  // Smooth sin breathe - no discontinuous snap
  float zoom = 1.11 + 0.11 * sin(t * TAU * 0.15);
  uv *= zoom;

  // -- Slow rotation of the whole field -----------------------------
  float rot = t * 0.04;
  uv = vec2(uv.x*cos(rot) - uv.y*sin(rot),
            uv.x*sin(rot) + uv.y*cos(rot));

  // -- Apply 8-fold radial symmetry ---------------------------------
  vec2 sym = fold(uv, 8.0);

  // -- Second nested fold at different scale - produces the fractal -
  // Take the symmetry-folded space and fold again at 6-fold
  float innerScale = 2.8 + 0.4*sin(t*0.31);
  vec2 sym2 = fold(sym * innerScale, 6.0);

  // -- Domain warp the nested space ---------------------------------
  vec2 warped = domainWarp(sym2 * 1.4, t);

  // -- Primary pattern - fbm of warped nested symmetry --------------
  float pattern = fbm(warped * 1.8 + t*0.05);

  // -- Secondary pattern - polar ripples from center -----------------
  float r = length(uv);
  float a = atan(uv.y, uv.x);
  // Radial wave that breathes outward
  float radial = sin(r * 14.0 - t * 2.1 + fbm(sym*2.0)*3.0) * 0.5 + 0.5;
  // Angular modulation - petal structure
  float petal = sin(a * 8.0 + t * 0.4 + fbm(sym2)*TAU) * 0.5 + 0.5;

  // -- Combine layers ------------------------------------------------
  float combined = pattern * 0.5 + radial * 0.3 + petal * 0.2;

  // -- Sharpen - DMT visuals have hard bright edges ------------------
  combined = pow(combined, 0.7);

  // -- Center hotspot - everything radiates from here ---------------
  float center = exp(-r * 3.5) * (0.6 + 0.4*sin(t*1.7));
  combined += center * 0.4;

  // -- Edge vignette - draws eye inward -----------------------------
  float vig = 1.0 - smoothstep(0.4, 0.85, r);

  // -- Color - three independent hue streams cycling at different rates
  // This produces the "colors that don't exist" quality -
  // aggressive hue cycling with high saturation
  float hue1 = fract(combined * 0.8 + t * 0.07 + r * 0.3);
  float hue2 = fract(combined * 1.3 - t * 0.11 + pattern * 0.5);
  float hue3 = fract(petal    * 0.6 + t * 0.05 + radial * 0.4);

  // Each layer gets a different hue cycle; blend by pattern intensity
  vec3 col1 = hsv2rgb(hue1, 1.0, 1.0);
  vec3 col2 = hsv2rgb(hue2, 0.95, 0.9);
  vec3 col3 = hsv2rgb(hue3, 1.0, 0.85);

  vec3 col = col1 * 0.5 + col2 * 0.3 + col3 * 0.2;

  // -- Amplify saturation - push beyond natural perception ----------
  float luma = dot(col, vec3(0.299,0.587,0.114));
  col = mix(vec3(luma), col, 1.8);

  // -- Scale by combined intensity and vignette ---------------------
  col *= combined * vig * 1.6;

  // -- Tone map - keep the void black, let peaks bloom white ---------
  col = col / (col + 0.5);
  col = pow(max(col,0.0), vec3(0.85));

  // -- Dark center pulse - the void at the center of vision ---------
  float void_ = smoothstep(0.06, 0.0, r) * 0.7;
  col = mix(col, vec3(0.0), void_);

  fragColor = vec4(clamp(col,0.,1.), 1.0);
}`;

  function compile(type, src){
    const s=gl.createShader(type);
    gl.shaderSource(s,src); gl.compileShader(s);
    if(!gl.getShaderParameter(s,gl.COMPILE_STATUS)) console.error('LUCID shader:',gl.getShaderInfoLog(s));
    return s;
  }
  const prog=gl.createProgram();
  gl.attachShader(prog,compile(gl.VERTEX_SHADER,VS));
  gl.attachShader(prog,compile(gl.FRAGMENT_SHADER,FS));
  gl.linkProgram(prog);
  if(!gl.getProgramParameter(prog,gl.LINK_STATUS)){ console.error('LUCID link:',gl.getProgramInfoLog(prog)); return; }
  gl.useProgram(prog);

  const buf=gl.createBuffer();
  gl.bindBuffer(gl.ARRAY_BUFFER,buf);
  gl.bufferData(gl.ARRAY_BUFFER,new Float32Array([-1,-1,1,-1,-1,1,1,1]),gl.STATIC_DRAW);
  const loc=gl.getAttribLocation(prog,'a_pos');
  gl.enableVertexAttribArray(loc);
  gl.vertexAttribPointer(loc,2,gl.FLOAT,false,0,0);

  const uRes  = gl.getUniformLocation(prog,'u_res');
  const uTime = gl.getUniformLocation(prog,'u_time');

  let time=0, last=0;
  let _raf;
  function frame(ts){
    requestAnimationFrame(frame);
    const dt=Math.min((ts-last)/1000,0.05); last=ts;
    time+=dt;
    gl.uniform2f(uRes, canvas.width, canvas.height);
    gl.uniform1f(uTime, time);
    gl.drawArrays(gl.TRIANGLE_STRIP,0,4);
  }
  _raf = requestAnimationFrame(frame);


  // Stop RAF when card leaves viewport
  new IntersectionObserver(function(entries){
    if(!entries[0].isIntersecting) { cancelAnimationFrame(_raf); _raf = null; }
    else if(!_raf) { _raf = requestAnimationFrame(frame); }
  }, { rootMargin: '150px' }).observe(document.getElementById('lucid-card-canvas'));
})();
  }, { rootMargin: '150px' });
  _io.observe(_el);
})();

// ══════════════════════════════════════════════════════════════════
// CHERENKOV — Superluminal Wavefront Card Preview
// ══════════════════════════════════════════════════════════════════
(function(){
  var _el = document.getElementById('cherenkov-card-canvas');
  if(!_el) return;
  var _io = new IntersectionObserver(function(entries){
    if(!entries[0].isIntersecting) return;
    _io.disconnect();
    (function(){
  const canvas = document.getElementById('cherenkov-card-canvas');
  if (!canvas) return;
  const gl = canvas.getContext('webgl2', { antialias:false, alpha:false, premultipliedAlpha:false });
  if (!gl) { canvas.parentElement.style.background='linear-gradient(180deg,#020507,#030d1a)'; return; }

  const DPR = Math.min(window.devicePixelRatio || 1, 1);
  let W, H;
  function resize(){
    const rect = canvas.parentElement.getBoundingClientRect();
    W = canvas.width  = Math.floor(rect.width  * DPR);
    H = canvas.height = Math.floor(rect.height * DPR);
    gl.viewport(0, 0, W, H);
  }
  const ro = new ResizeObserver(() => { resize(); if(pingFBO) initFBOs(); });
  ro.observe(canvas.parentElement);

  // REACTOR preset — hardcoded
  const P = {
    n:1.34, depth:0.72, shimmer:0.55, caustic:0.65,
    count:22, beta:0.80, bspread:0.25, speed:0.38,
    track:0.60, spawn:0.55, rings:14, rbright:0.70,
    glow:0.80, hue:0.0, decay:0.93,
  };

  const VERT = `#version 300 es
precision highp float;
in vec2 a_pos; out vec2 v_uv;
void main(){ v_uv=a_pos*0.5+0.5; gl_Position=vec4(a_pos,0,1); }`;

  const PARTICLE_FRAG = `#version 300 es
precision highp float;
in vec2 v_uv; out vec4 outColor;
uniform vec4  u_particles[60];
uniform int   u_count;
uniform float u_time;
uniform vec2  u_res;
uniform float u_n, u_beta, u_bspread, u_rings, u_rbright;
uniform float u_glow, u_hue, u_track, u_shimmer, u_caustic, u_depth;

float hash11(float p){ p=fract(p*0.1031); p*=p+33.33; p*=p+p; return fract(p); }
float hash21(vec2 p){ vec3 p3=fract(vec3(p.xyx)*vec3(0.1031,0.1030,0.0973)); p3+=dot(p3,p3.yzx+33.33); return fract((p3.x+p3.y)*p3.z); }

float wavelet(vec2 uv, vec2 ep, vec2 ed, float age, float ws, float freq){
  vec2 d=uv-ep; float dist=length(d);
  float radius=ws*age;
  if(dist>radius+0.04||dist<0.0001) return 0.0;
  float ring=exp(-pow((dist-radius)*(u_res.y*0.8),2.0));
  float cosTheta=dot(normalize(d+0.0001),ed);
  float coneAngle=acos(clamp(1.0/(u_n*(u_beta+0.001)),-1.0,1.0));
  float coneFocus=exp(-pow((acos(clamp(cosTheta,-1.0,1.0))-coneAngle)*4.0,2.0));
  float fade=exp(-age*2.5);
  return ring*(0.3+0.7*coneFocus)*fade;
}

float noise(vec2 p){ vec2 i=floor(p),f=fract(p); f=f*f*(3.0-2.0*f);
  float a=hash21(i),b=hash21(i+vec2(1,0)),c=hash21(i+vec2(0,1)),d=hash21(i+vec2(1,1));
  return mix(mix(a,b,f.x),mix(c,d,f.x),f.y); }
float fbm(vec2 p){ float v=0.,a=0.5; for(int i=0;i<4;i++){v+=a*noise(p);p=p*2.1+vec2(1.7,9.2);a*=0.5;} return v; }

// Enhanced Cherenkov palette - deeper electric blue, more violet, very little white
vec3 cherenkovColor(float t, float hueMod){
  vec3 core = vec3(0.72, 0.92, 1.0);               // electric blue-white (less white than original)
  vec3 blue = vec3(0.05 + hueMod*0.1, 0.38, 1.0);  // deep electric blue
  vec3 vio  = vec3(0.28 + hueMod*0.1, 0.08, 0.98); // saturated violet
  vec3 deep = vec3(0.02, 0.04, 0.35);               // deep indigo void
  if(t<0.2) return mix(core,blue,t/0.2);
  if(t<0.6) return mix(blue,vio,(t-0.2)/0.4);
  return mix(vio,deep,(t-0.6)/0.4);
}

void main(){
  vec2 uv=v_uv;
  vec2 pos=uv*vec2(u_res.x/u_res.y,1.0);
  float field=0.,trackField=0.,coreField=0.,colorWeight=0.;

  for(int i=0;i<60;i++){
    if(i>=u_count) break;
    vec4 p=u_particles[i];
    vec2 ppos=p.xy*vec2(u_res.x/u_res.y,1.0);
    vec2 pdir=normalize(p.zw+vec2(0.0001));
    float pidx=float(i)+0.5;
    float pbeta=clamp(u_beta+(hash11(pidx*7.3)-0.5)*u_bspread*0.8,0.5,0.9999);
    float cosThP=1.0/(u_n*pbeta);
    float thetaP=(cosThP<=1.0)?acos(cosThP):0.0;
    float sinThP=sin(thetaP), cosThP2=cos(thetaP);
    vec2 toPixel=pos-ppos;
    float fwd=dot(toPixel,pdir);
    float side=dot(toPixel,vec2(-pdir.y,pdir.x));
    float trackLen=u_track*0.6+0.1;
    if(fwd<0.0&&fwd>-trackLen){
      float coneEdgeDist=abs(side)-abs(fwd)*sinThP/max(cosThP2,0.001);
      float coneMask=exp(-pow(coneEdgeDist*u_res.y*1.2,2.0));
      float depthAlong=-fwd/trackLen;
      float fade=exp(-depthAlong*3.5)*(1.0-depthAlong*0.4);
      field+=coneMask*fade*u_rbright;
      colorWeight+=coneMask*fade*depthAlong;
    }
    int nRings=int(u_rings);
    for(int r=0;r<32;r++){
      if(r>=nRings) break;
      float fr=float(r)/float(nRings);
      vec2 ep=ppos-pdir*(fr*trackLen);
      float w=wavelet(pos,ep,pdir,fr*trackLen/max(pbeta*0.1,0.01)*0.18,pbeta*0.08,8.0);
      field+=w*u_rbright*0.6*(1.0-fr*0.5);
    }
    if(fwd>-trackLen&&fwd<0.01){
      float tw=exp(-pow(side*u_res.y*60.0,2.0));
      float tf=exp(fwd*8.0/trackLen);
      trackField+=tw*tf*u_glow;
      coreField+=exp(-pow(length(toPixel)*u_res.y*80.0,2.0))*u_glow;
    }
  }

  float t2=u_time*0.18;
  vec2 cp=uv*vec2(4.0+u_caustic*8.0);
  float c1=fbm(cp+vec2(t2*0.7,t2*0.4));
  float c2=fbm(cp*1.4-vec2(t2*0.5,t2*0.8));
  float caustic=pow(c1*c2,1.4)*u_caustic*0.25;
  float shimmerNoise=fbm(uv*12.0+vec2(t2*1.2,-t2*0.9))-0.5;
  field+=shimmerNoise*u_shimmer*0.08;
  vec2 center=uv-0.5;
  float depthVig=clamp(1.0-u_depth*(length(center)*2.0-0.2),0.0,1.0);

  float totalField=clamp(field,0.0,1.0);
  float colorT=clamp(colorWeight,0.0,1.0);
  vec3 chk=cherenkovColor(colorT,u_hue);
  vec3 trackColor=mix(chk,vec3(0.55,0.82,1.0),0.5); // blue-tinted track
  vec3 col=chk*totalField;
  col+=trackColor*clamp(trackField,0.0,1.0);
  col+=vec3(0.45,0.75,1.0)*clamp(coreField,0.0,1.0)*2.0; // electric blue core
  // Deep water base - very dark blue
  vec3 waterColor=mix(vec3(0.0,0.01,0.06),vec3(0.01+u_hue*0.02,0.04,0.22),caustic);
  col+=waterColor;
  col*=depthVig;
  float lum=dot(col,vec3(0.2126,0.7152,0.0722));
  col+=cherenkovColor(0.3,u_hue)*pow(lum,3.0)*0.5;
  outColor=vec4(col,1.0);
}`;

  const ACCUM_FRAG = `#version 300 es
precision highp float;
in vec2 v_uv; out vec4 outColor;
uniform sampler2D u_prev, u_new;
uniform float u_decay;
void main(){ outColor=max(texture(u_prev,v_uv)*u_decay, texture(u_new,v_uv)); }`;

  const COMP_FRAG = `#version 300 es
precision highp float;
in vec2 v_uv; out vec4 outColor;
uniform sampler2D u_accum;
uniform float u_time; uniform vec2 u_res;
float hash21(vec2 p){ vec3 p3=fract(vec3(p.xyx)*vec3(0.1031,0.1030,0.0973)); p3+=dot(p3,p3.yzx+33.33); return fract((p3.x+p3.y)*p3.z); }
void main(){
  vec4 col=texture(u_accum,v_uv);
  col.rgb=col.rgb/(col.rgb+0.3);
  col.rgb=pow(col.rgb,vec3(0.82));
  col.rgb+=(hash21(v_uv*u_res+u_time*37.0)-0.5)*0.018;
  vec2 c=v_uv-0.5; col.rgb*=clamp(1.0-dot(c,c)*1.8,0.0,1.0);
  outColor=vec4(clamp(col.rgb,0.0,1.0),1.0);
}`;

  function mkSh(type, src){ const s=gl.createShader(type); gl.shaderSource(s,src); gl.compileShader(s); if(!gl.getShaderParameter(s,gl.COMPILE_STATUS)) console.error('CHERENKOV:',gl.getShaderInfoLog(s)); return s; }
  function mkPg(vs,fs){ const p=gl.createProgram(); gl.attachShader(p,mkSh(gl.VERTEX_SHADER,vs)); gl.attachShader(p,mkSh(gl.FRAGMENT_SHADER,fs)); gl.linkProgram(p); return p; }

  const particleProg = mkPg(VERT, PARTICLE_FRAG);
  const accumProg    = mkPg(VERT, ACCUM_FRAG);
  const compProg     = mkPg(VERT, COMP_FRAG);

  const quadBuf = gl.createBuffer();
  gl.bindBuffer(gl.ARRAY_BUFFER, quadBuf);
  gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([-1,-1,1,-1,-1,1,1,1]), gl.STATIC_DRAW);
  function bindQuad(prog){ const l=gl.getAttribLocation(prog,'a_pos'); gl.bindBuffer(gl.ARRAY_BUFFER,quadBuf); gl.enableVertexAttribArray(l); gl.vertexAttribPointer(l,2,gl.FLOAT,false,0,0); }

  let pingFBO, pongFBO, particleFBO;
  function mkFBO(w,h){ const tex=gl.createTexture(); gl.bindTexture(gl.TEXTURE_2D,tex); gl.texImage2D(gl.TEXTURE_2D,0,gl.RGBA8,w,h,0,gl.RGBA,gl.UNSIGNED_BYTE,null); gl.texParameteri(gl.TEXTURE_2D,gl.TEXTURE_MIN_FILTER,gl.LINEAR); gl.texParameteri(gl.TEXTURE_2D,gl.TEXTURE_MAG_FILTER,gl.LINEAR); gl.texParameteri(gl.TEXTURE_2D,gl.TEXTURE_WRAP_S,gl.CLAMP_TO_EDGE); gl.texParameteri(gl.TEXTURE_2D,gl.TEXTURE_WRAP_T,gl.CLAMP_TO_EDGE); const fbo=gl.createFramebuffer(); gl.bindFramebuffer(gl.FRAMEBUFFER,fbo); gl.framebufferTexture2D(gl.FRAMEBUFFER,gl.COLOR_ATTACHMENT0,gl.TEXTURE_2D,tex,0); gl.bindFramebuffer(gl.FRAMEBUFFER,null); return{fbo,tex}; }
  function initFBOs(){ if(pingFBO){[pingFBO,pongFBO,particleFBO].filter(Boolean).forEach(f=>{gl.deleteFramebuffer(f.fbo);gl.deleteTexture(f.tex);})} pingFBO=mkFBO(W,H); pongFBO=mkFBO(W,H); particleFBO=mkFBO(W,H); for(const f of[pingFBO,pongFBO]){gl.bindFramebuffer(gl.FRAMEBUFFER,f.fbo);gl.clearColor(0,0,0,1);gl.clear(gl.COLOR_BUFFER_BIT);} gl.bindFramebuffer(gl.FRAMEBUFFER,null); }

  function getLocs(prog, us){ const l={}; us.forEach(u=>l[u]=gl.getUniformLocation(prog,u)); return l; }
  const pL = getLocs(particleProg,['u_particles','u_count','u_time','u_res','u_n','u_beta','u_bspread','u_rings','u_rbright','u_glow','u_hue','u_track','u_shimmer','u_caustic','u_depth']);
  const aL = getLocs(accumProg,['u_prev','u_new','u_decay']);
  const cL = getLocs(compProg,['u_accum','u_time','u_res']);

  const particleData = new Float32Array(60 * 4);
  const particles = [];

  function spawnParticle(init){
    while(particles.length >= P.count) particles.shift();
    const margin=0.1;
    let x,y,dx,dy;
    const edge=Math.floor(Math.random()*4);
    if(edge===0){x=-margin;y=Math.random();}
    else if(edge===1){x=1+margin;y=Math.random();}
    else if(edge===2){x=Math.random();y=-margin;}
    else{x=Math.random();y=1+margin;}
    if(init){x=Math.random();y=Math.random();}
    const cx=0.5+(Math.random()-0.5)*0.6, cy=0.5+(Math.random()-0.5)*0.6;
    const angle=Math.atan2(cy-y,cx-x)+(Math.random()-0.5)*1.2;
    const speed=P.speed*(0.6+Math.random()*0.8);
    const maxLife=(0.5+Math.random()*0.5)/speed;
    particles.push({x,y,vx:Math.cos(angle)*speed,vy:Math.sin(angle)*speed,life:0,maxLife});
  }

  resize();
  initFBOs();
  for(let i=0;i<P.count;i++) spawnParticle(true);

  let time=0, t0=performance.now(), ping=true, spawnTimer=0;

  let _raf;
  function render(now){
    requestAnimationFrame(render);
    const dt=Math.min((now-t0)/1000,0.05); t0=now; time+=dt;
    spawnTimer+=dt;
    const spawnInterval=0.5/Math.max(P.spawn,0.01);
    while(spawnTimer>spawnInterval){spawnTimer-=spawnInterval; if(particles.length<P.count) spawnParticle(false);}
    for(let i=particles.length-1;i>=0;i--){
      const p=particles[i]; p.x+=p.vx*dt; p.y+=p.vy*dt; p.life+=dt;
      if(p.life>p.maxLife||p.x<-0.2||p.x>1.2||p.y<-0.2||p.y>1.2) particles.splice(i,1);
    }
    const n=Math.min(particles.length,60);
    for(let i=0;i<n;i++){const p=particles[i]; particleData[i*4]=p.x; particleData[i*4+1]=p.y; particleData[i*4+2]=p.vx/Math.max(P.speed,0.01); particleData[i*4+3]=p.vy/Math.max(P.speed,0.01);}

    gl.bindFramebuffer(gl.FRAMEBUFFER,particleFBO.fbo); gl.viewport(0,0,W,H);
    gl.clearColor(0,0,0,1); gl.clear(gl.COLOR_BUFFER_BIT);
    gl.useProgram(particleProg); bindQuad(particleProg);
    gl.uniform4fv(pL.u_particles,particleData); gl.uniform1i(pL.u_count,n);
    gl.uniform1f(pL.u_time,time); gl.uniform2f(pL.u_res,W,H);
    gl.uniform1f(pL.u_n,P.n); gl.uniform1f(pL.u_beta,P.beta); gl.uniform1f(pL.u_bspread,P.bspread);
    gl.uniform1f(pL.u_rings,P.rings); gl.uniform1f(pL.u_rbright,P.rbright);
    gl.uniform1f(pL.u_glow,P.glow); gl.uniform1f(pL.u_hue,P.hue);
    gl.uniform1f(pL.u_track,P.track); gl.uniform1f(pL.u_shimmer,P.shimmer);
    gl.uniform1f(pL.u_caustic,P.caustic); gl.uniform1f(pL.u_depth,P.depth);
    gl.drawArrays(gl.TRIANGLE_STRIP,0,4);

    const prevFBO=ping?pingFBO:pongFBO, nextFBO=ping?pongFBO:pingFBO;
    gl.bindFramebuffer(gl.FRAMEBUFFER,nextFBO.fbo); gl.viewport(0,0,W,H);
    gl.useProgram(accumProg); bindQuad(accumProg);
    gl.activeTexture(gl.TEXTURE0); gl.bindTexture(gl.TEXTURE_2D,prevFBO.tex);
    gl.activeTexture(gl.TEXTURE1); gl.bindTexture(gl.TEXTURE_2D,particleFBO.tex);
    gl.uniform1i(aL.u_prev,0); gl.uniform1i(aL.u_new,1); gl.uniform1f(aL.u_decay,P.decay);
    gl.drawArrays(gl.TRIANGLE_STRIP,0,4); ping=!ping;

    gl.bindFramebuffer(gl.FRAMEBUFFER,null); gl.viewport(0,0,W,H);
    gl.useProgram(compProg); bindQuad(compProg);
    const accumTex=ping?pingFBO.tex:pongFBO.tex;
    gl.activeTexture(gl.TEXTURE0); gl.bindTexture(gl.TEXTURE_2D,accumTex);
    gl.uniform1i(cL.u_accum,0); gl.uniform1f(cL.u_time,time); gl.uniform2f(cL.u_res,W,H);
    gl.drawArrays(gl.TRIANGLE_STRIP,0,4);
  }
  _raf = requestAnimationFrame(render);


  // Stop RAF when card leaves viewport
  new IntersectionObserver(function(entries){
    if(!entries[0].isIntersecting) { cancelAnimationFrame(_raf); _raf = null; }
    else if(!_raf) { _raf = requestAnimationFrame(render); }
  }, { rootMargin: '150px' }).observe(document.getElementById('cherenkov-card-canvas'));
})();
  }, { rootMargin: '150px' });
  _io.observe(_el);
})();

// ══════════════════════════════════════════════════════════════════
// ACCRETION — Schwarzschild Black Hole Card Preview
// ══════════════════════════════════════════════════════════════════
(function(){
  var _el = document.getElementById('accretion-card-canvas');
  if(!_el) return;
  var _io = new IntersectionObserver(function(entries){
    if(!entries[0].isIntersecting) return;
    _io.disconnect();
    (function(){
  const canvas = document.getElementById('accretion-card-canvas');
  if (!canvas) return;
  const gl = canvas.getContext('webgl2', { antialias:false, alpha:false });
  if (!gl) { canvas.parentElement.style.background='radial-gradient(ellipse at 50% 60%,#1a0800,#000)'; return; }

  const DPR = Math.min(window.devicePixelRatio || 1, 1);
  let W, H;
  function resize(){
    const rect = canvas.parentElement.getBoundingClientRect();
    W = canvas.width  = Math.floor(rect.width  * DPR);
    H = canvas.height = Math.floor(rect.height * DPR);
    gl.viewport(0, 0, W, H);
  }
  const ro = new ResizeObserver(resize);
  ro.observe(canvas.parentElement);
  resize();

  const VS = `#version 300 es
in vec2 a_pos;
void main(){ gl_Position = vec4(a_pos,0,1); }`;

  const FS = `#version 300 es
precision highp float;
out vec4 fragColor;
uniform vec2  u_res;
uniform float u_time;

#define PI  3.14159265
#define TAU 6.28318530

float hash(float n){ return fract(sin(n)*43758.5453); }
float hash2(vec2 p){ return fract(sin(dot(p,vec2(127.1,311.7)))*43758.5453); }
float noise(vec2 p){
  vec2 i=floor(p), f=fract(p); f=f*f*(3.-2.*f);
  return mix(mix(hash2(i),hash2(i+vec2(1,0)),f.x),
             mix(hash2(i+vec2(0,1)),hash2(i+vec2(1,1)),f.x),f.y);
}

vec3 blackbody(float t){
  vec3 hot  = vec3(1.0, 0.88, 0.65);
  vec3 mid  = vec3(1.0, 0.42, 0.04);
  vec3 cool = vec3(0.38, 0.02, 0.01);
  if(t > 0.5) return mix(mid, hot, (t-0.5)*2.0);
  return mix(cool, mid, t*2.0);
}

void main(){
  vec2 uv  = (gl_FragCoord.xy - u_res*0.5) / min(u_res.x, u_res.y);
  float t  = u_time;

  // View: low elevation, perspective projection of disk
  // Map 2D screen coords to 3D disk plane seen at angle
  float elev = 0.30;          // ~17 degrees elevation
  float az   = t * 0.13;      // slow orbit

  // Project uv into disk-plane coords
  // x-axis = right, y-axis squashed by cos(elev) to simulate perspective
  float cosA = cos(az), sinA = sin(az);
  // rotate by azimuth
  vec2 rot = vec2(uv.x*cosA - uv.y*sinA*sin(elev),
                  uv.x*sinA + uv.y*cosA*sin(elev));
  float diskX = rot.x;
  float diskZ = rot.y / max(cos(elev), 0.15);

  float radius  = sqrt(diskX*diskX + diskZ*diskZ);
  float angle   = atan(diskZ, diskX);

  vec3  col    = vec3(0.0);

  // -- Stars (hash-based, no loop) --------------------------------
  // Tile screen into cells, one possible star per cell
  vec2 stCell = floor(uv * 28.0);
  vec2 stFrac = fract(uv * 28.0);
  for(int si = -1; si <= 1; si++){
    for(int sj = -1; sj <= 1; sj++){
      vec2 nc   = stCell + vec2(si, sj);
      float h1  = hash2(nc);
      float h2  = hash2(nc + 7.3);
      float h3  = hash2(nc + 13.7);
      if(h1 < 0.88) continue; // ~12% cells have a star
      vec2  spos = vec2(h2, h3); // star position within cell
      vec2  offs = stFrac - vec2(si,sj) - spos;
      float d    = length(offs * 28.0);
      float grav = 1.0 + 0.18 / max(radius*radius, 0.04); // lensing distortion
      float star = exp(-d*d * grav * 18.0);
      vec3  sc   = mix(vec3(0.7,0.85,1.0), vec3(1.0,0.95,0.8), hash2(nc+3.1));
      col += sc * star * 0.55;
    }
  }

  // -- Event horizon shadow ---------------------------------------
  float rs   = 0.16; // Schwarzschild radius in screen space
  float bhMask = smoothstep(rs, rs*0.7, radius);

  // -- Gravitational lensing warp ---------------------------------
  // Distort coordinates near center (approximate photon deflection)
  float lensStr = 0.045 / max(radius*radius, 0.005);
  vec2  lensUV  = uv + normalize(uv+0.0001) * lensStr;
  float lRadius = length(lensUV);

  // -- Accretion disk ---------------------------------------------
  float diskRI = 0.175;
  float diskRO = 0.72;
  if(radius > diskRI * 0.9 && radius < diskRO * 1.1){
    // Keplerian rotation: omega ~ r^-1.5
    float omega  = 0.22 / pow(max(radius, diskRI), 1.5);
    float phase  = angle - omega * t;

    float radT   = pow(1.0 - smoothstep(diskRI, diskRO*0.5, radius), 0.6);
    // Doppler beaming: side rotating toward viewer (angle ~ 0) is brighter
    float vAngle = angle - az;       // angle relative to camera azimuth
    float doppler= clamp(1.0 + 0.75*sin(vAngle), 0.2, 2.4);
    float grav   = sqrt(max(0.0, 1.0 - (rs*1.05)/max(radius, rs)));

    // Plasma texture: single noise call
    float plasma = noise(vec2(radius*3.8 + t*0.009, phase*1.4));
    // Disk thickness: thin at inner edge, thicker outward
    float thick  = diskRI * 0.35 + radius * 0.14;
    // Vertical fade: the disk appears as an ellipse due to elevation
    float vertR  = abs(uv.y - (diskX * sin(elev)));
    float vert   = exp(-vertR / thick * 5.5);

    float dens   = plasma * vert * smoothstep(diskRI*0.9, diskRI*1.1, radius)
                 * smoothstep(diskRO*1.05, diskRO*0.85, radius);

    vec3  dcol   = blackbody(radT) * doppler * grav;
    // Teal bioluminescent wisps in outer disk
    float bio    = (1.0 - radT) * noise(vec2(radius*5.0 + t*0.02, phase*2.0)) * 0.5;
    dcol        += vec3(0.0, 0.7, 0.55) * bio;

    col = mix(col, col + dcol * dens * 2.2, dens * 0.85);
  }

  // -- Relativistic jets ------------------------------------------
  // Project vertical jets onto the 2D view
  // Jets appear as vertical streaks above/below center
  float jx     = abs(uv.x - (-az*0.0)); // jet centered on BH
  float jyAbs  = abs(uv.y);
  float jetMask = exp(-jx*jx * 140.0) * smoothstep(rs*1.3, rs*1.8, jyAbs)
                * smoothstep(0.55, 0.3, jyAbs);
  // Plasma knots drifting outward
  float knot   = 0.5 + 0.5*sin(jyAbs * 22.0 - sign(uv.y) * t * 2.5);
  knot        *= 0.6 + 0.4*sin(jyAbs * 41.0 - sign(uv.y) * t * 4.1);
  vec3  jetCol = mix(vec3(0.1, 0.75, 1.0), vec3(0.4, 1.0, 0.8), knot);
  col         += jetCol * jetMask * knot * 0.9;

  // -- Einstein lensing ring --------------------------------------
  float ringR  = 0.185;
  float ring   = exp(-pow((radius - ringR)*38.0, 2.0));
  ring        *= 0.65 + 0.35*sin(t*0.55);
  // Brighter on approaching side
  float ringSide = clamp(1.0 + 0.6*sin(angle - az), 0.3, 2.0);
  col         += mix(vec3(0.9,0.55,0.12), vec3(1.0,0.88,0.55), ring)
               * ring * ringSide * 0.85;

  // -- Hawking shimmer at horizon boundary -----------------------
  float shimProx = smoothstep(rs*2.2, rs*1.0, radius) * smoothstep(rs*0.8, rs*1.0, radius);
  float shim     = noise(uv * 14.0 + t*2.3) * shimProx * 0.35;
  col           += vec3(0.25, 0.85, 1.0) * shim;

  // -- Black hole shadow ------------------------------------------
  col *= bhMask;

  // -- Bloom -----------------------------------------------------
  float lum = dot(col, vec3(0.2126,0.7152,0.0722));
  col += vec3(1.0,0.48,0.08) * pow(max(lum-0.45, 0.0), 2.2) * 0.55;

  // -- Tonemap + gamma --------------------------------------------
  col  = col / (col + vec3(0.35));
  col  = pow(max(col, vec3(0.0)), vec3(0.88));

  // -- Vignette --------------------------------------------------
  col *= clamp(1.0 - dot(uv,uv)*0.95, 0.0, 1.0);

  fragColor = vec4(clamp(col,0.0,1.0), 1.0);
}`;

  function mkSh(t, s){ const sh=gl.createShader(t); gl.shaderSource(sh,s); gl.compileShader(sh); if(!gl.getShaderParameter(sh,gl.COMPILE_STATUS)) console.error('ACCRETION:',gl.getShaderInfoLog(sh)); return sh; }
  const prog = gl.createProgram();
  gl.attachShader(prog, mkSh(gl.VERTEX_SHADER, VS));
  gl.attachShader(prog, mkSh(gl.FRAGMENT_SHADER, FS));
  gl.linkProgram(prog);
  if(!gl.getProgramParameter(prog, gl.LINK_STATUS)){ console.error('ACCRETION link:',gl.getProgramInfoLog(prog)); return; }
  gl.useProgram(prog);

  const buf = gl.createBuffer();
  gl.bindBuffer(gl.ARRAY_BUFFER, buf);
  gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([-1,-1,1,-1,-1,1,1,1]), gl.STATIC_DRAW);
  const loc = gl.getAttribLocation(prog, 'a_pos');
  gl.enableVertexAttribArray(loc);
  gl.vertexAttribPointer(loc, 2, gl.FLOAT, false, 0, 0);

  const uRes = gl.getUniformLocation(prog,'u_res');
  const uTime= gl.getUniformLocation(prog,'u_time');

  let time=0, last=0;
  let _raf;
  function frame(ts){
    requestAnimationFrame(frame);
    const dt=Math.min((ts-last)/1000,0.05); last=ts; time+=dt;
    gl.uniform2f(uRes,W,H); gl.uniform1f(uTime,time);
    gl.drawArrays(gl.TRIANGLE_STRIP,0,4);
  }
  _raf = requestAnimationFrame(frame);


  // Stop RAF when card leaves viewport
  new IntersectionObserver(function(entries){
    if(!entries[0].isIntersecting) { cancelAnimationFrame(_raf); _raf = null; }
    else if(!_raf) { _raf = requestAnimationFrame(frame); }
  }, { rootMargin: '150px' }).observe(document.getElementById('accretion-card-canvas'));
})();
  }, { rootMargin: '150px' });
  _io.observe(_el);
})();

// ══════════════════════════════════════════════════════════════════
// DESCENT -- Rayleigh-Taylor Instability Card Preview
// Pure analytical shader: visually driven RT fingers with chromostereopsis
// ======================================================================
(function(){
  var _el = document.getElementById('descent-card-canvas');
  if(!_el) return;
  var _io = new IntersectionObserver(function(entries){
    if(!entries[0].isIntersecting) return;
    _io.disconnect();
    (function(){
  const canvas = document.getElementById('descent-card-canvas');
  if (!canvas) return;
  const gl = canvas.getContext('webgl2', { antialias:false, alpha:false });
  if (!gl) { canvas.parentElement.style.background='linear-gradient(180deg,#0a0010,#000)'; return; }

  const DPR = Math.min(window.devicePixelRatio || 1, 1);
  let W, H;
  function resize(){
    const rect = canvas.parentElement.getBoundingClientRect();
    W = canvas.width  = Math.floor(rect.width  * DPR);
    H = canvas.height = Math.floor(rect.height * DPR);
    gl.viewport(0, 0, W, H);
  }

  const VS = `#version 300 es
in vec2 a_pos;
void main(){ gl_Position = vec4(a_pos,0,1); }`;

  const FS = `#version 300 es
precision highp float;
out vec4 fragColor;
uniform vec2  u_res;
uniform float u_time;

float hash(float n){ return fract(sin(n)*43758.5453); }
float hash2(vec2 p){ return fract(sin(dot(p,vec2(127.1,311.7)))*43758.5453); }
float noise(vec2 p){
  vec2 i=floor(p),f=fract(p); f=f*f*(3.0-2.0*f);
  return mix(mix(hash2(i),hash2(i+vec2(1,0)),f.x),
             mix(hash2(i+vec2(0,1)),hash2(i+vec2(1,1)),f.x),f.y);
}
float fbm(vec2 p){
  float v=0.0,a=0.5;
  for(int i=0;i<3;i++){v+=a*noise(p);p=p*2.1+vec2(1.7,9.2);a*=0.5;}
  return v;
}

void main(){
  vec2 uv = gl_FragCoord.xy / u_res;
  float t  = u_time * 0.55;
  float aspect = u_res.x / u_res.y;

  // RT fingers: multiple sinusoidal modes falling downward at different speeds
  // Each finger is a column of heavy (red) fluid descending
  float finger = 0.0;
  float xn = uv.x;

  // Primary fingers: 5 main modes
  for(int k=1; k<=5; k++){
    float fk  = float(k);
    float freq = 3.0 + fk * 1.8;
    float spd  = 0.18 + fk * 0.07;
    float amp  = 0.04 + 0.02 / fk;
    // Finger boundary: wavy vertical interface moving down
    float bnd  = 0.5 + amp * sin(xn * freq * 6.28318 + hash(fk) * 6.28318)
                     + 0.03 * sin(xn * freq * 2.3 + t * 0.4 + fk)
                     - spd * t;  // falls downward
    bnd = mod(bnd, 1.0);        // wrap so fingers re-enter from top
    float w = 0.045 + 0.01/fk;  // finger width
    finger += smoothstep(w, 0.0, abs(uv.y - bnd)) / fk;
  }
  finger = clamp(finger * 2.0, 0.0, 1.0);

  // Rising plumes: light fluid mushroom caps between fingers
  float plume = 0.0;
  for(int k=1; k<=4; k++){
    float fk  = float(k);
    float freq = 2.5 + fk * 2.1;
    float spd  = 0.14 + fk * 0.05;
    float bnd  = 0.5 - 0.035 * sin(xn * freq * 6.28318 + hash(fk+7.3) * 6.28318)
                     + spd * t;  // rises upward
    bnd = 1.0 - mod(bnd, 1.0); // invert so it rises
    float w = 0.04;
    plume += smoothstep(w, 0.0, abs(uv.y - bnd)) / fk;
  }
  plume = clamp(plume * 2.0, 0.0, 1.0);

  // Turbulent mixing at interface: fbm noise field
  float mixZone = fbm(vec2(uv.x * 3.5, uv.y * 3.5 - t * 0.3));
  float mixZone2= fbm(vec2(uv.x * 6.0 + 1.7, uv.y * 6.0 + t * 0.22));
  float mix_     = mixZone * mixZone2 * 2.5;

  // Chromostereopsis coloring
  // Heavy (red-magenta): appears CLOSER to eye
  vec3 heavyCol = mix(vec3(0.04, 0.0, 0.06),
                      vec3(1.0,  0.04, 0.32),
                      pow(finger, 0.7));
  // Mushroom cap vortex: vivid crimson at curling tips
  heavyCol += vec3(0.7, 0.0, 0.1) * finger * (0.5 + 0.5*sin(uv.y * 22.0 - t * 2.2));

  // Light (blue-cyan): appears FURTHER from eye
  vec3 liteCol = mix(vec3(0.0, 0.0, 0.05),
                     vec3(0.04, 0.52, 1.0),
                     pow(plume, 0.7));
  liteCol += vec3(0.0, 0.85, 0.75) * plume * (0.5 + 0.5*sin(uv.y * 18.0 + t * 1.8));

  // Interface reaction zone: acid green + iridescent white
  float iface = finger * plume * 4.0 + mix_ * 0.25;
  vec3 ifaceCol = vec3(0.3, 1.0, 0.5) * iface * 0.6;
  ifaceCol += vec3(0.85, 0.65, 1.0) * (finger * plume) * 0.8;

  vec3 col = heavyCol + liteCol + ifaceCol;

  // Chromatic lateral fringe: widens the depth illusion
  float chromaR = clamp(finger * 1.5, 0.0, 1.0);
  float chromaB = clamp(plume  * 1.5, 0.0, 1.0);
  col.r += chromaR * 0.12;
  col.b += chromaB * 0.12;

  // Bloom
  float lum = dot(col, vec3(0.2126,0.7152,0.0722));
  col += mix(vec3(0.9,0.2,0.8), vec3(0.1,0.8,0.6), clamp(plume-finger+0.5,0.0,1.0))
       * pow(max(lum-0.45,0.0), 2.2) * 0.7;

  // Tonemap + gamma
  col = col / (col + vec3(0.38));
  col = pow(max(col, vec3(0.0)), vec3(0.88));

  // Vignette
  vec2 ctr = uv - 0.5;
  col *= clamp(1.0 - dot(ctr,ctr)*1.3, 0.0, 1.0);

  fragColor = vec4(clamp(col,0.0,1.0), 1.0);
}`;

  function mkSh(type, src){
    const s = gl.createShader(type);
    gl.shaderSource(s, src); gl.compileShader(s);
    if(!gl.getShaderParameter(s, gl.COMPILE_STATUS))
      console.error('DESCENT:', gl.getShaderInfoLog(s));
    return s;
  }
  const prog = gl.createProgram();
  gl.attachShader(prog, mkSh(gl.VERTEX_SHADER, VS));
  gl.attachShader(prog, mkSh(gl.FRAGMENT_SHADER, FS));
  gl.linkProgram(prog);
  if(!gl.getProgramParameter(prog, gl.LINK_STATUS)){
    console.error('DESCENT link:', gl.getProgramInfoLog(prog)); return;
  }
  gl.useProgram(prog);

  const buf = gl.createBuffer();
  gl.bindBuffer(gl.ARRAY_BUFFER, buf);
  gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([-1,-1,1,-1,-1,1,1,1]), gl.STATIC_DRAW);
  const loc = gl.getAttribLocation(prog, 'a_pos');
  gl.enableVertexAttribArray(loc);
  gl.vertexAttribPointer(loc, 2, gl.FLOAT, false, 0, 0);

  const uRes  = gl.getUniformLocation(prog, 'u_res');
  const uTime = gl.getUniformLocation(prog, 'u_time');

  const ro = new ResizeObserver(resize);
  ro.observe(canvas.parentElement);
  resize();

  let time=0, last=0;
  let _raf;
  function frame(ts){
    requestAnimationFrame(frame);
    const dt=Math.min((ts-last)/1000,0.05); last=ts; time+=dt;
    gl.uniform2f(uRes, W, H);
    gl.uniform1f(uTime, time);
    gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
  }
  _raf = requestAnimationFrame(frame);


  // Stop RAF when card leaves viewport
  new IntersectionObserver(function(entries){
    if(!entries[0].isIntersecting) { cancelAnimationFrame(_raf); _raf = null; }
    else if(!_raf) { _raf = requestAnimationFrame(frame); }
  }, { rootMargin: '150px' }).observe(document.getElementById('descent-card-canvas'));
})();
  }, { rootMargin: '150px' });
  _io.observe(_el);
})();


// ======================================================================
// CYMATIC -- Standing Wave Resonance Card Preview
// Chladni figures from superposed 2D wave modes
// Nodal lines = where the plate refuses to move
// Phosphor thermal palette: hot antinodes, dark nodes
// ======================================================================
(function(){
  var _el = document.getElementById('cymatic-card-canvas');
  if(!_el) return;
  var _io = new IntersectionObserver(function(entries){
    if(!entries[0].isIntersecting) return;
    _io.disconnect();
    (function(){
  const canvas = document.getElementById('cymatic-card-canvas');
  if (!canvas) return;
  const gl = canvas.getContext('webgl2', { antialias:false, alpha:false });
  if (!gl) { canvas.parentElement.style.background='radial-gradient(ellipse,#0a0820,#000)'; return; }

  const DPR = Math.min(window.devicePixelRatio || 1, 1);
  let W, H;
  function resize(){
    const rect = canvas.parentElement.getBoundingClientRect();
    W = canvas.width  = Math.floor(rect.width  * DPR);
    H = canvas.height = Math.floor(rect.height * DPR);
    gl.viewport(0, 0, W, H);
  }
  new ResizeObserver(resize).observe(canvas.parentElement);
  resize();

  const VS = `#version 300 es
in vec2 a_pos;
void main(){ gl_Position = vec4(a_pos,0,1); }`;

  const FS = `#version 300 es
precision highp float;
out vec4 fragColor;
uniform vec2  u_res;
uniform float u_time;

#define PI  3.14159265
#define TAU 6.28318530

float hash(float n){ return fract(sin(n)*43758.5453); }

// 2D Chladni mode: standing wave on a square plate
// mode(m,n,x,y) = cos(m*pi*x) * cos(n*pi*y) - cos(n*pi*x) * cos(m*pi*y)
// Nodal lines are where this = 0
float chladni(float m, float n, float x, float y){
  return cos(m*PI*x) * cos(n*PI*y) - cos(n*PI*x) * cos(m*PI*y);
}

// Superpose multiple modes for richer pattern
float field(vec2 uv, float t){
  // Slowly morph between mode pairs
  // Cycle through: (2,1)->(3,1)->(2,3)->(4,1)->(3,2)->(4,3)
  float cycle = t * 0.08;
  float phase = fract(cycle);
  // Smooth transition between modes using sin-eased blend
  float blend = smoothstep(0.0, 1.0, sin(phase * PI));

  int idx = int(mod(floor(cycle), 6.0));

  float m1, n1, m2, n2;
  if(idx == 0){ m1=2.; n1=1.; m2=3.; n2=1.; }
  else if(idx == 1){ m1=3.; n1=1.; m2=2.; n2=3.; }
  else if(idx == 2){ m1=2.; n1=3.; m2=4.; n2=1.; }
  else if(idx == 3){ m1=4.; n1=1.; m2=3.; n2=2.; }
  else if(idx == 4){ m1=3.; n1=2.; m2=4.; n2=3.; }
  else             { m1=4.; n1=3.; m2=2.; n2=1.; }

  float f1 = chladni(m1, n1, uv.x, uv.y);
  float f2 = chladni(m2, n2, uv.x, uv.y);

  // Blend between the two modes
  return mix(f1, f2, blend);
}

// Phosphor thermal palette
// nodes (|f|~0) -> deep indigo
// rising -> violet -> electric blue
// antinodes (|f|=max) -> cyan -> white-hot
vec3 phosphor(float amp){
  // amp: 0=node, 1=antinode
  vec3 node     = vec3(0.01, 0.005, 0.04);   // deep indigo void
  vec3 low      = vec3(0.08, 0.02,  0.28);   // dim violet
  vec3 mid      = vec3(0.05, 0.20,  0.85);   // electric blue
  vec3 high     = vec3(0.0,  0.85,  0.95);   // bright cyan
  vec3 peak     = vec3(0.85, 0.95,  1.0);    // near-white phosphor bloom

  if(amp < 0.25) return mix(node,  low,  amp/0.25);
  if(amp < 0.5)  return mix(low,   mid,  (amp-0.25)/0.25);
  if(amp < 0.75) return mix(mid,   high, (amp-0.5)/0.25);
  return mix(high, peak, (amp-0.75)/0.25);
}

void main(){
  // Map pixel to plate coords [0,1] x [0,1]
  vec2 uv = gl_FragCoord.xy / u_res;
  // Keep square aspect
  float aspect = u_res.x / u_res.y;
  vec2 suv = uv;
  if(aspect > 1.0){
    suv.x = (uv.x - 0.5) / aspect + 0.5;
  } else {
    suv.y = (uv.y - 0.5) * aspect + 0.5;
  }

  float t = u_time;
  float f = field(suv, t);

  // Amplitude: distance from zero (nodal line)
  // Nodal lines are the dark grooves where sand accumulates
  float amp = abs(f);

  // Sharpen the nodal lines - sand piles up sharply at nodes
  // Use a power curve to create bright antinodes and dark sharp nodes
  float sharpened = pow(amp, 0.45);

  // Subtle secondary pattern: interference shimmer at antinodes
  float shimmer = sin(f * 12.0 + t * 1.8) * 0.5 + 0.5;
  shimmer *= smoothstep(0.3, 0.7, amp);    // only at antinodes

  float finalAmp = sharpened + shimmer * 0.12;

  // Nodal line glow: thin bright line exactly at node boundary
  float nodeGlow = exp(-pow(amp * 18.0, 2.0)) * 0.4;
  vec3 nodeColor = vec3(0.3, 0.15, 0.8);   // violet node glow

  vec3 col = phosphor(clamp(finalAmp, 0.0, 1.0));
  col += nodeColor * nodeGlow;

  // Plate boundary vignette
  vec2 ctr = suv - 0.5;
  float bnd = max(abs(ctr.x), abs(ctr.y));
  float plate = 1.0 - smoothstep(0.46, 0.50, bnd);
  col *= plate;

  // Outer dark fade
  col *= clamp(1.0 - dot((uv-0.5),(uv-0.5))*2.2, 0.0, 1.0);

  // Bloom
  float lum = dot(col, vec3(0.2126,0.7152,0.0722));
  col += vec3(0.1, 0.5, 1.0) * pow(max(lum-0.6, 0.0), 2.0) * 0.8;

  // Tonemap + gamma
  col  = col / (col + vec3(0.3));
  col  = pow(max(col, vec3(0.0)), vec3(0.88));

  fragColor = vec4(clamp(col,0.0,1.0), 1.0);
}`;

  function mkSh(type, src){
    const s = gl.createShader(type);
    gl.shaderSource(s, src); gl.compileShader(s);
    if(!gl.getShaderParameter(s, gl.COMPILE_STATUS))
      console.error('CYMATIC:', gl.getShaderInfoLog(s));
    return s;
  }
  const prog = gl.createProgram();
  gl.attachShader(prog, mkSh(gl.VERTEX_SHADER, VS));
  gl.attachShader(prog, mkSh(gl.FRAGMENT_SHADER, FS));
  gl.linkProgram(prog);
  if(!gl.getProgramParameter(prog, gl.LINK_STATUS)){
    console.error('CYMATIC link:', gl.getProgramInfoLog(prog)); return;
  }
  gl.useProgram(prog);

  const buf = gl.createBuffer();
  gl.bindBuffer(gl.ARRAY_BUFFER, buf);
  gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([-1,-1,1,-1,-1,1,1,1]), gl.STATIC_DRAW);
  const loc = gl.getAttribLocation(prog, 'a_pos');
  gl.enableVertexAttribArray(loc);
  gl.vertexAttribPointer(loc, 2, gl.FLOAT, false, 0, 0);

  const uRes  = gl.getUniformLocation(prog, 'u_res');
  const uTime = gl.getUniformLocation(prog, 'u_time');

  let time=0, last=0;
  let _raf;
  function frame(ts){
    requestAnimationFrame(frame);
    const dt=Math.min((ts-last)/1000,0.05); last=ts; time+=dt;
    gl.uniform2f(uRes, W, H);
    gl.uniform1f(uTime, time);
    gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
  }
  _raf = requestAnimationFrame(frame);
    

  // Stop RAF when card leaves viewport
  new IntersectionObserver(function(entries){
    if(!entries[0].isIntersecting) { cancelAnimationFrame(_raf); _raf = null; }
    else if(!_raf) { _raf = requestAnimationFrame(frame); }
  }, { rootMargin: '150px' }).observe(document.getElementById('cymatic-card-canvas'));
})();
  }, { rootMargin: '150px' });
  _io.observe(_el);
})();

// MYCEL -- Mycelium Network Card Preview
// ==================================================================
(function(){
  var _el = document.getElementById('mycel-card-canvas');
  if(!_el) return;
  var _io = new IntersectionObserver(function(entries){
    if(!entries[0].isIntersecting) return;
    _io.disconnect();
    (function(){
  const canvas = document.getElementById('mycel-card-canvas');
  if(!canvas) return;
  const ctx = canvas.getContext('2d');
  const W = 300, H = 300;
  canvas.width = W; canvas.height = H;

  // Nutrient field -- fades toward edges, brighter center-ish cluster
  const nutrient = new Float32Array(W * H);
  for(let y = 0; y < H; y++){
    for(let x = 0; x < W; x++){
      const nx = (x / W - 0.5) * 2;
      const ny = (y / H - 0.5) * 2;
      // Three nutrient hotspots
      const d0 = Math.exp(-(nx*nx + ny*ny) * 2.5);
      const d1 = Math.exp(-((nx+0.55)*(nx+0.55) + (ny-0.4)*(ny-0.4)) * 4.0);
      const d2 = Math.exp(-((nx-0.5)*(nx-0.5) + (ny+0.5)*(ny+0.5)) * 4.0);
      nutrient[y * W + x] = d0 * 0.6 + d1 * 0.5 + d2 * 0.5;
    }
  }

  // Persistence trail buffer
  const trail = new Float32Array(W * H);

  // Hyphal tips
  const MAX_TIPS = 180;
  const tips = [];

  function hash(n){ return (Math.sin(n * 127.1 + 311.7) * 43758.5453) % 1; }
  function rng(seed){ return Math.abs(hash(seed)); }

  function spawnTip(x, y, angle, gen, seed){
    if(tips.length >= MAX_TIPS) return;
    tips.push({ x, y, angle, gen, age: 0, seed, dead: false, len: 0 });
  }

  // Seed from center + slight scatter
  spawnTip(W/2, H/2, Math.random() * Math.PI * 2, 0, 1);
  spawnTip(W/2 + 8, H/2 - 5, Math.random() * Math.PI * 2, 0, 2);
  spawnTip(W/2 - 6, H/2 + 9, Math.random() * Math.PI * 2, 0, 3);

  let t = 0;
  let _raf;

  function step(){
    // Diffuse trail (slight decay)
    for(let i = 0; i < W * H; i++) trail[i] *= 0.992;

    const newTips = [];
    for(let i = 0; i < tips.length; i++){
      const tip = tips[i];
      if(tip.dead) continue;

      // Sample nutrient gradient ahead
      const ahead = 6;
      const lx = tip.x + Math.cos(tip.angle - 0.4) * ahead;
      const cx = tip.x + Math.cos(tip.angle) * ahead;
      const rx = tip.x + Math.cos(tip.angle + 0.4) * ahead;
      const ly = tip.y + Math.sin(tip.angle - 0.4) * ahead;
      const cy = tip.y + Math.sin(tip.angle) * ahead;
      const ry = tip.y + Math.sin(tip.angle + 0.4) * ahead;

      function sampleN(px, py){
        const ix = Math.floor(px), iy = Math.floor(py);
        if(ix < 0 || ix >= W || iy < 0 || iy >= H) return 0;
        return nutrient[iy * W + ix];
      }
      function sampleT(px, py){
        const ix = Math.floor(px), iy = Math.floor(py);
        if(ix < 0 || ix >= W || iy < 0 || iy >= H) return 1;
        return trail[iy * W + ix];
      }

      const nL = sampleN(lx, ly) - sampleT(lx, ly) * 0.3;
      const nC = sampleN(cx, cy) - sampleT(cx, cy) * 0.3;
      const nR = sampleN(rx, ry) - sampleT(rx, ry) * 0.3;

      // Steer toward best gradient
      let turn = 0;
      if(nL > nC && nL > nR) turn = -0.25;
      else if(nR > nC && nR > nL) turn = 0.25;
      // Add noise wobble
      turn += (rng(tip.seed + t * 0.07 + i) - 0.5) * 0.35;
      tip.angle += turn;

      // Advance
      const speed = 1.2;
      const px = tip.x + Math.cos(tip.angle) * speed;
      const py = tip.y + Math.sin(tip.angle) * speed;

      // Boundary kill
      if(px < 2 || px > W-2 || py < 2 || py > H-2){ tip.dead = true; continue; }

      // Deposit trail
      const ix = Math.floor(px), iy = Math.floor(py);
      trail[iy * W + ix] = Math.min(1.0, trail[iy * W + ix] + 0.6);

      tip.x = px; tip.y = py;
      tip.age++; tip.len++;

      // Anastomosis -- die if crossing dense trail (loop formation)
      if(sampleT(px, py) > 0.75 && tip.age > 15){ tip.dead = true; continue; }

      // Branch
      const maxLen = 80 + tip.gen * 20;
      const branchProb = tip.gen < 3 ? 0.012 - tip.gen * 0.003 : 0;
      if(tip.len > 12 && rng(tip.seed + t * 0.13 + i * 7) < branchProb && tips.length < MAX_TIPS){
        const bAngle = tip.angle + (rng(tip.seed + i) > 0.5 ? 1 : -1) * (0.5 + rng(tip.seed * 3 + i) * 0.4);
        newTips.push({ x: tip.x, y: tip.y, angle: bAngle, gen: tip.gen + 1,
                       age: 0, seed: tip.seed * 17 + i, dead: false, len: 0 });
      }

      // Age death
      if(tip.age > maxLen) tip.dead = true;
    }
    for(const nt of newTips) tips.push(nt);

    // Respawn from center when population low
    const alive = tips.filter(t => !t.dead).length;
    if(alive < 8 && rng(t * 0.3) < 0.15){
      const a = rng(t * 7.3) * Math.PI * 2;
      spawnTip(W/2 + (rng(t)-0.5)*20, H/2 + (rng(t*2)-0.5)*20, a, 0, t);
    }
  }

  function render(){
    ctx.fillStyle = 'rgba(2,5,7,0.18)';
    ctx.fillRect(0, 0, W, H);

    // Draw trail glow
    const imgData = ctx.getImageData(0, 0, W, H);
    const px = imgData.data;
    for(let y = 0; y < H; y++){
      for(let x = 0; x < W; x++){
        const v = trail[y * W + x];
        if(v < 0.01) continue;
        const idx = (y * W + x) * 4;
        // Amber-white mycelium color: warm white core, amber halo
        const bright = Math.min(255, v * 220);
        const g = Math.min(255, v * 180);
        const b = Math.min(255, v * 80);
        px[idx]     = Math.max(px[idx],     bright);
        px[idx + 1] = Math.max(px[idx + 1], g);
        px[idx + 2] = Math.max(px[idx + 2], b);
        px[idx + 3] = 255;
      }
    }
    ctx.putImageData(imgData, 0, 0);

    // Draw active tips as bright points
    for(const tip of tips){
      if(tip.dead) continue;
      const alpha = 0.9;
      ctx.beginPath();
      ctx.arc(tip.x, tip.y, 1.2, 0, Math.PI * 2);
      ctx.fillStyle = `rgba(255,240,180,${alpha})`;
      ctx.fill();
    }
  }

  function frame(){
    _raf = requestAnimationFrame(frame);
    for(let i = 0; i < 3; i++) step();
    t++;
    render();
  }

  // Stop RAF when card leaves viewport
  new IntersectionObserver(function(entries){
    if(!entries[0].isIntersecting){ cancelAnimationFrame(_raf); _raf = null; }
    else if(!_raf){ _raf = requestAnimationFrame(frame); }
  }, { rootMargin: '150px' }).observe(document.getElementById('mycel-card-canvas'));

  frame();
    })();
  }, { rootMargin: '150px' });
  _io.observe(_el);
})();


</script>
</body>
</html>