/*
 * OptiDraft home page - premium motion layer.
 * Pairs with SAG/static/js/home.js. Everything animated stops under
 * prefers-reduced-motion, and content stays visible without JavaScript
 * (reveal states only apply once home.js adds .od-js to <html>).
 */
@property --od-angle {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}

:root {
  --od-ink: #0b0618;
  --od-violet: #7c3aed;
  --od-ease: cubic-bezier(.2, .7, .2, 1);
}

/* ---------- Hero background ---------- */
.od-aurora {
  position: absolute;
  inset: -25% -10% auto;
  height: 130%;
  filter: blur(70px);
  opacity: .8;
  pointer-events: none;
}
.od-aurora span {
  position: absolute;
  border-radius: 9999px;
  animation: od-drift 20s ease-in-out infinite alternate;
}
.od-aurora span:nth-child(1) {
  width: 52vw; height: 52vw; max-width: 780px; max-height: 780px;
  left: 4%; top: 2%;
  background: radial-gradient(circle at 35% 35%, rgba(167, 139, 250, .75), transparent 62%);
}
.od-aurora span:nth-child(2) {
  width: 44vw; height: 44vw; max-width: 660px; max-height: 660px;
  right: 2%; top: -4%;
  background: radial-gradient(circle at 60% 40%, rgba(129, 140, 248, .6), transparent 62%);
  animation-duration: 24s;
  animation-delay: -6s;
}
.od-aurora span:nth-child(3) {
  width: 36vw; height: 36vw; max-width: 540px; max-height: 540px;
  left: 38%; top: 30%;
  background: radial-gradient(circle at 50% 50%, rgba(244, 114, 182, .42), transparent 62%);
  animation-duration: 28s;
  animation-delay: -12s;
}
@keyframes od-drift {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  50%  { transform: translate3d(5%, 6%, 0) scale(1.08); }
  100% { transform: translate3d(-6%, 2%, 0) scale(.95); }
}

.od-grid {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(76, 29, 149, .16) 1px, transparent 1px);
  background-size: 26px 26px;
  -webkit-mask-image: radial-gradient(ellipse 70% 55% at 50% 30%, #000 25%, transparent 75%);
          mask-image: radial-gradient(ellipse 70% 55% at 50% 30%, #000 25%, transparent 75%);
  pointer-events: none;
}

/* Layered glass orbs give the hero a richer, editorial feel without competing
   with the headline. Their positions deliberately frame the content column. */
.od-luxe-orbs {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}
.od-luxe-orb,
.od-luxe-ring {
  position: absolute;
  display: block;
  border-radius: 9999px;
  will-change: transform;
}
.od-luxe-orb::after {
  content: "";
  position: absolute;
  inset: 10%;
  border-radius: inherit;
  background: radial-gradient(circle at 32% 25%, rgba(255,255,255,.9), transparent 30%);
  opacity: .72;
}
.od-luxe-orb--violet {
  width: clamp(72px, 9vw, 138px);
  aspect-ratio: 1;
  left: clamp(2%, 7vw, 9%);
  top: 27%;
  background: linear-gradient(145deg, rgba(196,181,253,.68), rgba(124,58,237,.12));
  border: 1px solid rgba(255,255,255,.88);
  box-shadow: inset -16px -18px 30px rgba(109,40,217,.1), 0 24px 60px rgba(109,40,217,.14);
  filter: blur(.1px);
  animation: od-orbit-float 11s ease-in-out infinite;
}
.od-luxe-orb--pearl {
  width: clamp(34px, 4vw, 62px);
  aspect-ratio: 1;
  right: 15%;
  top: 20%;
  background: linear-gradient(145deg, rgba(255,255,255,.94), rgba(224,231,255,.52));
  border: 1px solid rgba(255,255,255,.95);
  box-shadow: inset -8px -10px 18px rgba(99,102,241,.08), 0 16px 40px rgba(76,29,149,.12);
  animation: od-orbit-float 8s ease-in-out -3s infinite;
}
.od-luxe-orb--pink {
  width: clamp(44px, 5vw, 78px);
  aspect-ratio: 1;
  right: clamp(2%, 7vw, 9%);
  top: 54%;
  background: linear-gradient(145deg, rgba(251,207,232,.7), rgba(192,38,211,.1));
  border: 1px solid rgba(255,255,255,.9);
  box-shadow: inset -10px -12px 20px rgba(219,39,119,.08), 0 20px 48px rgba(192,38,211,.12);
  animation: od-orbit-float 13s ease-in-out -6s infinite;
}
.od-luxe-ring {
  border: 1px solid rgba(124,58,237,.15);
  box-shadow: 0 0 0 12px rgba(255,255,255,.22), inset 0 0 50px rgba(124,58,237,.035);
}
.od-luxe-ring--large {
  width: clamp(250px, 35vw, 540px);
  aspect-ratio: 1;
  right: -13%;
  top: 5%;
  animation: od-ring-drift 18s ease-in-out infinite alternate;
}
.od-luxe-ring--small {
  width: clamp(150px, 22vw, 330px);
  aspect-ratio: 1;
  left: -8%;
  top: 55%;
  border-color: rgba(219,39,119,.11);
  animation: od-ring-drift 15s ease-in-out -5s infinite alternate-reverse;
}
@keyframes od-orbit-float {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg); }
  50% { transform: translate3d(0, -16px, 0) rotate(7deg); }
}
@keyframes od-ring-drift {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to { transform: translate3d(-18px, 14px, 0) scale(1.04); }
}

@media (max-width: 639px) {
  .od-luxe-orb--violet { left: -30px; top: 25%; opacity: .62; }
  .od-luxe-orb--pearl { right: 8%; top: 17%; opacity: .8; }
  .od-luxe-orb--pink { right: -18px; top: 52%; opacity: .62; }
  .od-luxe-ring--large { right: -48%; top: 11%; opacity: .7; }
  .od-luxe-ring--small { left: -38%; top: 58%; opacity: .55; }
}

.od-grain { position: relative; }
.od-grain::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .06;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

/* ---------- Type & buttons ---------- */
.od-gradient-text {
  background: linear-gradient(90deg, #6d28d9, #4f46e5, #c026d3, #7c3aed, #6d28d9);
  background-size: 300% 100%;
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  animation: od-shine 9s linear infinite;
}
@keyframes od-shine { to { background-position: 300% 0; } }

/* Rotating words: one at a time. The old word leaves upwards first (.is-leaving),
   then the new word enters from below after a delay, so they never overlap.
   Each word carries its own .od-gradient-text: a gradient clipped on the parent is
   painted from every child's glyphs and ignores the children's opacity mid-transition. */
.od-rotator { display: inline-grid; vertical-align: bottom; }
.od-rotator > span {
  grid-area: 1 / 1;
  opacity: 0;
  transform: translateY(.45em);
  filter: blur(6px);
  transition: none;
}
.od-rotator > span.is-active {
  opacity: 1;
  transform: none;
  filter: none;
  transition: opacity .5s var(--od-ease) .38s, transform .5s var(--od-ease) .38s, filter .5s var(--od-ease) .38s;
}
html:not(.od-js) .od-rotator > span:first-child { opacity: 1; transform: none; filter: none; }
.od-rotator > span.is-leaving {
  opacity: 0;
  transform: translateY(-.45em);
  filter: blur(6px);
  transition: opacity .32s ease-in, transform .32s ease-in, filter .32s ease-in;
}

/* .od-btn-shimmer lives in site.css (the header CTA uses it on every page) */

.od-glass {
  background: rgba(255, 255, 255, .72);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
          backdrop-filter: blur(14px) saturate(1.4);
  border: 1px solid rgba(255, 255, 255, .75);
  box-shadow: 0 12px 40px -14px rgba(76, 29, 149, .35);
}

/* ---------- Hero visual ---------- */
.od-tilt { transition: transform .35s var(--od-ease); will-change: transform; }
.od-float { animation: od-float 7s ease-in-out infinite; }
@keyframes od-float { 50% { transform: translateY(-12px); } }

.od-halo {
  position: absolute;
  inset: -2px;
  border-radius: 1.25rem;
  background: conic-gradient(from var(--od-angle), rgba(124, 58, 237, .55), rgba(34, 211, 238, .35), rgba(219, 39, 119, .45), rgba(124, 58, 237, .55));
  filter: blur(18px);
  opacity: .55;
  animation: od-spin 10s linear infinite;
}
@keyframes od-spin { to { --od-angle: 360deg; } }

/* ---------- Scroll reveal ---------- */
.od-js .od-reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .5s var(--od-ease), transform .5s var(--od-ease);
  transition-delay: min(var(--d, 0s), .25s);
}
.od-js .od-reveal.is-in { opacity: 1; transform: none; }

/* Product tour: the tall generator shot fills its two grid rows (no empty band under the caption). */
.od-shot-fill { aspect-ratio: 16 / 10; }
@media (min-width: 1024px) { .od-shot-fill { aspect-ratio: auto; flex: 1 1 0%; min-height: 18rem; } }

.od-js .od-bar { transform: scaleY(.08); transform-origin: bottom; transition: transform 1.1s var(--od-ease); transition-delay: var(--d, 0s); }
.od-js .is-in .od-bar { transform: none; }

.od-js .od-grow { transform: scaleX(0); transform-origin: left; transition: transform 1.2s var(--od-ease); transition-delay: var(--d, 0s); }
.od-js .is-in .od-grow { transform: none; }

.od-draw { stroke-dasharray: 1; stroke-dashoffset: 0; }
.od-js .od-draw { stroke-dashoffset: 1; transition: stroke-dashoffset 1.8s var(--od-ease); }
.od-js .od-draw.is-in { stroke-dashoffset: 0; }

/* ---------- Marquee ---------- */
.od-marquee {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.od-marquee-track {
  display: flex;
  gap: 3.5rem;
  width: max-content;
  animation: od-marquee 36s linear infinite;
}
.od-marquee:hover .od-marquee-track { animation-play-state: paused; }
@keyframes od-marquee { to { transform: translateX(-50%); } }

/* ---------- Cards ---------- */
.od-icon-tile {
  position: relative;
  isolation: isolate;
  border: 1px solid rgba(255, 255, 255, .72);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .75), 0 10px 24px -12px currentColor;
  transform: translateZ(0);
}
.od-icon-tile::after {
  content: "";
  position: absolute;
  inset: 1px;
  z-index: -1;
  border-radius: inherit;
  background: linear-gradient(145deg, rgba(255,255,255,.38), transparent 55%);
  pointer-events: none;
}
.od-icon-tile .od-i {
  filter: drop-shadow(0 4px 7px rgba(15, 23, 42, .12));
  transition: transform .3s var(--od-ease), filter .3s var(--od-ease);
}
.group:hover .od-icon-tile .od-i,
.od-icon-tile:hover .od-i {
  transform: translateY(-1px) scale(1.07);
  filter: drop-shadow(0 6px 9px rgba(76, 29, 149, .2));
}

.od-product-shot {
  transition: transform .45s var(--od-ease), border-color .45s var(--od-ease), background-color .45s var(--od-ease);
}
.od-product-shot:hover {
  transform: translateY(-5px);
  border-color: rgba(167, 139, 250, .34);
  background-color: rgba(255, 255, 255, .085);
}

.od-spot { position: relative; overflow: hidden; isolation: isolate; }
.od-spot::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(380px circle at var(--mx, 50%) var(--my, 50%), rgba(124, 58, 237, .13), transparent 45%);
  opacity: 0;
  transition: opacity .35s;
  pointer-events: none;
}
.od-spot:hover::before { opacity: 1; }
.od-dark .od-spot::before {
  background: radial-gradient(380px circle at var(--mx, 50%) var(--my, 50%), rgba(167, 139, 250, .22), transparent 45%);
}

.od-ring { position: relative; }
.od-ring::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1.5px;
  background: conic-gradient(from var(--od-angle), #7c3aed, #22d3ee, #db2777, #a78bfa, #7c3aed);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  animation: od-spin 6s linear infinite;
  pointer-events: none;
}

/* ---------- Dark sections ---------- */
.od-dark {
  background:
    radial-gradient(1100px 560px at 15% -10%, rgba(124, 58, 237, .38), transparent 60%),
    radial-gradient(900px 520px at 95% 110%, rgba(219, 39, 119, .22), transparent 60%),
    var(--od-ink);
  color: #fff;
}

/* ---------- Live demo ---------- */
.od-demo-line {
  height: .55rem;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(255, 255, 255, .18), rgba(255, 255, 255, .06));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .7s var(--od-ease);
}
.od-demo-line.is-on { transform: scaleX(1); }
.od-demo-item { opacity: 0; transform: translateX(-10px); transition: opacity .45s var(--od-ease), transform .45s var(--od-ease); }
.od-demo-item.is-on { opacity: 1; transform: none; }
.od-demo-check { transition: color .3s, background-color .3s, border-color .3s; }
.od-demo-item.is-on .od-demo-check { color: #fff; background: #10b981; border-color: #10b981; }
.od-demo-toast { opacity: 0; transform: translateY(12px) scale(.96); transition: opacity .5s var(--od-ease), transform .5s var(--od-ease); }
.od-demo-toast.is-on { opacity: 1; transform: none; }
.od-meter-arc { transition: stroke-dashoffset 1.4s var(--od-ease); }

.od-caret::after {
  content: "";
  display: inline-block;
  width: 2px;
  height: 1.05em;
  margin-left: 2px;
  vertical-align: -3px;
  background: currentColor;
  animation: od-blink 1s steps(2) infinite;
}
@keyframes od-blink { 50% { opacity: 0; } }

/* ---------- Video modal & Alpine ---------- */
.od-modal[hidden] { display: none; }
[x-cloak] { display: none !important; }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .od-aurora span, .od-gradient-text, .od-btn-shimmer::after, .od-float, .od-halo,
  .od-marquee-track, .od-ring::before, .od-caret::after, .od-luxe-orb,
  .od-luxe-ring { animation: none !important; }
  .od-js .od-reveal, .od-js .od-bar, .od-js .od-grow, .od-js .od-draw,
  .od-demo-line, .od-demo-item, .od-demo-toast, .od-meter-arc, .od-rotator > span { transition: none !important; }
  .od-js .od-reveal { opacity: 1; transform: none; }
  .od-js .od-bar, .od-js .od-grow { transform: none; }
  .od-js .od-draw { stroke-dashoffset: 0; }
  .od-marquee-track { flex-wrap: wrap; justify-content: center; width: auto; }
}