/* Homepage motion layer.
   The logo sits where the ring used to rise, inside a ring that keeps turning.
   Everything here is decoration: with motion off, or without JavaScript, the
   page shows its final, still state. */

/* ---- hero: the logo rises where the ring used to be ----
   Its centre sits exactly on the top edge of the course preview, so the lower
   half is hidden behind the preview and the upper half carries the motion. */
.sun-stage{--logo:clamp(300px,44vw,640px);--logo-top:26px;height:calc(var(--logo-top) + var(--logo) / 2);margin-top:22px}
.sun-glow{top:calc(var(--logo-top) + var(--logo) * .12);height:calc(var(--logo) * .55);width:min(calc(var(--logo) * 1.5),100vw)}
/* The lower half is cut at the preview's edge, so it never shows, even while the preview fades in. */
.sun-emblem{position:absolute;left:50%;top:var(--logo-top);width:var(--logo);height:var(--logo);margin-left:calc(var(--logo) / -2);clip-path:polygon(-40% -40%,140% -40%,140% 50%,-40% 50%);pointer-events:auto;cursor:pointer;-webkit-tap-highlight-color:transparent;transform:perspective(1200px) rotateX(var(--emblem-rx,0deg)) rotateY(var(--emblem-ry,0deg));transition:transform .35s ease-out}
.sun-emblem-halo{position:absolute;inset:4% 8% 30%;border-radius:50%;background:radial-gradient(closest-side,rgba(46,170,130,.30),rgba(246,111,20,.13) 55%,transparent 78%);filter:blur(24px)}
.sun-emblem-mark,.sun-emblem-float{position:absolute;inset:0}
.sun-emblem-logo{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 0 34px rgba(46,170,130,.32)) drop-shadow(0 -4px 26px rgba(246,111,20,.16))}
/* A band of light crosses the logo, inside its own outline. */
.sun-emblem-shine{position:absolute;inset:0;-webkit-mask:url(assets/eight-pillars-brand-2026.png) center/contain no-repeat;mask:url(assets/eight-pillars-brand-2026.png) center/contain no-repeat;background:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.22) 47%,rgba(255,214,176,.30) 50%,rgba(255,255,255,.14) 53%,transparent 62%) no-repeat;background-size:280% 100%;background-position:120% 0;mix-blend-mode:screen;opacity:.9}
.sun-preview{position:relative;z-index:2;margin-top:0}
@keyframes ep-float{0%,100%{translate:0 0}50%{translate:0 -9px}}
@keyframes ep-breathe{0%,100%{opacity:.8;scale:1}50%{opacity:1;scale:1.06}}
@keyframes ep-shine{0%,55%{background-position:120% 0}85%,100%{background-position:-20% 0}}
.sun-emblem-float{animation:ep-float 8s ease-in-out infinite}
.sun-emblem-halo{animation:ep-breathe 8s ease-in-out infinite}
.sun-emblem-shine{animation:ep-shine 7s ease-in-out 2.4s infinite}
@media(max-width:760px){
 .sun-stage{--logo:clamp(260px,84vw,380px);--logo-top:14px;margin-top:14px}
}

/* ---- sections arrive as they are reached ---- */
.ep-reveal{opacity:0;translate:0 28px;transition:opacity .8s cubic-bezier(.16,1,.3,1),translate .8s cubic-bezier(.16,1,.3,1);transition-delay:var(--ep-delay,0ms)}
.ep-reveal.ep-in{opacity:1;translate:0 0}

/* ---- a warm light follows the pointer across cards and across the page ---- */
.ep-spot-host{position:relative}
.ep-spot{position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .25s;background:radial-gradient(260px circle at var(--ep-mx,50%) var(--ep-my,50%),rgba(246,111,20,.17),transparent 70%);z-index:0}
.ep-spot-parent:hover>.ep-spot{opacity:1}
.ep-cursor-glow{position:fixed;left:0;top:0;width:420px;height:420px;margin:-210px 0 0 -210px;border-radius:50%;pointer-events:none;z-index:4;opacity:0;mix-blend-mode:screen;background:radial-gradient(closest-side,rgba(246,111,20,.13),transparent);transition:opacity .4s;will-change:transform}
.ep-cursor-glow.ep-on{opacity:1}
.sun-product-card,.sun-plan{transition:transform .25s cubic-bezier(.2,.7,.2,1),border-color .2s,box-shadow .25s}
@media(hover:hover){.sun-product-card:hover{transform:translateY(-4px)}}

/* ---- motion off: the still page ---- */
@media(prefers-reduced-motion:reduce){
 .sun-emblem,.sun-emblem *{animation:none!important;transition:none!important}.sun-emblem-shine{display:none}
 .ep-reveal{opacity:1!important;translate:none!important;transition:none!important}
 .ep-cursor-glow,.ep-spot{display:none!important}
 .sun-product-card:hover{transform:none!important}
}
.access-motion .sun-emblem,.access-motion .sun-emblem *{animation:none!important;transition:none!important}.access-motion .sun-emblem-shine{display:none}
.access-motion .ep-reveal{opacity:1!important;translate:none!important;transition:none!important}
.access-motion .ep-cursor-glow,.access-motion .ep-spot{display:none!important}
.access-motion .sun-product-card:hover{transform:none!important}
.sun-founder-actions .ep-arrow{margin-inline-start:0}