/* ==================================================================
   Omega Design — Homepage stylesheet (mysite.css)
   Colors, type, and spacing inherit from the theme
   (theme preset variables ONLY — no color-mix, no hex).

   SECTION INDEX
   01. Global — horizontal overflow guard
   02. Hero — fluid grid layout (#mysite-hero)
   03. Hero — rotator
   04. Services — layout variables
   05. Process step cards — hover
   06. Services — grid
   07. Featured panel
   08. Featured entrance sequence
   09. Cards
   10. Icon container
   11. Icon choreography
   12. Responsive — services
   13. Reduced motion
   14. Hero ripple background
   15. Hero — responsive stacking
   16. Process cards — scroll reveal (staggered rise)
================================================================== */


/* ==================================================================
   01. Global — horizontal overflow guard
   Prevent the horizontal scrollbar the hero's 100vw breakout can
   cause. (100vw counts the scrollbar width; this clips that few-px
   overflow.)
================================================================== */
html,body{overflow-x:hidden;}


/* ==================================================================
   02. Hero — fluid grid layout (#mysite-hero)
   Desktop: container1 + container2 side by side (50/50),
            container3 full-width below.
   Mobile:  container2, then container1, then container3.
   The ripple background lives on THIS grid (see section 14),
   injected by initHeroRipple() in the JS.
================================================================== */
#mysite-hero{
  position:relative;      /* anchor the absolutely-positioned ripple layers */
  overflow:hidden;        /* clip the rings to the hero */
  isolation:isolate;      /* keep ripple z-index local */

  /* Force true full-width even if the constrained parent
     (.wp-block-post-content) limits alignfull. Breaks out to the viewport
     edges; max-width:100vw + the html overflow guard (section 01) prevent
     the scrollbar overflow that a bare 100vw can cause. */
  width:100vw;
  max-width:100vw;
  margin-left:calc(50% - 50vw);
  margin-right:calc(50% - 50vw);

  display:grid;
  grid-template-columns:1fr 1fr;
  grid-template-areas:
    "c1 c2"
    "c3 c3";
  gap:0.75rem;
  align-items:stretch;
  padding:0;   /* alignfull already provides the outer edge; no extra inset */
}

#mysite-hero-container1{grid-area:c1;}
#mysite-hero-container2{grid-area:c2;}
#mysite-hero-container3{grid-area:c3;}

/* container1: text block sits on the RIGHT of the column, and every line
   shares ONE common left edge (straight left, ragged right).

   How: give the whole stack a fixed content width (--c1w) pinned to the
   right with margin-left:auto. All headings inherit that same width and
   the same right position, so their left edges line up, and text-align:left
   makes each line start at that shared left edge. */
#mysite-hero-container1{
  --c1w:min(620px,100%);            /* shared text-block width */
  display:flex !important;
  flex-direction:column !important;
  justify-content:flex-end !important;   /* all blocks group at the bottom */
  min-height:100%;
  padding-bottom:var(--wp--preset--spacing--xl,3rem) !important;  /* keep last line on-screen */
}

#mysite-hero-container1 > h2,
#mysite-hero-container1 > h3,
#mysite-hero-container1 > .mysite-rotator,
#mysite-hero-container1 > .wp-block-buttons{
  text-align:left !important;
  width:var(--c1w) !important;      /* same width for every block */
  max-width:100% !important;
  margin-left:auto !important;      /* auto both sides = centered block */
  margin-right:auto !important;
}

/* rotator: the BLOCK keeps its right-pin (set above); only its INNER
   elements reset their margin so text reads left against the shared edge.
   (Previously margin-left:0 here cancelled the block's right-pin and made
   the rotator drop to the far left — that was the split.) */
#mysite-hero-container1 .mysite-rotator__heading,
#mysite-hero-container1 .mysite-rotator__desc,
#mysite-hero-container1 .mysite-rotator__text{
  text-align:left !important;
  justify-content:flex-start !important;
  width:100% !important;
  margin-left:0 !important;
  margin-right:0 !important;
}

/* the three groups fill their cells fully and sit above the ripple */
#mysite-hero > .wp-block-group{
  position:relative;
  z-index:1;
  width:100%;
  margin:0;
}

/* container2 image — gentle float */
#mysite-hero-container2 .wp-block-image img{
  animation:om-float 9s ease-in-out infinite;
  will-change:transform;
}
@keyframes om-float{
  0%,100%{transform:translate3d(0,0,0)}
  50%    {transform:translate3d(0,-10px,0)}
}

@media (max-width:781px){
  #mysite-hero{
    grid-template-columns:1fr;
    grid-template-areas:
      "c2"
      "c1"
      "c3";
  }

  /* mobile: container1 text fills the width and left-aligns
     (no centered --c1w block leaving a gap on the left) */
  #mysite-hero-container1{
    --c1w:100%;
    justify-content:flex-start !important;
    padding-bottom:var(--wp--preset--spacing--l,2rem) !important;
  }
  #mysite-hero-container1 > h2,
  #mysite-hero-container1 > h3,
  #mysite-hero-container1 > .mysite-rotator,
  #mysite-hero-container1 > .wp-block-buttons{
    width:100% !important;
    margin-left:0 !important;
    margin-right:0 !important;
  }
}


/* ==================================================================
   03. Hero — rotator
   Hero keeps TWO classes on the Columns block:
     mysite-hero mysite-hero--light  -> ripple background (section 14)
     is-hero                         -> responsive stacking (section 15)
================================================================== */
.mysite-rotator__heading{margin:0 0 .5em;font-size: var(--wp--preset--font-size--large);}
.mysite-rotator__caret{
  display:inline-block;
  width:2px;height:1em;
  background:currentColor;
  margin-left:3px;
  vertical-align:-.1em;
  animation:ms-blink .8s steps(1) infinite;
}
@keyframes ms-blink{50%{opacity:0}}

.mysite-rotator__desc{opacity:0;transition:opacity .6s ease}
.mysite-rotator__desc.is-visible{opacity:1}
.mysite-rotator--static .mysite-rotator__caret{display:none}


/* ==================================================================
   04. Services — layout variables
   NO HARDCODED COLOR: borders and shadows resolve to currentColor,
   so whatever text color the theme sets for this section is what the
   hover border and halo inherit. Nothing here picks a color.
================================================================== */
.mysite-services *{box-sizing:border-box}

.mysite-services{
  --ms-hover-border:currentColor;
  --ms-hover-shadow:0 10px 26px -16px currentColor;
  --ms-surface:var(--wp--preset--color--surface);
}


/* ==================================================================
   05. Process step cards — hover
   Same surface + hover effect as the service cards. Add class
   "mysite-process" to the COLUMNS block in the editor.
   NOTE: the hover transform/transition for cards that ALSO carry
   the scroll-reveal class lives in section 16, merged so the two
   effects never fight over the transition property.
================================================================== */
.mysite-process{
  --ms-hover-border:var(--wp--preset--color--primary);
  --ms-hover-shadow:0 10px 26px -16px var(--wp--preset--color--primary);
  --ms-surface:var(--wp--preset--color--surface);
}
.mysite-process.wp-block-columns > .wp-block-column{
  background:var(--ms-surface);
  border:1px solid transparent !important;   /* override the block's has-border-color */
  border-radius:20px;
  transition:transform .28s cubic-bezier(.22,.7,.25,1),
             border-color .28s ease,
             box-shadow .28s ease;
}
.mysite-process.wp-block-columns > .wp-block-column:hover{
  transform:translateY(-5px);
  border-color:var(--ms-hover-border) !important;
  box-shadow:var(--ms-hover-shadow);
}


/* ==================================================================
   06. Services — grid
================================================================== */
.mysite-services__grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:var(--wp--style--block-gap,1.5rem);
  align-items:start;
}


/* ==================================================================
   07. Featured panel
================================================================== */
.mysite-feature{
  position:relative;
  border:1px solid transparent;
  border-radius:26px;
  background:var(--ms-surface);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
  padding:var(--wp--preset--spacing--m,1.75rem);
  overflow:hidden;
  transition:box-shadow .3s ease,border-color .3s ease,transform .3s ease;
}
.mysite-feature:hover{
  border-color:var(--ms-hover-border);
  box-shadow:var(--ms-hover-shadow);
}

.mysite-feature__media{
  position:relative;
  aspect-ratio:16/10;
  border-radius:18px;
  overflow:hidden;
  /* no border — the image sits flush inside the panel */
}
.mysite-feature__img{width:100%;height:100%;object-fit:contain;display:block}

.mysite-feature__body{position:relative;padding-top:1.6rem}

.mysite-feature__kicker{
  display:inline-block;
  font-size:.7rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  font-weight:600;
  margin-bottom:.6rem;
  /* no color set — inherits whatever the theme gives this section */
}
.mysite-feature__title{margin:0;line-height:1.2}
.mysite-feature__desc{margin:.75rem 0 1.6rem;line-height:1.65;max-width:48ch;opacity:.8}

.mysite-feature__cta{
  display:inline-flex;
  align-items:center;
  gap:.55rem;
  padding:.7rem 1.3rem;
  border-radius:12px;
  background:var(--wp--preset--color--button-background);
  color:var(--wp--preset--color--button-text);
  text-decoration:none;
  font-weight:600;
  transition:transform .18s ease,filter .18s ease,box-shadow .18s ease;
  box-shadow:0 8px 20px -10px currentColor;
}
.mysite-feature__cta:hover{
  filter:brightness(1.08);
  box-shadow:0 12px 26px -10px currentColor;
}
.mysite-feature__cta:active{transform:translateY(1px)}
.mysite-feature__cta svg{width:1em;height:1em}


/* ==================================================================
   08. Featured entrance sequence
   img (0ms) -> heading (250ms) -> desc (550ms) -> button (1000ms, fade only)
================================================================== */
.mysite-anim-img {opacity:0;transform:scale(1.06)}
.mysite-anim-up  {opacity:0;transform:translateY(16px)}
.mysite-anim-fade{opacity:0}

.mysite-is-in.mysite-anim-img{
  opacity:1;transform:scale(1);
  transition:opacity .7s ease,transform .9s cubic-bezier(.22,.7,.25,1);
}
.mysite-is-in.mysite-anim-up{
  opacity:1;transform:translateY(0);
  transition:opacity .55s ease,transform .6s cubic-bezier(.22,.7,.25,1);
}
.mysite-is-in.mysite-anim-fade{
  opacity:1;
  transition:opacity .6s ease;
}


/* ==================================================================
   09. Cards
================================================================== */
.mysite-cards{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:var(--wp--style--block-gap,1rem);
  margin:0;padding:0;list-style:none;
}

.mysite-card{
  position:relative;
  width:100%;height:100%;
  text-align:left;
  display:flex;
  flex-direction:column;
  gap:.5rem;
  background:var(--ms-surface);
  border:1px solid transparent;
  border-radius:15px;
  padding:var(--wp--preset--spacing--xs,1.1rem);
  color:inherit;
  font:inherit;
  cursor:pointer;
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  transition:transform .28s cubic-bezier(.22,.7,.25,1),
             border-color .28s ease,
             background .28s ease,
             box-shadow .28s ease;
}
.mysite-card:hover{
  transform:translateY(-5px) scale(1.02);
  border-color:var(--ms-hover-border);
  box-shadow:var(--ms-hover-shadow);
}
.mysite-card:focus-visible{outline:2px solid currentColor;outline-offset:3px}
.mysite-card.mysite-is-active{
  border-color:currentColor;
  box-shadow:var(--ms-hover-shadow);
}

.mysite-card__title{margin:0;font-size:.95rem;font-weight:650;line-height:1.3}
.mysite-card__desc {margin:0;font-size:.8rem;line-height:1.55;opacity:.7}


/* ==================================================================
   10. Icon container
   NO HARDCODED COLOR: the resting border inherits the theme border
   preset; hover/active borders resolve to currentColor. Background
   lifts to the theme background color on hover.
================================================================== */
.mysite-card__icon{
  width:40px;height:40px;
  border-radius:12px;
  display:grid;place-items:center;
  border:1px solid var(--wp--preset--color--border);
  background:transparent;
  margin-bottom:.25rem;
  transition:background .3s ease,border-color .3s ease;
}
.mysite-card:hover .mysite-card__icon,
.mysite-card.mysite-is-active .mysite-card__icon{
  background:var(--wp--preset--color--background);
  border-color:currentColor;
}

.mysite-card__icon svg{
  width:20px;height:20px;
  overflow:visible;
  stroke:currentColor;fill:none;
  stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;
}

/* fill-box makes each child transform around its OWN bounding box,
   so a wheel turns in place instead of orbiting the viewBox centre. */
.mysite-card__icon svg > *{
  transform-box:fill-box;
  transform-origin:50% 50%;
  transition:transform .35s cubic-bezier(.22,.7,.25,1),opacity .3s ease;
}


/* ==================================================================
   11. Icon choreography — each icon animates what it depicts
================================================================== */

/* -- Shared keyframes ------------------------------------------- */
@keyframes ms-trace{
  from{stroke-dashoffset:var(--ms-len,40)}
  to  {stroke-dashoffset:0}
}
@keyframes ms-dot{
  0%  {transform:scale(.2);opacity:.3}
  60% {transform:scale(1.45);opacity:1}
  100%{transform:scale(1);opacity:1}
}
@keyframes ms-seal{
  0%  {transform:scale(1)}
  40% {transform:scale(.9)}
  100%{transform:scale(1)}
}

/* -- GLOBE — meridian sweeps, latitudes dim --------------------- */
.mysite-card:hover [data-icon="globe"] > :nth-child(3){
  animation:ms-meridian 2.8s cubic-bezier(.45,0,.55,1) infinite;
}
.mysite-card:hover [data-icon="globe"] > :nth-child(2){
  animation:ms-latitude 2.8s cubic-bezier(.45,0,.55,1) infinite;
}
@keyframes ms-meridian{
  0%,100%{transform:scaleX(1)}
  50%    {transform:scaleX(.12)}
}
@keyframes ms-latitude{
  0%,100%{opacity:1}
  50%    {opacity:.45}
}

/* -- WP — ring settles, W traces left to right ------------------ */
.mysite-card:hover [data-icon="wp"] > :nth-child(1){
  animation:ms-ring .75s cubic-bezier(.34,1.4,.64,1);
}
.mysite-card:hover [data-icon="wp"] > :nth-child(2){
  stroke-dasharray:var(--ms-len,40);
  animation:ms-trace .75s cubic-bezier(.4,0,.2,1);
}
@keyframes ms-ring{
  0%  {transform:scale(1)}
  45% {transform:scale(1.08)}
  100%{transform:scale(1)}
}

/* -- PALETTE — paint dots pop in sequence ----------------------- */
.mysite-card:hover [data-icon="palette"] > :nth-child(2){animation:ms-dot .5s cubic-bezier(.34,1.6,.64,1) 0s   both}
.mysite-card:hover [data-icon="palette"] > :nth-child(3){animation:ms-dot .5s cubic-bezier(.34,1.6,.64,1) .09s both}
.mysite-card:hover [data-icon="palette"] > :nth-child(4){animation:ms-dot .5s cubic-bezier(.34,1.6,.64,1) .18s both}

/* -- BADGE — crest seals, star pops, ribbon drops --------------- */
.mysite-card:hover [data-icon="badge"] > :nth-child(1){animation:ms-seal   .6s  cubic-bezier(.34,1.5,.64,1)}
.mysite-card:hover [data-icon="badge"] > :nth-child(2){animation:ms-dot    .45s cubic-bezier(.34,1.6,.64,1) .12s both}
.mysite-card:hover [data-icon="badge"] > :nth-child(3){animation:ms-ribbon .5s  cubic-bezier(.22,.7,.25,1)  .2s  both}
@keyframes ms-ribbon{
  from{transform:translateY(-4px) scaleY(.5);opacity:0}
  to  {transform:translateY(0) scaleY(1);opacity:1}
}

/* -- CART — body rolls back, wheels turn underneath ------------- */
.mysite-card:hover [data-icon="cart"] > :nth-child(1){animation:ms-cart-body .7s cubic-bezier(.3,.7,.4,1)}
.mysite-card:hover [data-icon="cart"] > :nth-child(2){animation:ms-wheel     .7s cubic-bezier(.3,.7,.4,1)}
.mysite-card:hover [data-icon="cart"] > :nth-child(3){animation:ms-wheel     .7s cubic-bezier(.3,.7,.4,1) .04s}
@keyframes ms-cart-body{
  0%  {transform:translateX(0)}
  35% {transform:translateX(-2.5px)}
  100%{transform:translateX(0)}
}
@keyframes ms-wheel{
  0%  {transform:translateX(0) rotate(0)}
  35% {transform:translateX(-2.5px) rotate(-70deg)}
  100%{transform:translateX(0) rotate(0)}
}

/* -- CHART — line climbs, arrowhead lands last ------------------ */
.mysite-card:hover [data-icon="chart"] > :nth-child(3){
  stroke-dasharray:var(--ms-len,32);
  animation:ms-trace .55s cubic-bezier(.35,0,.2,1);
}
.mysite-card:hover [data-icon="chart"] > :nth-child(4){
  animation:ms-arrowhead .3s cubic-bezier(.34,1.6,.64,1) .45s both;
}
@keyframes ms-arrowhead{
  from{transform:scale(.3) translate(-2px,2px);opacity:0}
  to  {transform:scale(1) translate(0,0);opacity:1}
}

/* -- SHIELD — plate settles, check strikes through -------------- */
.mysite-card:hover [data-icon="shield"] > :nth-child(1){
  animation:ms-seal .55s cubic-bezier(.34,1.5,.64,1);
}
.mysite-card:hover [data-icon="shield"] > :nth-child(2){
  stroke-dasharray:var(--ms-len,12);
  animation:ms-trace .35s cubic-bezier(.6,0,.3,1) .18s both;
}

/* -- PHONE — screen wakes, then a short haptic tick ------------- */
.mysite-card:hover [data-icon="phone"]{
  animation:ms-tick .45s cubic-bezier(.36,.07,.19,.97) .25s;
}
.mysite-card:hover [data-icon="phone"] > :nth-child(1){
  animation:ms-wake .5s ease;
}
@keyframes ms-wake{
  0%  {opacity:.45}
  40% {opacity:1}
  100%{opacity:1}
}
@keyframes ms-tick{
  0%,100%{transform:translateX(0) rotate(0)}
  25%    {transform:translateX(-1.2px) rotate(-2deg)}
  55%    {transform:translateX(1.2px) rotate(2deg)}
  80%    {transform:translateX(-.6px) rotate(-1deg)}
}

/* -- SHARE — signal fires from source, travels, lands ----------- */
.mysite-card:hover [data-icon="share"] > :nth-child(2){animation:ms-dot .45s cubic-bezier(.34,1.6,.64,1)}
.mysite-card:hover [data-icon="share"] > :nth-child(4){
  stroke-dasharray:var(--ms-len,16);
  animation:ms-trace .4s cubic-bezier(.4,0,.2,1) .12s both;
}
.mysite-card:hover [data-icon="share"] > :nth-child(1){animation:ms-dot .4s cubic-bezier(.34,1.6,.64,1) .38s both}
.mysite-card:hover [data-icon="share"] > :nth-child(3){animation:ms-dot .4s cubic-bezier(.34,1.6,.64,1) .46s both}

/* -- PEN — nib travels the stroke it just made ------------------ */
.mysite-card:hover [data-icon="pen"] > :nth-child(1){
  stroke-dasharray:var(--ms-len,52);
  animation:ms-trace .6s cubic-bezier(.4,0,.25,1);
}
.mysite-card:hover [data-icon="pen"] > :nth-child(2){
  animation:ms-nib .6s cubic-bezier(.4,0,.25,1);
}
@keyframes ms-nib{
  0%  {transform:translate(-9px,9px)}
  100%{transform:translate(0,0)}
}

/* -- Active card: full icon draw-on ----------------------------- */
.mysite-card.mysite-is-active .mysite-card__icon svg > *{
  stroke-dasharray:var(--ms-len,120);
  animation:ms-draw .9s cubic-bezier(.4,0,.2,1) both;
}
@keyframes ms-draw{
  from{stroke-dashoffset:var(--ms-len,120)}
  to  {stroke-dashoffset:0}
}


/* ==================================================================
   12. Responsive — services
================================================================== */
@media (max-width:860px){
  .mysite-rotator__heading{font-size: var(--wp--preset--font-size--medium);}
  .mysite-services__grid{grid-template-columns:1fr}
  .mysite-feature{order:-1}
  .mysite-cards{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:420px){
  .mysite-card{padding:.85rem}
  .mysite-card__desc{font-size:.75rem}
}


/* ==================================================================
   13. Reduced motion
================================================================== */
@media (prefers-reduced-motion:reduce){
  .mysite-services *,
  .mysite-rotator *{
    animation:none!important;
    transition-duration:.01ms!important;
  }
  .mysite-anim-img,
  .mysite-anim-up,
  .mysite-anim-fade{opacity:1;transform:none}
  .mysite-rotator__desc{opacity:1}
  .mysite-card__icon svg > *{stroke-dasharray:none;stroke-dashoffset:0}
}


/* ==================================================================
   14. Hero ripple background — #mysite-hero GRID
   VARIABLES ONLY: rings/core/wash use the solid theme primary; the
   old color-mix transparency is recreated with element OPACITY so the
   visual intensity stays close to before. Veils use the solid surface
   color and the vignette layer carries its own opacity.

   RIPPLE SIZE: every ring and soft core reads --om-ring / --om-core,
   so the whole effect scales from these two lines.
================================================================== */
#mysite-hero{
  --om-accent:var(--wp--preset--color--primary);
  --om-surface:var(--wp--preset--color--page-background);

  /* origins + timing */
  --om-x:50%;
  --om-y:50%;
  --om-x2:20%;
  --om-y2:35%;
  --om-x3:78%;
  --om-y3:65%;
  --om-cycle:12s;

  /* ripple diameters — tune the whole effect here */
  --om-ring:min(26vw,300px);
  --om-core:min(28vw,320px);
}

/* smaller screens get a proportionally tighter ripple */
@media (max-width:781px){
  #mysite-hero{
    --om-ring:min(46vw,240px);
    --om-core:min(50vw,260px);
  }
}

[data-theme="dark"] #mysite-hero,
.is-dark-theme #mysite-hero,
body.dark #mysite-hero{
  --om-accent:var(--wp--preset--color--primary-dark);
  --om-surface:var(--wp--preset--color--page-background-dark);
}

/* ripple layers: pulled out of grid flow so they never eat a cell.
   grid-area 1/1/-1/-1 makes grid ignore them for auto-placement. */
#mysite-hero > .mysite-hero__bg,
#mysite-hero > .mysite-hero__bg2,
#mysite-hero > .mysite-hero__bg3{
  position:absolute !important;
  inset:0 !important;
  grid-area:1 / 1 / -1 / -1 !important;
  z-index:0 !important;
  margin:0 !important;
  padding:0 !important;
  width:auto !important;
  overflow:hidden;
  pointer-events:none;
}

/* Rings — interactive layer
   (border is solid accent; keyframe opacities are scaled down to
   match the old 42%-alpha look: .9->.38, .34->.14) */
#mysite-hero > .mysite-hero__bg i{
  position:absolute;
  top:var(--om-y);
  left:var(--om-x);
  width:var(--om-ring);
  aspect-ratio:1;
  margin-top:calc(var(--om-ring) / -2);
  margin-left:calc(var(--om-ring) / -2);
  border:1px solid var(--om-accent);
  border-radius:50%;
  opacity:0;
  transform:scale(.06);
  will-change:transform,opacity;
  animation:om-ripple var(--om-cycle) cubic-bezier(.16,.62,.30,1) infinite;
}
#mysite-hero > .mysite-hero__bg i:nth-child(1){animation-delay:0s}
#mysite-hero > .mysite-hero__bg i:nth-child(2){animation-delay:calc(var(--om-cycle) * -.2)}
#mysite-hero > .mysite-hero__bg i:nth-child(3){animation-delay:calc(var(--om-cycle) * -.4)}
#mysite-hero > .mysite-hero__bg i:nth-child(4){animation-delay:calc(var(--om-cycle) * -.6)}
#mysite-hero > .mysite-hero__bg i:nth-child(5){animation-delay:calc(var(--om-cycle) * -.8)}

@keyframes om-ripple{
  0%  {transform:scale(.06); opacity:0}
  8%  {opacity:.38}
  55% {opacity:.14}
  100%{transform:scale(1.4); opacity:0}
}

/* Second ripple — top-left corner */
#mysite-hero > .mysite-hero__bg2 i{
  position:absolute;
  top:var(--om-y2);
  left:var(--om-x2);
  width:var(--om-ring);
  aspect-ratio:1;
  margin-top:calc(var(--om-ring) / -2);
  margin-left:calc(var(--om-ring) / -2);
  border:1px solid var(--om-accent);
  border-radius:50%;
  opacity:0;
  transform:scale(.06);
  will-change:transform,opacity;
  animation:om-ripple var(--om-cycle) cubic-bezier(.16,.62,.30,1) infinite;
}
#mysite-hero > .mysite-hero__bg2 i:nth-child(1){animation-delay:calc(var(--om-cycle) * -.1)}
#mysite-hero > .mysite-hero__bg2 i:nth-child(2){animation-delay:calc(var(--om-cycle) * -.3)}
#mysite-hero > .mysite-hero__bg2 i:nth-child(3){animation-delay:calc(var(--om-cycle) * -.5)}
#mysite-hero > .mysite-hero__bg2 i:nth-child(4){animation-delay:calc(var(--om-cycle) * -.7)}
#mysite-hero > .mysite-hero__bg2 i:nth-child(5){animation-delay:calc(var(--om-cycle) * -.9)}

#mysite-hero > .mysite-hero__bg2::before{
  content:'';
  position:absolute;
  top:var(--om-y2);
  left:var(--om-x2);
  width:var(--om-core);
  aspect-ratio:1;
  margin-top:calc(var(--om-core) / -2);
  margin-left:calc(var(--om-core) / -2);
  border-radius:50%;
  background:radial-gradient(circle,var(--om-accent),transparent 62%);
  filter:blur(34px);
  animation:om-core var(--om-cycle) ease-in-out infinite;
}

/* Third ripple — bottom-right corner */
#mysite-hero > .mysite-hero__bg3 i{
  position:absolute;
  top:var(--om-y3);
  left:var(--om-x3);
  width:var(--om-ring);
  aspect-ratio:1;
  margin-top:calc(var(--om-ring) / -2);
  margin-left:calc(var(--om-ring) / -2);
  border:1px solid var(--om-accent);
  border-radius:50%;
  opacity:0;
  transform:scale(.06);
  will-change:transform,opacity;
  animation:om-ripple var(--om-cycle) cubic-bezier(.16,.62,.30,1) infinite;
}
#mysite-hero > .mysite-hero__bg3 i:nth-child(1){animation-delay:calc(var(--om-cycle) * -.05)}
#mysite-hero > .mysite-hero__bg3 i:nth-child(2){animation-delay:calc(var(--om-cycle) * -.25)}
#mysite-hero > .mysite-hero__bg3 i:nth-child(3){animation-delay:calc(var(--om-cycle) * -.45)}
#mysite-hero > .mysite-hero__bg3 i:nth-child(4){animation-delay:calc(var(--om-cycle) * -.65)}
#mysite-hero > .mysite-hero__bg3 i:nth-child(5){animation-delay:calc(var(--om-cycle) * -.85)}

#mysite-hero > .mysite-hero__bg3::before{
  content:'';
  position:absolute;
  top:var(--om-y3);
  left:var(--om-x3);
  width:var(--om-core);
  aspect-ratio:1;
  margin-top:calc(var(--om-core) / -2);
  margin-left:calc(var(--om-core) / -2);
  border-radius:50%;
  background:radial-gradient(circle,var(--om-accent),transparent 62%);
  filter:blur(34px);
  animation:om-core var(--om-cycle) ease-in-out infinite;
}

/* Soft core at the interactive origin */
#mysite-hero > .mysite-hero__bg::before{
  content:'';
  position:absolute;
  top:var(--om-y);
  left:var(--om-x);
  width:var(--om-core);
  aspect-ratio:1;
  margin-top:calc(var(--om-core) / -2);
  margin-left:calc(var(--om-core) / -2);
  border-radius:50%;
  background:radial-gradient(circle,var(--om-accent),transparent 62%);
  filter:blur(34px);
  animation:om-core var(--om-cycle) ease-in-out infinite;
}
/* core opacity scaled to match the old 18%-alpha look: .62->.11, 1->.18 */
@keyframes om-core{
  0%,100%{opacity:.11;transform:scale(1)}
  50%    {opacity:.18;transform:scale(1.10)}
}

/* Vignette — solid surface color in the gradients; layer opacity
   approximates the old three veil strengths */
#mysite-hero > .mysite-hero__bg::after{
  content:'';
  position:absolute;
  inset:0;
  opacity:.6;
  background:
    radial-gradient(ellipse 62% 58% at 24% 50%,var(--om-surface),transparent 60%),
    linear-gradient(to bottom,var(--om-surface),transparent 32%,var(--om-surface));
}

/* Ambient wash on the grid itself
   (wash opacity scaled to match the old 10%-alpha look: .7->.07, 1->.10) */
#mysite-hero::before{
  content:'';
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  background:radial-gradient(ellipse 44% 56% at 14% 78%,var(--om-accent),transparent 66%);
  animation:om-breathe 17s ease-in-out infinite;
}
@keyframes om-breathe{
  0%,100%{opacity:.07}
  50%    {opacity:.10}
}

/* Reduced motion — ripple */
@media(prefers-reduced-motion:reduce){
  #mysite-hero > .mysite-hero__bg i,
  #mysite-hero > .mysite-hero__bg2 i,
  #mysite-hero > .mysite-hero__bg3 i,
  #mysite-hero > .mysite-hero__bg::before,
  #mysite-hero > .mysite-hero__bg2::before,
  #mysite-hero > .mysite-hero__bg3::before,
  #mysite-hero::before{animation:none}
  #mysite-hero > .mysite-hero__bg i:nth-child(3),
  #mysite-hero > .mysite-hero__bg2 i:nth-child(3),
  #mysite-hero > .mysite-hero__bg3 i:nth-child(3){opacity:.17;transform:scale(1.3)}
  #mysite-hero::before{opacity:.08}
  #mysite-hero > .mysite-hero__bg::before,
  #mysite-hero > .mysite-hero__bg2::before,
  #mysite-hero > .mysite-hero__bg3::before{opacity:.14}
}


/* ==================================================================
   15. Hero — responsive stacking (image on top, text below)
   Scoped to the "is-hero" editor class. Works alongside the ripple:
   .mysite-hero keeps painting the background; is-hero only changes
   how the two real columns lay out on small screens.

   NOTE: the old min-height:clamp(...) was REMOVED from .mysite-hero,
   so the hero sizes to its content on desktop (no dead space).
================================================================== */
@media (max-width:860px){
  .wp-block-columns.is-hero.is-hero{
    flex-direction:column !important;
    align-items:center;
    text-align:center;
    gap:1rem !important;
    row-gap:1rem !important;
    padding-top:var(--wp--preset--spacing--l) !important;
    padding-bottom:var(--wp--preset--spacing--l) !important;
  }

  /* full width regardless of any inline flex-basis on the columns */
  .wp-block-columns.is-hero.is-hero > .wp-block-column{
    flex-basis:auto !important;
    max-width:100% !important;
    width:100% !important;
    padding:0 !important;
  }

  /* kill the space-between stretch inside each column */
  .wp-block-columns.is-hero.is-hero > .wp-block-column.is-layout-flex,
  .wp-block-columns.is-hero.is-hero > .wp-block-column.is-layout-constrained{
    justify-content:center !important;
  }

  /* the text column is set to vertically-align bottom on desktop, which
     stretches it tall on mobile and dumps a big void before the button.
     Force it back to content height and normal top-down flow. */
  .wp-block-columns.is-hero.is-hero > .wp-block-column.is-vertically-aligned-bottom,
  .wp-block-columns.is-hero.is-hero > .wp-block-column.is-vertically-aligned-center,
  .wp-block-columns.is-hero.is-hero > .wp-block-column.is-vertically-aligned-top{
    align-self:auto !important;
    justify-content:flex-start !important;
    height:auto !important;
    min-height:0 !important;
  }

  /* image column on top, text column below.
     Target BOTH by position and by the image column's inline flex-basis,
     so it wins even if another stylesheet sets order on these columns. */
  .wp-block-columns.is-hero.is-hero > .wp-block-column:first-child{order:2 !important}
  .wp-block-columns.is-hero.is-hero > .wp-block-column:last-child {order:1 !important}
  .wp-block-columns.is-hero.is-hero > .wp-block-column[style*="flex-basis:40%"]{order:1 !important}

  /* tighten the vertical rhythm of the text block */
  .wp-block-columns.is-hero.is-hero h2,
  .wp-block-columns.is-hero.is-hero h3,
  .wp-block-columns.is-hero.is-hero .mysite-rotator{
    margin-top:.4rem !important;
    margin-bottom:.4rem !important;
  }

  /* center the call-to-action under the text and cap its width */
  .wp-block-columns.is-hero.is-hero .wp-block-buttons{
    justify-content:center !important;
    margin-top:1.2rem !important;
  }
  .wp-block-columns.is-hero.is-hero .wp-block-button__link{
    display:inline-block;
  }

  /* keep the image centered and inside the viewport */
  .wp-block-columns.is-hero.is-hero .wp-block-image{
    display:flex;
    justify-content:center;
    margin:0 auto !important;
  }
  .wp-block-columns.is-hero.is-hero .wp-block-image img{
    max-width:min(320px,78%);
    height:auto;
  }
}

@media (max-width:480px){
  .wp-block-columns.is-hero .wp-block-image img{
    max-width:min(280px,90%);
  }
}


/* ==================================================================
   16. Process cards — scroll reveal (staggered rise)
   Requires BOTH classes in the editor:
     "mysite-process"      on the parent COLUMNS block (section 05 hover)
     "mysite-process-card" on each COLUMN block (this reveal)
   Specificity matches the section 05 hover rule so the transitions
   MERGE instead of overriding each other. One transition declaration
   covers reveal (opacity/transform) + hover (border/shadow).
   JS: initProcessReveal() in mysite.js toggles .mysite-visible.
================================================================== */
.mysite-process.wp-block-columns > .wp-block-column.mysite-process-card{
  opacity:0;
  transform:translateY(28px);
  transition:opacity .6s ease,
             transform .6s cubic-bezier(.22,.61,.36,1),
             border-color .28s ease,
             box-shadow .28s ease;
  will-change:opacity,transform;
}
.mysite-process.wp-block-columns > .wp-block-column.mysite-process-card.mysite-visible{
  opacity:1;
  transform:translateY(0);
}

/* stagger 01 → 02 → 03 → 04 */
.mysite-process.wp-block-columns > .wp-block-column.mysite-process-card.mysite-visible:nth-child(1){transition-delay:0s}
.mysite-process.wp-block-columns > .wp-block-column.mysite-process-card.mysite-visible:nth-child(2){transition-delay:.15s}
.mysite-process.wp-block-columns > .wp-block-column.mysite-process-card.mysite-visible:nth-child(3){transition-delay:.3s}
.mysite-process.wp-block-columns > .wp-block-column.mysite-process-card.mysite-visible:nth-child(4){transition-delay:.45s}

/* after reveal, hover lifts instantly with the faster hover timing —
   no stagger delay, transform hands back to the .28s curve */
.mysite-process.wp-block-columns > .wp-block-column.mysite-process-card.mysite-visible:hover{
  transform:translateY(-5px);
  transition:transform .28s cubic-bezier(.22,.7,.25,1),
             border-color .28s ease,
             box-shadow .28s ease,
             opacity .28s ease;
  transition-delay:0s;
}

@media (prefers-reduced-motion:reduce){
  .mysite-process-card{
    opacity:1!important;
    transform:none!important;
  }
}