/* Motion and surfaces share the tokens defined in styles.css. */
body { isolation: isolate; }
html { scroll-padding-top: var(--header-offset); }
html[data-motion='off'] { scroll-behavior: auto; }
.ambient { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.ambient::before { content: ''; position: absolute; inset: -20%; background: radial-gradient(ellipse at 80% 15%, var(--light-purple), transparent 45%), radial-gradient(ellipse at 10% 70%, var(--light-green), transparent 45%); animation: ambient-drift var(--motion-drift) ease-in-out infinite alternate; }
.site-header { position: sticky; top: 0; z-index: 10; background: var(--glass); backdrop-filter: blur(var(--blur)); -webkit-backdrop-filter: blur(var(--blur)); border-color: var(--soft-line); }
.header-inner { padding-block: var(--small-gap); }
.brand { letter-spacing: var(--tracking); font-size: var(--scene-title); }
nav a { text-decoration: none; position: relative; font-size: var(--small); }
nav a::after { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: var(--hairline); background: var(--green); transform: scaleX(0); transform-origin: left; transition: transform var(--motion-fast) var(--ease); }
nav a:hover::after, nav a[aria-current]::after { transform: scaleX(1); }
.skip-link { z-index: 20; }
.hero { display: grid; grid-template-columns: 1.1fr 1fr; align-items: center; gap: var(--gap); max-width: none; }
.hero-copy { position: relative; z-index: 1; }
.hero h1 { font-size: var(--hero-wide); letter-spacing: var(--tracking); }
.hero .lead { font-size: var(--section); max-width: var(--reading-width); }
.gradient-text { background-image: linear-gradient(100deg,var(--green),var(--blue),var(--purple),var(--green)); background-size: 300% 100%; animation: gradient-flow var(--motion-drift) ease-in-out infinite; }
.live-dot { display: inline-block; width: var(--dot-size); height: var(--dot-size); background: var(--green); border-radius: 50%; margin-right: var(--small-gap); box-shadow: 0 0 var(--small-gap) var(--green); }
.hero-scene { margin: 0; height: var(--scene-height); position: relative; border-radius: var(--scene-radius); box-shadow: var(--shadow); transform: perspective(1000px) rotateX(var(--tilt-y,0deg)) rotateY(var(--tilt-x,0deg)); transition: transform var(--motion-enter) var(--ease); }
.hero-scene > img, .scene-shade { position: absolute; width: 100%; height: 100%; inset: 0; object-fit: cover; border-radius: inherit; }
.scene-shade { background: linear-gradient(180deg,var(--clear-glass),transparent 35%,var(--bg)); }
.scene-top { position: absolute; inset: var(--gap) var(--gap) auto; display: flex; align-items: center; justify-content: space-between; gap: var(--small-gap); }
.glass-label, .floating-tag { padding: var(--small-gap) var(--gap); border: var(--hairline) solid var(--soft-line); border-radius: var(--radius); background: var(--glass); backdrop-filter: blur(var(--blur)); font-size: var(--small); }
.scene-star { color: var(--green); font-size: var(--star-size); animation: star-turn var(--motion-drift) linear infinite; }
.hero-scene figcaption { position: absolute; bottom: var(--gap); left: var(--gap); right: var(--gap); }
.hero-scene h2 { font-size: var(--scene-title); letter-spacing: var(--tracking); margin-block: var(--small-gap); }
.scene-caption { color: var(--muted); font-size: var(--small); }
.floating-tag { position: absolute; top: 48%; left: calc(-1 * var(--gap)); animation: float-tag var(--motion-float) ease-in-out infinite; }
.button { position: relative; overflow: hidden; transition: transform var(--motion-fast), box-shadow var(--motion-fast); }
.button:not(.secondary)::after { content: ''; position: absolute; inset: -100%; background: linear-gradient(110deg,transparent 40%,var(--soft-line) 50%,transparent 60%); animation: sheen var(--motion-sheen) ease-in-out infinite; pointer-events: none; }
.button:hover { transform: translateY(var(--hover-rise)); box-shadow: var(--shadow); }
.discovery-strip { display: flex; justify-content: space-between; gap: var(--gap); padding-block: var(--gap); border-block: var(--hairline) solid var(--soft-line); font-size: var(--section); color: var(--muted); }
.discovery-strip [aria-hidden] { color: var(--green); }
.section-heading { padding-block: var(--section-space) var(--gap); }
.section-heading h2 { font-size: var(--title); letter-spacing: var(--tracking); margin-block: var(--small-gap); }
.cards { counter-reset: feature; }
.card { position: relative; overflow: hidden; background: linear-gradient(140deg,var(--clear-glass),transparent); border-color: var(--soft-line); transition: transform var(--motion-fast), border-color var(--motion-fast); }
.card::before { counter-increment: feature; content: '0' counter(feature) ' /'; display: block; color: var(--green); font-size: var(--small); margin-bottom: var(--gap); }
.card::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle at var(--pointer-x,50%) var(--pointer-y,50%),var(--light-purple),transparent 65%); opacity: 0; transition: opacity var(--motion-fast); }
.card:hover { border-color: var(--purple); transform: translateY(var(--hover-rise)); }
.card:hover::after { opacity: 1; }
.panel { background: linear-gradient(120deg,var(--surface),var(--clear-glass)); border-color: var(--soft-line); padding: var(--section-space); }
.motion-toggle { font: inherit; color: var(--muted); background: var(--surface); border: var(--hairline) solid var(--soft-line); border-radius: var(--radius); padding: var(--small-gap) var(--gap); min-height: var(--tap); cursor: pointer; }
.reveal-visible { animation: reveal var(--motion-enter) var(--ease) both; }
@keyframes reveal { from { opacity: 0; transform: translateY(var(--reveal-distance)); } to { opacity: 1; transform: translateY(0); } }
@keyframes ambient-drift { to { transform: translate(5%, -5%) scale(1.1); } }
@keyframes gradient-flow { 50% { background-position: 100% 50%; } }
@keyframes float-tag { 50% { transform: translateY(calc(-1 * var(--small-gap))); } }
@keyframes star-turn { to { transform: rotate(360deg); } }
@keyframes sheen { 0%, 30% { transform: translateX(-40%); } 75%, 100% { transform: translateX(40%); } }
html[data-motion='off'] *, html[data-motion='off'] *::before, html[data-motion='off'] *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
html[data-motion='off'] .hero-scene, html[data-motion='off'] .button:hover, html[data-motion='off'] .card:hover { transform: none; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .hero-scene, .button:hover, .card:hover { transform: none; }
}
@media (max-width: 800px) {
  .hero { grid-template-columns: 1fr; }
  .hero-scene { height: var(--scene-mobile-height); margin-top: var(--gap); }
  .floating-tag { left: var(--gap); }
  .header-inner { gap: 0; }
  .header-inner nav { flex-wrap: nowrap; overflow-x: auto; width: 100%; gap: var(--gap); }
  .header-inner nav a { flex-shrink: 0; }
  .discovery-strip { flex-wrap: wrap; justify-content: center; font-size: var(--body); }
}
@media print { .ambient, .motion-toggle { display: none; } }