/* ==========================================================================
   ESP LP motion layer (1.4.94)
   Ornament, scroll-in and hover feedback only — no structure, copy or colour
   changes. Everything except the #design card fix is scoped to html.esp-fx,
   which assets/js/motion.js adds; without JS the page renders as before.
   Customizer-safe: no rules touch .esp-sort-* (speaker sort in preview).
   ========================================================================== */

:root{
  --fx-ease:cubic-bezier(.16,1,.3,1);
  --fx-ice:#cfe6f0;
  --fx-glow:rgba(8,116,159,.18);
}

/* ---------- A1. Editorial section numbers (01–08) ---------- */
html.esp-fx body{counter-reset:esp-sec}
html.esp-fx #why .intro,
html.esp-fx section:not(#cta-mid) .shead{counter-increment:esp-sec;position:relative}
html.esp-fx #why .intro::before,
html.esp-fx section:not(#cta-mid) .shead::before{
  content:counter(esp-sec,decimal-leading-zero) / "";
  position:absolute;right:0;top:-.28em;
  font-family:var(--mincho);font-size:clamp(56px,7vw,96px);font-weight:600;line-height:1;
  letter-spacing:.02em;color:transparent;
  -webkit-text-stroke:1.2px rgba(8,116,159,.36);
  background:linear-gradient(180deg,rgba(129,183,205,.16),rgba(129,183,205,0) 75%);-webkit-background-clip:text;background-clip:text;
  pointer-events:none;user-select:none;
  transition:opacity 1.2s var(--fx-ease),translate 1.2s var(--fx-ease);
}
html.esp-fx #why .intro{position:relative}
html.esp-fx :is(#why .intro,section .shead):not(.is-fx-in)::before{opacity:0;translate:0 18px}
@media(max-width:640px){
  html.esp-fx #why .intro::before,
  html.esp-fx section:not(#cta-mid) .shead::before{font-size:48px;top:-.1em}
}

/* ---------- A2. Heading underline draws in ---------- */
html.esp-fx .shead h2::after{transform-origin:left;transition:transform 1.1s var(--fx-ease) .15s}
html.esp-fx .shead:not(.is-fx-in) h2::after{transform:scaleX(0)}
/* hairline glint travelling along the heading rule */
html.esp-fx .shead{
  background-image:linear-gradient(90deg,transparent,rgba(8,116,159,.55),transparent);
  background-repeat:no-repeat;background-size:22% 1px;background-position:-30% 100%;
}
html.esp-fx .shead.is-fx-in{animation:fx-rule-glint 2.4s var(--fx-ease) .5s 1 both}
@keyframes fx-rule-glint{from{background-position:-30% 100%}to{background-position:130% 100%}}

/* ---------- A3. Cards: lift + accent edge + icon response ---------- */
html.esp-fx section .card:not(.spk-card){
  transition:translate .6s var(--fx-ease),box-shadow .6s var(--fx-ease),border-color .4s;
}
html.esp-fx section .card:not(.spk-card):hover{
  translate:0 -4px;
  box-shadow:0 22px 50px rgba(16,53,78,.12),inset 0 2px 0 var(--esp-blue);
  border-color:#c3d8e3;
}
html.esp-fx .card :is(.card-icon,.head-mark,.step-symbol,.step-icon) svg,
html.esp-fx .card .step-symbol{transition:rotate .7s var(--fx-ease),scale .7s var(--fx-ease),color .3s}
html.esp-fx .card:hover :is(.card-icon,.head-mark) svg{rotate:-8deg;scale:1.08}
html.esp-fx .card:hover .step-symbol{scale:1.08;color:var(--esp-blue)}

/* ---------- A3b. Design section: give the four blocks real inner padding ----------
   Live bug fix: these blocks had 0 side padding, so their text sat flush on
   the edge of the visible block. Make them proper cards with inset content;
   keep the top rule, which fills in blue on hover. */
#design .four .card{
  padding:28px 30px 26px;
  background:
    linear-gradient(var(--esp-blue),var(--esp-blue)) no-repeat 0 0 / 0 2px,
    rgba(255,255,255,.78);
  background-origin:border-box;
  border:1px solid #dde9ef;border-top:1px solid #9bbfce;border-radius:4px;
  box-shadow:0 8px 24px rgba(24,62,97,.05);
  transition:background-size .7s var(--fx-ease),translate .6s var(--fx-ease),box-shadow .6s var(--fx-ease);
}
#design .four .card:hover{
  background-size:100% 2px,auto;
  box-shadow:0 18px 44px rgba(16,53,78,.1);
}
@media(max-width:640px){#design .four .card{padding:24px 20px 22px}}

/* ---------- A4. "Why" closing statement: accent bar grows ---------- */
html.esp-fx #why .closing{position:relative;overflow:hidden}
html.esp-fx #why .closing::after{
  content:"";position:absolute;left:-3px;top:0;width:3px;height:100%;
  background:linear-gradient(180deg,var(--esp-blue),var(--esp-blue-l));
  transform-origin:top;transition:transform 1.3s var(--fx-ease) .2s;
}
html.esp-fx #why .closing:not(.is-fx-in)::after{transform:scaleY(0)}

/* ---------- A5. Design diagram: arrows breathe, numbers ring ---------- */
html.esp-fx .design-diagram__arrow span{display:inline-block}
html.esp-fx .design-diagram.is-fx-in .design-diagram__arrow span{animation:fx-nudge 2.6s ease-in-out infinite}
html.esp-fx .design-diagram.is-fx-in .design-diagram__arrow:nth-of-type(4) span{animation-delay:.35s}
@keyframes fx-nudge{0%,100%{translate:0 0;opacity:.55}50%{translate:5px 0;opacity:1}}
@media(max-width:820px){@keyframes fx-nudge{0%,100%{translate:0 0;opacity:.55}50%{translate:5px 0;opacity:1}}}
html.esp-fx .design-diagram__step{transition:translate .6s var(--fx-ease),box-shadow .6s var(--fx-ease)}
html.esp-fx .design-diagram__step:hover{translate:0 -4px;box-shadow:0 18px 40px rgba(16,53,78,.1)}
html.esp-fx .design-diagram__n{position:relative}
html.esp-fx .design-diagram.is-fx-in .design-diagram__n::after{
  content:"";position:absolute;inset:-5px;border-radius:50%;
  border:1px solid var(--esp-blue);opacity:0;
  animation:fx-ring 1.6s var(--fx-ease) both;
}
html.esp-fx .design-diagram.is-fx-in .design-diagram__step:nth-child(3) .design-diagram__n::after{animation-delay:.35s}
html.esp-fx .design-diagram.is-fx-in .design-diagram__step:nth-child(5) .design-diagram__n::after{animation-delay:.7s}
@keyframes fx-ring{0%{opacity:.9;scale:.7}100%{opacity:0;scale:1.6}}

/* ---------- A6. Session timeline: line draws, dots land in order ---------- */
@media(min-width:821px){
  html.esp-fx .flow-timeline__line{transform-origin:left;transition:transform .9s var(--fx-ease)}
  html.esp-fx .flow-timeline:not(.is-fx-in) .flow-timeline__line{transform:scaleX(0)}
  html.esp-fx .flow-timeline__line:nth-of-type(2){transition-delay:.25s}
  html.esp-fx .flow-timeline__line:nth-of-type(4){transition-delay:.65s}
  html.esp-fx .flow-timeline__line:nth-of-type(6){transition-delay:1.05s}
}
html.esp-fx .flow-timeline__dot{transition:scale .6s var(--fx-ease),box-shadow .6s}
html.esp-fx .flow-timeline:not(.is-fx-in) .flow-timeline__dot{scale:0}
html.esp-fx .flow-timeline__item:nth-of-type(3) .flow-timeline__dot{transition-delay:.45s}
html.esp-fx .flow-timeline__item:nth-of-type(5) .flow-timeline__dot{transition-delay:.85s}
html.esp-fx .flow-timeline__item:nth-of-type(7) .flow-timeline__dot{transition-delay:1.25s}

/* ---------- A7. Curriculum table: row focus + band tint ---------- */
html.esp-fx table.curric tbody td{transition:background-color .35s,color .35s}
html.esp-fx table.curric tbody tr:hover td:not(.band){background:#eef6fa}
html.esp-fx table.curric tbody tr:hover td.theme{color:var(--esp-navy)}
html.esp-fx table.curric td.theme{position:relative}
html.esp-fx table.curric td.theme::before{
  content:"";position:absolute;left:0;top:22%;bottom:22%;width:3px;
  background:var(--esp-blue);transform:scaleY(0);transition:transform .45s var(--fx-ease);
}
html.esp-fx table.curric tbody tr:hover td.theme::before{transform:scaleY(1)}
html.esp-fx table.curric td.band{background-image:linear-gradient(180deg,rgba(8,116,159,.05),rgba(8,116,159,0))}
html.esp-fx .curric-legend li{transition:translate .4s var(--fx-ease),color .3s}
html.esp-fx .curric-legend li:hover{translate:0 -2px;color:var(--esp-blue)}

/* ---------- A8. Speakers: gradient frame on hover ---------- */
html.esp-fx .spk-card{transition:border-color .4s,box-shadow .6s var(--fx-ease),translate .6s var(--fx-ease)}
html.esp-fx .spk-card:hover{translate:0 -4px;box-shadow:0 22px 50px rgba(16,53,78,.12)}
html.esp-fx .spk-photo{position:relative}
html.esp-fx .spk-photo::before{
  content:"";position:absolute;left:0;right:0;bottom:0;height:3px;z-index:2;
  background:linear-gradient(90deg,var(--esp-navy),var(--esp-blue),var(--esp-blue-l));
  transform:scaleX(0);transform-origin:left;transition:transform .7s var(--fx-ease);
}
html.esp-fx .spk-card:hover .spk-photo::before{transform:scaleX(1)}

/* ---------- A9. Mid-page CTA: quiet travelling light on the rules ---------- */
html.esp-fx .cta-band{overflow:hidden}
html.esp-fx .cta-band::before,
html.esp-fx .cta-band::after{
  content:"";position:absolute;left:0;right:0;height:1px;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(8,116,159,.7),transparent) no-repeat;
  background-size:30% 100%;animation:fx-sweep 6s ease-in-out infinite;
}
html.esp-fx .cta-band::before{top:-1px}
html.esp-fx .cta-band::after{bottom:-1px;animation-delay:3s}
@keyframes fx-sweep{0%{background-position:-40% 0}60%,100%{background-position:140% 0}}

/* ---------- A10. Buttons: arrow travels on hover ---------- */
html.esp-fx .btn-primary::after{transition:translate .55s var(--fx-ease)}
html.esp-fx .btn-primary:hover::after{translate:3px -3px}

/* ---------- A11. Price box & apply steps ---------- */
html.esp-fx #outline .price{position:relative;transition:box-shadow .6s var(--fx-ease)}
html.esp-fx #outline .price:hover{box-shadow:0 24px 56px rgba(16,53,78,.13)}
html.esp-fx #outline .ol-row{transition:background-color .35s}
html.esp-fx #outline .ol-row:hover{background:linear-gradient(90deg,rgba(8,116,159,.05),transparent 70%)}

/* ---------- A12. Reading progress bar: soft glow ---------- */
html.esp-fx .sitebar[data-esp-scroll]::after{box-shadow:0 0 10px var(--fx-glow)}


/* ==========================================================================
   Richer layer (adopted draft B, minus title glint / portrait ring / magnetic buttons)
   ========================================================================== */

/* B1. Hero: drifting light orbs (JS inserts .esp-fx-orbs) */
html.esp-fx .hero--impact{isolation:isolate}
html.esp-fx .esp-fx-orbs{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
html.esp-fx .hero--impact > .wrap{position:relative;z-index:1}
html.esp-fx .esp-fx-orbs i{
  position:absolute;border-radius:50%;filter:blur(1px);
  background:radial-gradient(circle at 38% 34%,rgba(255,255,255,.9) 0 8%,rgba(129,183,205,.34) 32%,rgba(8,116,159,.10) 58%,transparent 70%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.35);
  animation:fx-float var(--d,16s) ease-in-out var(--delay,0s) infinite alternate;opacity:.9;
}
@keyframes fx-float{
  0%{translate:0 0;scale:1}
  50%{translate:var(--x1,40px) var(--y1,-30px);scale:1.12}
  100%{translate:var(--x2,-20px) var(--y2,20px);scale:.92}
}
/* B3. Cards: cursor spotlight */
html.esp-fx section .card:not(.spk-card):not(#apply .steps .card){
  background-image:radial-gradient(420px circle at var(--mx,-999px) var(--my,-999px),rgba(129,183,205,.16),transparent 42%);
}

/* B4. Speakers: 3D tilt + glare (JS sets --rx/--ry/--gx/--gy) */
html.esp-fx .spk .spk-card,
html.esp-fx .spk .spk-card:hover{
  transform:perspective(1000px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));
  transition:transform .6s var(--fx-ease),translate .6s var(--fx-ease),box-shadow .6s var(--fx-ease),border-color .4s;
}
html.esp-fx .spk .spk-card.is-fx-tilting{transition:transform .12s linear,translate .6s var(--fx-ease),box-shadow .6s var(--fx-ease),border-color .4s}
html.esp-fx .spk-photo::after{
  background:radial-gradient(circle at var(--gx,50%) var(--gy,0%),rgba(255,255,255,.55),transparent 55%)!important;
  opacity:0!important;transition:opacity .4s!important;mix-blend-mode:soft-light;
}
html.esp-fx .spk-card:hover .spk-photo::after{opacity:1!important}

/* B5. Section ambience: soft aurora behind the tinted sections */
html.esp-fx section.alt,html.esp-fx #design{position:relative;overflow:hidden;isolation:isolate}
html.esp-fx section.alt::before,html.esp-fx #design::before{
  content:"";position:absolute;z-index:-1;pointer-events:none;
  width:720px;height:720px;right:-220px;top:-260px;border-radius:50%;
  background:radial-gradient(circle,rgba(129,183,205,.28),rgba(129,183,205,0) 65%);
  animation:fx-aurora 18s ease-in-out infinite alternate;
}
html.esp-fx section.alt::after,html.esp-fx #design::after{
  content:"";position:absolute;z-index:-1;pointer-events:none;
  width:560px;height:560px;left:-200px;bottom:-240px;border-radius:50%;
  background:radial-gradient(circle,rgba(8,116,159,.12),rgba(8,116,159,0) 65%);
  animation:fx-aurora 22s ease-in-out -6s infinite alternate-reverse;
}
@keyframes fx-aurora{0%{translate:0 0;scale:1}100%{translate:-90px 70px;scale:1.18}}

/* B6. Mid CTA: gentle drifting mesh inside the band */
html.esp-fx .cta-band{
  background:
    radial-gradient(600px 220px at var(--cx,20%) 30%,rgba(129,183,205,.25),transparent 70%),
    radial-gradient(520px 200px at calc(100% - var(--cx,20%)) 80%,rgba(8,116,159,.12),transparent 70%),
    rgba(255,255,255,.9);
  animation:fx-mesh 14s ease-in-out infinite alternate;
}
@property --cx{syntax:"<percentage>";inherits:false;initial-value:20%}
@keyframes fx-mesh{to{--cx:70%}}

/* B8. Price count-up target keeps width stable */
html.esp-fx #outline .price .amt{font-variant-numeric:tabular-nums}

/* B9. Apply steps: sequential arrival + badge pulse */
html.esp-fx #apply .steps .card .n{position:relative}
html.esp-fx #apply .steps.is-fx-in .card .n::after{
  content:"";position:absolute;inset:-4px;border:1px solid var(--esp-blue);
  opacity:0;animation:fx-ring 1.4s var(--fx-ease) both;
}
html.esp-fx #apply .steps.is-fx-in .card:nth-child(2) .n::after{animation-delay:.25s}
html.esp-fx #apply .steps.is-fx-in .card:nth-child(3) .n::after{animation-delay:.5s}
html.esp-fx #apply .steps.is-fx-in .card:nth-child(4) .n::after{animation-delay:.75s}


/* ==========================================================================
   Reduced motion: keep hover colour feedback, drop movement
   ========================================================================== */
@media (prefers-reduced-motion: reduce){
  /* Only this layer's own animations; the theme's reduced-motion rules stay in charge of the rest. */
  html.esp-fx .shead.is-fx-in,
  html.esp-fx .design-diagram__arrow span,
  html.esp-fx .design-diagram__n::after,
  html.esp-fx #apply .steps .card .n::after,
  html.esp-fx .cta-band,html.esp-fx .cta-band::before,html.esp-fx .cta-band::after,
  html.esp-fx section.alt::before,html.esp-fx section.alt::after,
  html.esp-fx #design::before,html.esp-fx #design::after{animation:none!important}
  html.esp-fx .card,html.esp-fx .spk-card,html.esp-fx .design-diagram__step{translate:none!important;rotate:none!important;transform:none}
  html.esp-fx :is(#why .intro,section .shead)::before{opacity:1;translate:none}
  html.esp-fx .shead h2::after,
  html.esp-fx #why .closing::after,
  html.esp-fx .flow-timeline__line{transform:none!important}
  html.esp-fx .flow-timeline__dot{scale:1!important}
  html.esp-fx .esp-fx-orbs{display:none}
}