/* ==========================================================================
   Carmel Community Church — motion kit for Elementor
   Drop-in companion to carmel-motion.js. Reproduces the approved prototype
   motion exactly; nothing here depends on the prototype's layout CSS.

   The tokens below are the only dependency. If you have already registered
   these as Elementor Global Colors you can delete this :root block, but
   leaving it costs nothing and keeps the file self-contained.
   ========================================================================== */
:root{
  --teal:#196F8F;
  --teal-dark:#12536B;
  --gold:#C5A059;
  --white:#FFFFFF;
  --radius-img:8px;
  --radius-card:12px;
  --ease:cubic-bezier(.165,.84,.44,1);
  --t-fast:.25s;
  --t-base:.4s;
  --t-slow:.6s;
}

/* Elementor's editor must never see a hidden widget — carmel-motion.js also
   refuses to add .has-anim in the editor, this is the belt to that braces. */
.elementor-editor-active [data-anim],
.elementor-editor-preview [data-anim]{
  opacity:1 !important; transform:none !important;
  clip-path:none !important; filter:none !important;
}

/* ==========================================================================
   17. MOTION
   Two halves: entrance (once, on scroll into view) and hover (continuous).
   Entrance is opt-in per element via data-anim, and gated behind .has-anim
   which JS sets on <html> — so with JS off or broken, everything is visible.
   ========================================================================== */

/* ---- 17a. Entrance ---- */
.has-anim [data-anim]{
  opacity:0;
  transition:opacity .75s var(--ease), transform .75s var(--ease), clip-path .9s var(--ease);
  transition-delay:var(--d,0ms);
  will-change:opacity, transform;
}
/* Release the compositor layer once the element has arrived — on a long page
   leaving will-change on 60+ elements costs more than it saves. */
.has-anim [data-anim].is-in{will-change:auto}
.has-anim [data-anim="up"]      {transform:translateY(30px)}
.has-anim [data-anim="down"]    {transform:translateY(-26px)}
.has-anim [data-anim="left"]    {transform:translateX(-36px)}
.has-anim [data-anim="right"]   {transform:translateX(36px)}
.has-anim [data-anim="scale"]   {transform:scale(.93)}
.has-anim [data-anim="fade"]    {transform:none}
.has-anim [data-anim="clip"]    {clip-path:inset(100% 0 0 0 round var(--clip-r,0px)); opacity:1}
.has-anim .split__media[data-anim="clip"]{--clip-r:var(--radius-img)}
.has-anim .pathway[data-anim="clip"],
.has-anim .event[data-anim="clip"],
.has-anim .video-card[data-anim="clip"]{--clip-r:var(--radius-card)}
.has-anim [data-anim="clip"] img{transform:scale(1.14); transition:transform 1.3s var(--ease); transition-delay:var(--d,0ms)}
.has-anim [data-anim="blur"]    {transform:translateY(20px); filter:blur(8px); transition-property:opacity,transform,filter}

.has-anim [data-anim].is-in{
  opacity:1;
  transform:none;
  clip-path:inset(0 0 0 0 round var(--clip-r,0px));
  filter:none;
}
.has-anim [data-anim="clip"].is-in img{transform:scale(1)}

/* Heading mask — JS wraps the heading in .mask, the heading rises from behind it */
.has-anim .mask{overflow:hidden; display:block; padding-bottom:.12em; margin-bottom:-.12em}
.has-anim .mask > [data-anim="mask"]{
  display:block; transform:translateY(108%); opacity:1;
  transition:transform .9s var(--ease); transition-delay:var(--d,0ms);
}
.has-anim .mask > [data-anim="mask"].is-in{transform:translateY(0)}

/* Rule that draws itself in */
.has-anim [data-anim="rule"]{
  opacity:1; transform-origin:left center; transform:scaleX(0);
  transition:transform .9s var(--ease); transition-delay:var(--d,0ms);
}
.has-anim [data-anim="rule"].is-in{transform:scaleX(1)}

/* Legacy hooks kept so older markup still animates */
.has-anim [data-reveal]{opacity:0; transform:translateY(28px); transition:opacity .7s var(--ease), transform .7s var(--ease)}
.has-anim [data-reveal].is-in{opacity:1; transform:none}

/* ---- 17b. Hover ---- */
/* Buttons: lift plus a light sweep across the face */
.btn{position:relative; overflow:hidden; isolation:isolate}
.btn::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(110deg, transparent 20%, rgba(255,255,255,.22) 50%, transparent 80%);
  transform:translateX(-120%);
  transition:transform .7s var(--ease);
}
.btn:hover::before{transform:translateX(120%)}
.btn:active{transform:translateY(0)}

/* Contact icons fill on hover */
.contact-item{transition:transform var(--t-base) var(--ease)}
.contact-item__icon{transition:background var(--t-base) var(--ease), color var(--t-base) var(--ease), transform var(--t-base) var(--ease)}
.contact-item:hover .contact-item__icon{background:var(--teal); color:var(--white); transform:scale(1.06) rotate(-4deg)}

/* Pathway + event: gold rule grows along the bottom edge */
.pathway,.event{position:relative}
.pathway::before,.event::before{
  content:""; position:absolute; left:0; right:0; bottom:0; height:3px; z-index:3;
  background:var(--gold); transform:scaleX(0); transform-origin:left;
  transition:transform var(--t-slow) var(--ease);
}
.pathway:hover::before,.event:hover::before{transform:scaleX(1)}
.pathway__body h3,.event__body h3{transition:transform var(--t-base) var(--ease)}
.pathway:hover .pathway__body h3,.event:hover .event__body h3{transform:translateX(6px)}

/* Identity panel label lifts as the image warms up */
.identity__panel span{transition:transform var(--t-slow) var(--ease)}
.identity__panel:hover span{transform:translateY(-6px)}

/* Card heading takes the teal on hover */
.card__body h3{transition:color var(--t-base) var(--ease)}
@media (hover:hover){ .card:hover .card__body h3{color:var(--teal)} }

/* Video play button pulses at rest */
@media (hover:hover){
  .video-card__play{animation:pulse 2.8s var(--ease) infinite}
  .video-card:hover .video-card__play{animation:none}
}
@keyframes pulse{
  0%,100%{box-shadow:0 0 0 0 rgba(255,255,255,.28)}
  70%{box-shadow:0 0 0 22px rgba(255,255,255,0)}
}

/* Stat figures nudge up together */
.stat b{transition:transform var(--t-base) var(--ease)}
.stat:hover b{transform:translateY(-3px)}


/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  [data-anim]{opacity:1 !important; transform:none !important; clip-path:none !important; filter:none !important}
  [data-anim="clip"] img{transform:none !important}
  .mask > [data-anim="mask"]{transform:none !important}
  .video-card__play{animation:none !important}
  .btn::before,.elementor-button::before{display:none}
}

/* ---------- Elementor widget bridges ----------
   The hover rules above are written against the prototype's class names.
   These map the same behaviour onto Elementor's own markup so a stock
   Button, Image Box or Icon widget behaves identically without a rebuild. */
.elementor-button{position:relative; overflow:hidden; isolation:isolate;
  transition:background-color var(--t-base) var(--ease), color var(--t-base) var(--ease), transform var(--t-fast) var(--ease)}
.elementor-button:hover{transform:translateY(-2px)}
.elementor-button::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(110deg, transparent 20%, rgba(255,255,255,.22) 50%, transparent 80%);
  transform:translateX(-120%); transition:transform .7s var(--ease);
}
.elementor-button:hover::before{transform:translateX(120%)}

/* Image inside any widget marked .ccc-zoom scales inside a fixed frame */
.ccc-zoom{overflow:hidden; border-radius:var(--radius-img)}
.ccc-zoom img{transition:transform .7s var(--ease)}
@media (hover:hover){ .ccc-zoom:hover img{transform:scale(1.04)} }

/* Card lift for any widget or container marked .ccc-lift */
.ccc-lift{transition:transform var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease)}
@media (hover:hover){
  .ccc-lift:hover{transform:translateY(-2px);
    box-shadow:0 4px 8px rgba(26,37,47,.06), 0 24px 48px -16px rgba(26,37,47,.22)}
}