/* Hero stage: frameless on the paper ground. The object and pedestal are the hero of the column; a
   soft violet glow sits behind them (light, not a panel), and the quiet
   "Bullish on X?" card sits under the pedestal. */
.hero-art{border-radius:0;overflow:visible;background:none;isolation:isolate}
/* Violet light behind the object and pedestal: a wide, low (11% peak) ellipse with a long eased falloff, so it
   blends into the hero wash instead of reading as a halo. The hero grain sits over it. */
.hero-art:before{content:'';position:absolute;z-index:-1;pointer-events:none;left:-40%;right:-40%;top:calc(var(--stage-glow-y,50%) - var(--stage-glow-r,300px));height:calc(var(--stage-glow-r,300px) * 2);
  background:radial-gradient(ellipse 50% 50% at 50% 50%,rgba(132,110,226,.11) 0,rgba(132,110,226,.095) 12%,rgba(136,116,226,.075) 25%,rgba(140,122,226,.053) 38%,rgba(146,130,228,.034) 51%,rgba(150,136,228,.019) 64%,rgba(155,142,230,.008) 78%,rgba(160,148,232,.002) 90%,rgba(160,148,232,0) 100%)}
.hero-art:after{content:none}
.hero-art .market-artwork{animation:none;transform:none}
.hero-art .market-artwork .market-image{visibility:hidden}

.stage-cam{position:absolute;pointer-events:none;perspective:1400px;perspective-origin:50% 45%}
.stage-rig{position:absolute;inset:0;transform-style:preserve-3d;will-change:transform}
.stage-pedestal{position:absolute;display:block}
/* Soft floor shadow under the pedestal, so it rests on the paper instead of floating. */
.stage-ground{position:absolute;left:12%;width:76%;top:66.5%;height:9%;border-radius:50%;background:radial-gradient(closest-side,rgba(33,34,31,.2),rgba(33,34,31,.07) 60%,rgba(33,34,31,0))}
.stage-obj{position:absolute;opacity:0;transform-style:preserve-3d;will-change:transform,opacity}
.stage-obj.is-current{opacity:1}
.stage-obj .float{position:relative;width:100%;height:100%}
.stage-obj img{display:block;width:100%;height:100%}
/* Contact shadow on the pedestal top: olive, so it reads as shade on lime rather than grey. */
.stage-shadow{position:absolute;border-radius:50%;background:radial-gradient(closest-side,rgba(52,74,8,.42),rgba(52,74,8,.14) 55%,rgba(52,74,8,0));transform-origin:50% 50%}

/* Idle float: a slow, small rise; the shadow tightens as the object lifts. No sway. */
.stage-obj.is-current .float{animation:stage-float 4.8s cubic-bezier(.45,0,.55,1) infinite}
.stage-obj.is-current .stage-shadow{animation:stage-shadow 4.8s cubic-bezier(.45,0,.55,1) infinite}
.hero-art:not(.is-animating) .stage-obj .float,.hero-art:not(.is-animating) .stage-shadow{animation-play-state:paused}
@keyframes stage-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-2.4%)}}
@keyframes stage-shadow{0%,100%{scale:1;opacity:1}50%{scale:.88;opacity:.7}}

/* Overlay pieces on paper: a small, quiet pause button top right, and a smaller card centred under
   the pedestal so it supports the object instead of competing with it. */
.hero-art .art-topline{top:0;left:auto;right:0;z-index:3}
.hero-art .art-topline>img{display:none}
.hero-art .animation-toggle{width:32px;height:32px;border:0;background:rgba(33,34,31,.05);color:var(--muted);backdrop-filter:none;box-shadow:none;transition:background .35s ease,color .35s ease,transform .3s}
.hero-art .animation-toggle svg{width:16px;height:16px}
.hero-art .animation-toggle:hover{background:rgba(33,34,31,.09);color:var(--ink)}
.hero-art .animation-toggle:active{transform:scale(.94)}
.hero-art .animation-toggle:focus-visible{outline:2px solid var(--purple);outline-offset:3px}
.hero-art .idea-card{left:50%;right:auto;width:min(480px,100%);bottom:0;top:var(--stage-card-top,auto);transform:translateX(-50%);container:idea/inline-size;
  display:flex;flex-wrap:wrap;align-items:center;gap:10px 12px;padding:8px 8px 8px 22px;border-radius:24px;
  background:rgba(255,255,255,.8);-webkit-backdrop-filter:blur(14px) saturate(1.2);backdrop-filter:blur(14px) saturate(1.2);border:0;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.75),0 1px 2px rgba(33,34,31,.06),0 8px 24px rgba(33,34,31,.06);transition:transform .4s cubic-bezier(.2,.8,.2,1)}
.hero-art .idea-card:hover{transform:translateX(-50%) translateY(-2px)}
/* Three slots, no overlap between them: [headline, takes the rest] [logos] [button]. The headline never
   shrinks below its text; the card's width (set by the column) picks the layout via container queries. */
.hero-art .idea-card h3{flex:1 0 auto;margin:0;font-size:21px;font-weight:600;letter-spacing:-.4px;line-height:1.2}
.hero-art .market-word-wrap{overflow:hidden;padding-bottom:.08em;margin-bottom:-.08em}
/* Word change as a slot roll: the old word rises out on the blink, the new one rises in on the switch. */
.hero-art #market-word{transition:transform 180ms cubic-bezier(.4,0,1,1),opacity 180ms ease;transform-origin:50% 50%}
.hero-art.is-blinking #market-word{transform:translateY(-70%);opacity:0}
.hero-art #market-word.roll-in{animation:word-roll-in 300ms cubic-bezier(.2,.8,.2,1) both}
@keyframes word-roll-in{from{transform:translateY(70%);opacity:0}to{transform:none;opacity:1}}
/* Top matches: three overlapping marks inside their own box (only the 2nd and 3rd overlap). */
.idea-logos{display:flex;flex:none;align-items:center}
.idea-logos img{width:30px;height:30px;box-sizing:border-box;padding:5px;border-radius:50%;background:#f2f0fa;object-fit:contain;box-shadow:0 0 0 2px #fff,0 1px 3px rgba(33,34,31,.12)}
.idea-logos img+img{margin-left:-8px}
.idea-logos.swap img{animation:logo-in 340ms cubic-bezier(.2,.8,.2,1) both}
.idea-logos.swap img:nth-child(2){animation-delay:50ms}
.idea-logos.swap img:nth-child(3){animation-delay:100ms}
@keyframes logo-in{from{transform:translateY(6px) scale(.85);opacity:0}to{transform:none;opacity:1}}
/* The action: a solid violet pill with a pressed state. */
.hero-art .idea-card .chip-cta{flex:none;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:0;padding:11px 16px 11px 18px;border:0;border-radius:999px;background:var(--purple);color:#fff;font-size:15px;font-weight:600;white-space:nowrap;text-decoration:none;
  box-shadow:0 1px 2px rgba(60,30,160,.2),0 4px 12px rgba(114,80,237,.22);transition:background .3s ease,transform .3s cubic-bezier(.2,.8,.2,1),box-shadow .3s ease}
.hero-art .idea-card .chip-cta>span{width:auto;height:auto;background:none;border-radius:0;font-size:inherit;color:inherit;display:inline-flex}
.hero-art .idea-card .chip-cta svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .3s cubic-bezier(.2,.8,.2,1)}
.hero-art .idea-card .chip-cta:hover{background:#6440e0}
.hero-art .idea-card .chip-cta:hover>span{transform:none;background:none}
.hero-art .idea-card .chip-cta:hover svg{transform:translateX(2px)}
.hero-art .idea-card .chip-cta:active{transform:translateY(1px);box-shadow:0 1px 1px rgba(60,30,160,.2);transition-duration:90ms}
.hero-art .idea-card .chip-cta:focus-visible{outline:2px solid var(--purple);outline-offset:3px}
/* Card width tiers (content box). 440+: one row with logos. 340-440: one row, no logos. Under 340:
   headline on top, then logos and the button. */
@container idea (max-width:440px){.idea-logos{display:none}}
@container idea (max-width:340px){
  .hero-art .idea-card h3{flex-basis:100%;padding-top:6px}
  .idea-logos{display:flex}
  .hero-art .idea-card .chip-cta{margin-left:auto}
}
@media(prefers-reduced-motion:reduce){.hero-art #market-word.roll-in,.idea-logos.swap img{animation:none}}

@media(prefers-reduced-motion:reduce){.stage-obj .float,.stage-shadow{animation:none!important}.stage-rig{transform:none!important}}

/* 3D stage (hero-3d/scene.js): spans the column, with headroom above it so the bigger objects never clip;
   the camera framing puts the pedestal where the cut-out one sits.
   It stays invisible until its first frame is drawn, then crossfades in as the cut-outs fade out. */
.stage-3d{position:absolute;left:0;right:0;opacity:0;pointer-events:none;touch-action:pan-y;user-select:none;-webkit-user-select:none;transform:translateY(12px);transition:opacity .5s ease,transform .5s cubic-bezier(.2,.8,.2,1)}
.stage-3d.is-on{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.stage-3d{transform:none;transition:opacity .3s ease}}
.stage-cam{transition:opacity .45s ease}
.stage-cam.is-off{opacity:0;visibility:hidden;transition:opacity .45s ease,visibility 0s .45s}
/* The canvas never takes pointer events (its headroom overlaps the header); there is no drag here. */

/* Hero atmosphere: one soft wash behind both columns, so the hero doesn't read as flat empty paper.
   A wide violet/lavender light centred behind the object, a faint lavender-to-lime haze low behind
   the headline, and a fine grain at ~3.5%. It spans the full viewport width, starts under the
   header and feathers out before the ribbon section, so there is no edge anywhere. */
html,body{overflow-x:clip}
.hero{position:relative;isolation:isolate;--wash-x:calc(50% + min(1328px, 100vw - 96px) / 4 + 18px);--wash-y:46%}
.hero:before,.hero:after{content:'';position:absolute;z-index:-2;pointer-events:none;top:-140px;bottom:-140px;left:50%;width:100vw;margin-left:-50vw;
  -webkit-mask-image:linear-gradient(180deg,#000 0,#000 72%,transparent 100%);mask-image:linear-gradient(180deg,#000 0,#000 72%,transparent 100%)}
.hero:before{background:
  radial-gradient(ellipse 46vw 62% at var(--wash-x) var(--wash-y),rgba(114,80,237,.16) 0,rgba(150,124,245,.10) 34%,rgba(190,176,250,.05) 60%,rgba(247,247,240,0) 100%),
  radial-gradient(ellipse 40vw 44% at 18% 72%,rgba(222,214,252,.34) 0,rgba(214,240,190,.12) 46%,rgba(247,247,240,0) 100%)}
.hero:after{z-index:-1;opacity:.035;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.13 0 0 0 0 0.13 0 0 0 0 0.12 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
@media(max-width:680px){.hero{--wash-x:50%;--wash-y:70%}.hero:before{background:
  radial-gradient(ellipse 90vw 34% at 50% 72%,rgba(114,80,237,.16) 0,rgba(150,124,245,.10) 36%,rgba(190,176,250,.05) 62%,rgba(247,247,240,0) 100%),
  radial-gradient(ellipse 80vw 26% at 20% 26%,rgba(222,214,252,.32) 0,rgba(214,240,190,.10) 48%,rgba(247,247,240,0) 100%)}}
/* Tighter: the art sits a little closer to the copy on wide screens. */
@media(min-width:1181px){.hero{column-gap:48px}}