/* WeddingOS — Organic section motion refinement */
body.motion-ready.cj-ready .section.reveal{
  opacity:0;
  filter:none;
  transform:translate3d(0,52px,0);
  transition:
    opacity 1.2s cubic-bezier(.22,1,.36,1),
    transform 1.45s cubic-bezier(.22,1,.36,1);
  transition-delay:0ms;
}
body.motion-ready.cj-ready .section.cj-flow-left.reveal{transform:translate3d(-18px,52px,0)}
body.motion-ready.cj-ready .section.cj-flow-right.reveal{transform:translate3d(18px,52px,0)}
body.motion-ready.cj-ready .section.reveal.is-visible{
  opacity:1;
  transform:translate3d(0,0,0);
}

/* The content inside a section arrives as one composition, with a soft natural cadence. */
body.motion-ready.cj-ready .section.reveal .section-header,
body.motion-ready.cj-ready .section.reveal .panel,
body.motion-ready.cj-ready .section.reveal .countdown,
body.motion-ready.cj-ready .section.reveal .gallery,
body.motion-ready.cj-ready .section.reveal .event-grid,
body.motion-ready.cj-ready .section.reveal .rsvp-shell{
  opacity:.18;
  transform:translate3d(0,18px,0);
  transition:opacity 1.05s ease .14s,transform 1.25s cubic-bezier(.22,1,.36,1) .14s;
}
body.motion-ready.cj-ready .section.reveal.is-visible .section-header,
body.motion-ready.cj-ready .section.reveal.is-visible .panel,
body.motion-ready.cj-ready .section.reveal.is-visible .countdown,
body.motion-ready.cj-ready .section.reveal.is-visible .gallery,
body.motion-ready.cj-ready .section.reveal.is-visible .event-grid,
body.motion-ready.cj-ready .section.reveal.is-visible .rsvp-shell{
  opacity:1;
  transform:none;
}

.section.cj-organic-section{overflow:hidden;isolation:isolate}
.section.cj-organic-section::before{
  width:min(980px,78vw);
  background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--cj-moss) 25%,var(--line)),color-mix(in srgb,var(--cj-champagne) 35%,var(--line)),transparent);
  opacity:.42;
}
.cj-organic-veil{
  position:absolute;
  z-index:-1;
  pointer-events:none;
  width:min(620px,58vw);
  height:min(520px,48vw);
  top:-9%;
  opacity:.1;
  background:
    radial-gradient(ellipse at 35% 42%,color-mix(in srgb,var(--cj-moss) 35%,transparent),transparent 58%),
    url("data:image/svg+xml,%3Csvg viewBox='0 0 620 500' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='%235f7058' stroke-width='2' stroke-linecap='round' opacity='.85'%3E%3Cpath d='M30 480 C160 390 155 255 300 185 C400 138 438 64 590 18'/%3E%3Cpath d='M145 382 C92 357 62 322 43 275 M230 245 C180 225 145 190 124 143 M350 153 C405 132 445 98 472 55'/%3E%3C/g%3E%3Cg fill='%235f7058' opacity='.55'%3E%3Cellipse cx='104' cy='345' rx='31' ry='12' transform='rotate(34 104 345)'/%3E%3Cellipse cx='67' cy='295' rx='29' ry='11' transform='rotate(-50 67 295)'/%3E%3Cellipse cx='184' cy='219' rx='31' ry='12' transform='rotate(31 184 219)'/%3E%3Cellipse cx='416' cy='119' rx='34' ry='13' transform='rotate(-29 416 119)'/%3E%3Cellipse cx='512' cy='48' rx='30' ry='11' transform='rotate(38 512 48)'/%3E%3C/g%3E%3C/svg%3E") center/contain no-repeat;
  animation:cj-organic-breathe 18s ease-in-out infinite alternate;
}
.cj-flow-left .cj-organic-veil{left:-12%;transform-origin:left center}
.cj-flow-right .cj-organic-veil{right:-12%;transform:scaleX(-1);transform-origin:right center}

/* Countdown changes should feel like breathing, not flipping or flashing. */
.countdown-item strong.cj-tick{animation:cj-soft-tick .48s cubic-bezier(.22,1,.36,1)}

@keyframes cj-soft-tick{
  0%{opacity:.55;transform:translateY(5px)}
  100%{opacity:1;transform:translateY(0)}
}
@keyframes cj-organic-breathe{
  0%{opacity:.065;translate:0 0;rotate:-1deg;scale:.98}
  100%{opacity:.13;translate:18px 10px;rotate:1.2deg;scale:1.035}
}

@media(max-width:820px){
  body.motion-ready.cj-ready .section.reveal,
  body.motion-ready.cj-ready .section.cj-flow-left.reveal,
  body.motion-ready.cj-ready .section.cj-flow-right.reveal{transform:translate3d(0,34px,0)}
  .cj-organic-veil{width:82vw;height:68vw;top:-3%;opacity:.075}
}

@media(prefers-reduced-motion:reduce){
  body.motion-ready.cj-ready .section.reveal,
  body.motion-ready.cj-ready .section.reveal *{opacity:1!important;transform:none!important;transition:none!important}
  .cj-organic-veil{animation:none}
  .countdown-item strong.cj-tick{animation:none}
}
