/* TryODA unicorn FX — premium calm white. Landing only. */
:root{
  --ty-fx-blue:#7cc4ff;
  --ty-fx-green:#9be7b4;
  --ty-fx-orange:#ffb36b;
  --ty-fx-lilac:#c9b8ff;
}

/* --- 1. Soft aurora / mesh blobs behind hero --- */
.ty-aurora{
  position:absolute;inset:-10% -5% auto;height:min(720px,92vw);
  pointer-events:none;z-index:0;overflow:hidden;
  -webkit-mask-image:linear-gradient(180deg,#000 55%,transparent);
  mask-image:linear-gradient(180deg,#000 55%,transparent);
}
.hero{position:relative;isolation:isolate}
.hero > *:not(.ty-aurora){position:relative;z-index:1}
.ty-aurora span{
  position:absolute;border-radius:50%;filter:blur(64px);
  opacity:.38;will-change:transform;
  animation:ty-drift 22s ease-in-out infinite alternate;
}
.ty-aurora span:nth-child(1){
  width:48%;height:48%;left:6%;top:8%;
  background:radial-gradient(circle,rgba(124,196,255,.55),transparent 70%);
  animation-duration:26s;
}
.ty-aurora span:nth-child(2){
  width:42%;height:42%;right:4%;top:18%;
  background:radial-gradient(circle,rgba(155,231,180,.5),transparent 70%);
  animation-duration:30s;animation-delay:-6s;
}
.ty-aurora span:nth-child(3){
  width:36%;height:36%;left:38%;top:42%;
  background:radial-gradient(circle,rgba(255,179,107,.42),transparent 70%);
  animation-duration:24s;animation-delay:-12s;
}
.ty-aurora span:nth-child(4){
  width:28%;height:28%;left:58%;top:4%;
  background:radial-gradient(circle,rgba(201,184,255,.35),transparent 70%);
  animation-duration:28s;animation-delay:-3s;
}
@keyframes ty-drift{
  0%{transform:translate3d(0,0,0) scale(1)}
  50%{transform:translate3d(3%,-4%,0) scale(1.06)}
  100%{transform:translate3d(-2%,3%,0) scale(.96)}
}

/* --- 2. Scroll reveal --- */
.ty-reveal{
  opacity:0;transform:translateY(18px);
  filter:blur(4px);
  transition:opacity .7s cubic-bezier(.22,1,.36,1),
             transform .7s cubic-bezier(.22,1,.36,1),
             filter .7s cubic-bezier(.22,1,.36,1);
  will-change:opacity,transform,filter;
}
.ty-reveal.is-in{
  opacity:1;transform:none;filter:none;
}
.ty-reveal[data-d="1"]{transition-delay:.06s}
.ty-reveal[data-d="2"]{transition-delay:.12s}
.ty-reveal[data-d="3"]{transition-delay:.18s}
.ty-reveal[data-d="4"]{transition-delay:.24s}
.ty-reveal[data-d="5"]{transition-delay:.3s}

/* --- 3. Spotlight / cursor-follow soft light --- */
.ty-spot{
  --mx:50%;--my:50%;
  position:relative;overflow:hidden;
}
.ty-spot::after{
  content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;z-index:1;
  background:radial-gradient(420px circle at var(--mx) var(--my),
    rgba(124,196,255,.16),transparent 55%);
  opacity:0;transition:opacity .35s ease;
}
.ty-spot:hover::after{opacity:1}
.fam .ty-spot::after{
  background:radial-gradient(380px circle at var(--mx) var(--my),
    rgba(124,196,255,.22),rgba(255,179,107,.08) 40%,transparent 60%);
}
.ty-spot > *{position:relative;z-index:2}

/* --- 4. Magnetic / springy hover lift --- */
.ty-mag{
  transition:transform .35s cubic-bezier(.22,1,.36,1),
             box-shadow .35s cubic-bezier(.22,1,.36,1)!important;
  will-change:transform;
}
.ty-mag:hover{
  transform:translateY(-3px) scale(1.02);
}
.btn.ty-mag:hover{
  box-shadow:0 14px 36px -14px rgba(20,40,80,.35);
}
.ty-lc.ty-mag:hover{
  transform:translateY(-6px) scale(1.015);
  box-shadow:0 18px 48px rgba(124,196,255,.22);
}
.btn.ty-mag.is-pull,
.ty-lc.ty-mag.is-pull{
  transition:transform .12s ease-out;
}

/* --- 5. Nav glass when scrolled --- */
header.ty-scrolled{
  background:rgba(255,255,255,.78)!important;
  backdrop-filter:blur(16px) saturate(1.2)!important;
  -webkit-backdrop-filter:blur(16px) saturate(1.2)!important;
  box-shadow:0 8px 28px -18px rgba(20,30,60,.28);
  border-bottom-color:rgba(232,234,239,.7)!important;
}

/* --- 6. Hero headline shimmer on key phrase --- */
.hero h1 span{
  display:inline-block;
  background:linear-gradient(105deg,
    var(--tq) 0%,
    var(--bl) 28%,
    var(--ty-fx-blue) 48%,
    var(--bl) 62%,
    var(--tq) 100%)!important;
  background-size:220% 100%!important;
  -webkit-background-clip:text!important;
  background-clip:text!important;
  color:transparent!important;
  animation:ty-shimmer 7s ease-in-out infinite;
  position:relative;
}
.hero h1 span::after{
  content:"";position:absolute;left:8%;right:8%;bottom:-.12em;height:3px;
  border-radius:999px;
  background:linear-gradient(90deg,transparent,rgba(124,196,255,.55),rgba(20,184,166,.45),transparent);
  opacity:.7;filter:blur(.4px);
  pointer-events:none;
}
@keyframes ty-shimmer{
  0%,100%{background-position:0% 50%}
  50%{background-position:100% 50%}
}

/* --- 7. Ultra-light film grain (landing) --- */
#flow.on ~ .ty-grain{opacity:0}
.ty-grain{
  position:fixed;inset:0;pointer-events:none;z-index:3;
  opacity:.04;mix-blend-mode:multiply;
  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='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.12 0 0 0 0 0.12 0 0 0 0 0.14 0 0 0 0.55 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-size:160px 160px;
}

/* --- 8. Staggered luxury family cards --- */
.ty-lcg.ty-stagger > .ty-lc{
  opacity:0;transform:translateY(16px);
  transition:opacity .65s cubic-bezier(.22,1,.36,1),
             transform .65s cubic-bezier(.22,1,.36,1);
}
.ty-lcg.ty-stagger.is-in > .ty-lc:nth-child(1){opacity:1;transform:none;transition-delay:.08s}
.ty-lcg.ty-stagger.is-in > .ty-lc:nth-child(2){opacity:1;transform:none;transition-delay:.18s}
.ty-lcg.ty-stagger.is-in > .ty-lc:nth-child(3){opacity:1;transform:none;transition-delay:.28s}
.ty-lcg.ty-stagger.is-in > .ty-lc:nth-child(4){opacity:1;transform:none;transition-delay:.38s}

/* Mock card soft lift */
.mock.ty-reveal.is-in{transition-delay:.15s}

/* Mobile: lighter effects */
@media (max-width:760px){
  .ty-aurora span{filter:blur(48px);opacity:.28;animation-duration:36s}
  .ty-reveal{filter:none;transform:translateY(12px)}
  .ty-spot::after{display:none}
  .ty-mag:hover,.ty-lc.ty-mag:hover{transform:translateY(-2px) scale(1)}
  .ty-grain{opacity:.025}
  .hero h1 span::after{display:none}
}
@media (max-width:560px){
  .ty-aurora{height:420px}
  .ty-aurora span:nth-child(4){display:none}
}

/* Reduced motion: kill animations / instant reveal */
@media (prefers-reduced-motion:reduce){
  .ty-aurora span,
  .hero h1 span{animation:none!important}
  .ty-reveal,
  .ty-lcg.ty-stagger > .ty-lc{
    opacity:1!important;transform:none!important;filter:none!important;
    transition:none!important;
  }
  .ty-mag,.ty-mag:hover,.ty-lc.ty-mag:hover{transform:none!important}
  .ty-spot::after{display:none}
}