/* Motion and interaction layer for the live page. Base layout lives in index.html. */

html { scroll-behavior: smooth; }
body { overflow-x: hidden; }

/* Reveal on load and on scroll */
[data-reveal] { opacity: 0; transform: translateY(14px); transition: opacity 0.7s cubic-bezier(0.2, 0.7, 0.2, 1), transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1); transition-delay: var(--d, 0ms); will-change: opacity, transform; }
[data-reveal].in { opacity: 1; transform: none; }
[data-stagger] > * { opacity: 0; transform: translateY(18px); transition: opacity 0.7s cubic-bezier(0.2, 0.7, 0.2, 1), transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1); }
[data-stagger].in > * { opacity: 1; transform: none; }
[data-stagger].in > *:nth-child(1) { transition-delay: 0ms; }
[data-stagger].in > *:nth-child(2) { transition-delay: 110ms; }
[data-stagger].in > *:nth-child(3) { transition-delay: 220ms; }
[data-stagger].in > *:nth-child(4) { transition-delay: 330ms; }

/* Hero atmosphere */
.hero-cloud { animation: drift 22s ease-in-out infinite alternate; }
.hero-cloud:nth-child(2) { animation-duration: 28s; animation-delay: -9s; }
.hero-cloud:nth-child(3) { animation-duration: 19s; animation-delay: -4s; }
@keyframes drift { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(48px, -14px, 0); } }


/* Hero window and the app reproductions */
.hero-window { transition-duration: 0.9s; }
.oc { transition: box-shadow 0.4s ease, transform 0.4s ease; }
.hero-window.in .oc:hover { transform: translateY(-2px); }
[data-oc] { opacity: 0; transform: translateY(6px); transition: opacity 0.4s ease, transform 0.4s ease; }
[data-oc].in { opacity: 1; transform: none; }
[data-oc-queue] { opacity: 0; transform: translateY(14px); transition: opacity 0.45s ease, transform 0.45s cubic-bezier(0.2, 0.7, 0.2, 1); }
[data-oc-queue].in { opacity: 1; transform: none; }
.oc-spin { animation: spin 0.9s linear infinite; }
.oc-progress i.whip { animation: whip 1.6s cubic-bezier(0.4, 0, 0.2, 1) 2; }
@keyframes whip { 0% { clip-path: inset(0 100% 0 0 round 999px); } 48% { clip-path: inset(0 0 0 0 round 999px); } 100% { clip-path: inset(0 0 0 100% round 999px); } }
.oc-cursor { transition: left 0.8s cubic-bezier(0.3, 0.7, 0.3, 1), top 0.8s cubic-bezier(0.3, 0.7, 0.3, 1); }
.oc-hlbox, .oc-pin, .oc-pop, [data-oc-sendbtn], [data-oc-result] { transition: opacity 0.35s ease, transform 0.45s cubic-bezier(0.2, 0.7, 0.2, 1); }
.oc-pin { animation: none; }
.oc-step { opacity: 0.35; transition: opacity 0.4s ease; }
.oc-step.on { opacity: 1; }
.oc-step .st.done { transform: scale(0.5); transition: transform 0.4s cubic-bezier(0.3, 1.4, 0.4, 1); }
.oc-step.on .st.done { transform: scale(1); }
.oc-step .st.run { animation: spin 1s linear infinite; }
.oc-pipe .seg.on i { animation: spin 1s linear infinite; }
.oc-pc { opacity: 0; transform: translateY(8px); transition: opacity 0.45s ease, transform 0.45s ease; }
.oc-pc.in { opacity: 1; transform: none; }
[data-oc-toast] { opacity: 0; transform: translateX(24px); transition: opacity 0.4s ease, transform 0.45s cubic-bezier(0.2, 0.7, 0.2, 1); }
[data-oc-toast].in { opacity: 1; transform: none; }
.oc-term .cur { animation: blink 1.1s steps(1) infinite; }
.oc-tabs .tr, .oc-btb .bt, .oc-open, .oc-ib, .oc-file, .oc-tool { transition: background-color 0.15s ease, color 0.15s ease; }
.oc-file:hover, .oc-tool:hover { background: rgba(0,0,0,0.03); }
.oc-ib:hover { background: rgba(0,0,0,0.04); }
.oc-send { transition: transform 0.15s ease; }
.oc-send:hover { transform: translateY(-1px); }
@keyframes rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.dp-panel.on { animation: rise 0.35s ease-out; }
.oc-tab, .oc-tabs .tr, .oc-ib, .dp-tile, .oc-menu .mi { transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease; }
.oc-panes, .oc-grid5 { animation: rise 0.3s ease-out; }

/* Floating nav that appears once the hero nav scrolls away */
.floatnav { position: fixed; top: 12px; left: 50%; transform: translate(-50%, -24px); z-index: 50; display: flex; align-items: center; gap: 28px; height: 52px; padding: 0 10px 0 18px; border-radius: 999px; background: rgba(255,255,255,0.78); border: 1px solid rgba(10,10,10,0.08); box-shadow: 0 8px 30px -12px rgba(10,10,10,0.25); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); opacity: 0; pointer-events: none; transition: opacity 0.35s ease, transform 0.35s cubic-bezier(0.2, 0.7, 0.2, 1); }
.floatnav.show { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.floatnav .links { display: flex; gap: 22px; font-size: 14px; font-weight: 500; }
.floatnav .links a { color: var(--ink); }
.floatnav .links a:hover { color: var(--grey); }
@media (max-width: 720px) { .floatnav .links { display: none; } .floatnav { gap: 14px; } }

/* Buttons and links */
.pill { transition: background-color 0.2s ease, transform 0.2s cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 0.2s ease; }
.pill:hover { transform: translateY(-1px); box-shadow: 0 8px 20px -10px rgba(10,10,10,0.5); }
.pill:active { transform: translateY(0) scale(0.98); box-shadow: none; }
.kicker svg { transition: transform 0.2s ease; }
.kicker:hover svg { transform: translateX(3px); }
.nav-links a, .fcol a { transition: color 0.2s ease; }

/* Feature cards */
.card .art { transition: transform 0.35s cubic-bezier(0.2, 0.7, 0.2, 1); }
.card .panel, .card .bubble { transition: transform 0.45s cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 0.45s ease; }
.card:hover .panel { transform: translateY(-8px); box-shadow: 0 2px 4px rgba(10,10,10,0.05), 0 24px 40px -20px rgba(10,10,10,0.3); }
.card:hover .bubble { transform: translateY(-3px); }
.card:hover .bubble + .bubble { transform: translateY(-5px); }
.four .art { transition: border-color 0.25s ease, box-shadow 0.25s ease; }
.four .card:hover .art { border-color: #D9D9D9; box-shadow: 0 16px 40px -24px rgba(10,10,10,0.25); }

/* Icons */
.ic-ring { transform-origin: 90px 90px; transition: transform 0.6s ease; }
.four .card:hover .ic-ring { animation: spin 14s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.ic-branch { stroke-dasharray: 140; stroke-dashoffset: 140; transition: stroke-dashoffset 0.9s cubic-bezier(0.2, 0.7, 0.2, 1); }
.four.in .ic-branch { stroke-dashoffset: 0; }
.four .card:hover .ic-branch { stroke: #0A0A0A; }
.ic-phone { transition: transform 0.45s cubic-bezier(0.2, 0.7, 0.2, 1); }
.four .card:hover .ic-phone { transform: translateY(-10px); }
.ic-knob { transition: transform 0.5s cubic-bezier(0.2, 0.7, 0.2, 1); }
.four .card:hover .ic-knob-1 { transform: translateX(-36px); }
.four .card:hover .ic-knob-2 { transform: translateX(48px); }
.four .card:hover .ic-knob-3 { transform: translateX(-20px); }

/* CTA wash */
.cta { position: relative; overflow: hidden; }
.cta > * { position: relative; }
.cta .glow { position: absolute; left: 50%; bottom: -35%; width: 80%; height: 90%; border-radius: 50%; background: radial-gradient(closest-side, rgba(92,196,195,0.55), rgba(92,196,195,0)); filter: blur(20px); transform: translateX(-50%); animation: breathe 9s ease-in-out infinite alternate; pointer-events: none; }
@keyframes breathe { from { transform: translateX(-56%) scale(1); } to { transform: translateX(-44%) scale(1.12); } }

/* Focus */
a:focus-visible, button:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  [data-reveal], [data-stagger] > *, [data-oc], [data-oc-queue], [data-oc-toast], .oc-pc, .oc-step { opacity: 1 !important; transform: none !important; transition: none !important; }
  .hero-cloud, .cta .glow, .ic-ring, .oc-spin, .oc-progress i, .cur { animation: none !important; }
  .ic-branch { stroke-dashoffset: 0; transition: none; }
}

/* grid-demo pointer: a ring that breathes around the grid button before the switch */
.oc-ib.pulse { position: relative; color: var(--oc-icon, #3a3a3a); background: rgba(0,0,0,0.06); }
.oc-ib.pulse::after { content: ""; position: absolute; inset: -4px; border-radius: 10px; border: 2px solid var(--accent); animation: ring 0.9s ease-out infinite; }
@keyframes ring { from { transform: scale(0.85); opacity: 1; } to { transform: scale(1.35); opacity: 0; } }
.oc-list { scroll-behavior: smooth; }

/* The landing's session chat plays like the real one: messages do not exist until they arrive,
   the list stacks from the top, and it pins to the newest once the pane is full. */
[data-chat-stage] .oc-chat [data-oc]:not(.in) { display: none; }

/* Palette lab: only rendered on localhost or with ?lab in the URL. */
.hue-lab { position: fixed; left: 50%; bottom: 16px; transform: translateX(-50%); z-index: 200; display: flex; align-items: center; gap: 6px;
  padding: 8px 12px; border-radius: 999px; background: rgba(20,20,24,0.9); color: #fff; box-shadow: 0 10px 30px -10px rgba(0,0,0,0.6);
  backdrop-filter: blur(10px); font: 500 12px/1 var(--sans); }
.hue-lab .lb { opacity: 0.6; margin-right: 2px; }
.hue-lab button[data-hue] { width: 18px; height: 18px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.35); cursor: pointer; padding: 0; }
.hue-lab input { width: 120px; accent-color: #fff; }
.hue-lab .val { width: 24px; text-align: right; opacity: 0.8; font-variant-numeric: tabular-nums; }
.hue-lab .rst, .hue-lab .cyc { background: rgba(255,255,255,0.14); color: #fff; border: 0; border-radius: 999px; padding: 4px 9px; cursor: pointer; font: inherit; }
.hue-lab .cyc[aria-pressed="true"] { background: #fff; color: #111; }
/* The tinted surfaces ease between hues so a cycle reads as a slow drift, not a flicker. */
.hero, .cta, .art-aqua, .wash { transition: background 0.6s linear; }
@media (max-width: 720px) { .hue-lab input { width: 70px; } .hue-lab .lb { display: none; } }