/* Showcase layer: cinematic motion, editorial set pieces, and interaction polish.
   Loads after palette.css. Purely additive — all motion is gated behind
   .showcase-motion (set by showcase.js only when reduced motion is not requested),
   so the site renders complete and static without JavaScript or with reduced motion. */

/* ---------- Foundations ---------- */
::selection{background:var(--paarl);color:var(--woodsmoke)}
:focus-visible{outline:2px solid var(--paarl);outline-offset:3px}

/* ---------- Hero entrance ---------- */
.hero-line{display:block;overflow:hidden;padding:.1em .06em .14em 0;margin:-.1em -.06em -.14em 0}
.hero-line-inner{display:block}
.showcase-motion .hero-line-inner{transform:translateY(135%);animation:showcase-rise .95s cubic-bezier(.16,1,.3,1) forwards;animation-delay:var(--line-delay,0ms)}
.showcase-motion .hero-copy .eyebrow{opacity:0;animation:showcase-fade .7s ease forwards .15s}
.showcase-motion .hero-summary,.showcase-motion .hero-actions{opacity:0;animation:showcase-lift .85s cubic-bezier(.16,1,.3,1) forwards}
.showcase-motion .hero-summary{animation-delay:.62s}
.showcase-motion .hero-actions{animation-delay:.74s}
.showcase-motion .hero-art{animation:showcase-art 1.1s cubic-bezier(.16,1,.3,1) .3s backwards}
@keyframes showcase-rise{to{transform:translateY(0)}}
@keyframes showcase-fade{to{opacity:1}}
@keyframes showcase-lift{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:translateY(0)}}
/* Keyframes carry the parallax variable so the entrance hands the transform
   back to styles.css cleanly once it finishes (no fill-forwards lock). */
@keyframes showcase-art{from{opacity:0;transform:translate3d(0,var(--hero-art-y,0),0) scale(.965)}to{opacity:1;transform:translate3d(0,var(--hero-art-y,0),0) scale(1)}}

/* Orbiting markers make the target rings feel alive. */
.target-ring:before{content:"";position:absolute;top:-3px;left:calc(50% - 3px);width:6px;height:6px;border-radius:50%;background:var(--paarl);box-shadow:0 0 10px rgba(var(--paarl-rgb),.8)}
.showcase-motion .ring-one{animation:showcase-orbit 52s linear infinite}
.showcase-motion .ring-two{animation:showcase-orbit 84s linear infinite reverse}
@keyframes showcase-orbit{to{transform:rotate(360deg)}}

/* ---------- Creed ticker ---------- */
/* margin-bottom because the next section's "03 / FEATURED" corner label is
   absolutely positioned at top:1px, so without it the label sat flush against
   the ticker's bottom border. */
.creed-ticker{position:relative;z-index:1;overflow:hidden;padding:22px 0;margin-bottom:44px;border-top:1px solid rgba(var(--maize-rgb),.16);border-bottom:1px solid rgba(var(--maize-rgb),.16);background:rgba(var(--woodsmoke-rgb),.45)}
@media(max-width:700px){.creed-ticker{margin-bottom:26px}}
.creed-ticker-track{display:flex;width:max-content;will-change:transform}
.creed-ticker-group{display:flex;align-items:center;gap:34px;padding-right:34px;flex:none}
.showcase-motion .creed-ticker-track{animation:showcase-ticker var(--ticker-duration,36s) linear infinite}
.showcase-motion .creed-ticker--reverse .creed-ticker-track{animation-direction:reverse}
.creed-ticker:hover .creed-ticker-track{animation-play-state:paused}
.creed-ticker span{font:800 30px/1 var(--display);letter-spacing:.09em;text-transform:uppercase;color:transparent;-webkit-text-stroke:1px rgba(var(--maize-rgb),.62);white-space:nowrap}
.creed-ticker span.is-solid{color:var(--maize);-webkit-text-stroke:0}
.creed-ticker b{color:var(--paarl);font-size:15px;line-height:1}
/* Every separator in the ticker is a lightning bolt. Drawn as an inline SVG
   rather than a character so it renders identically everywhere -- ⚡ falls back
   to a colour emoji in most browsers, which would break the gold monochrome.
   Filled rather than stroked like .ui-icon, since an outlined bolt reads as
   noise at this size. */
.creed-ticker b .creed-bolt{display:block;width:17px;height:17px;fill:currentColor;stroke:none}
@keyframes showcase-ticker{to{transform:translateX(-50%)}}

/* ---------- Creed (scripture) section ---------- */
.creed{position:relative;padding:158px 0 150px;text-align:center}
.creed .eyebrow{justify-content:center}
.creed blockquote{margin:0}
.creed blockquote p{margin:0;font:800 clamp(46px,6.4vw,100px)/.86 var(--display);letter-spacing:-.025em;text-transform:uppercase;text-wrap:balance}
.creed blockquote em{font-style:normal;color:var(--paarl);text-shadow:5px 5px 0 rgba(var(--maize-rgb),.08)}
.creed cite{display:inline-flex;align-items:center;gap:16px;margin-top:40px;font:700 12px/1 var(--body);font-style:normal;letter-spacing:.26em;color:rgba(var(--maize-rgb),.62)}
.creed cite:before,.creed cite:after{content:"";height:1px;width:48px;background:rgba(var(--paarl-rgb),.55)}
.creed:before{content:"";position:absolute;left:50%;top:64px;transform:translateX(-50%);width:1px;height:52px;background:linear-gradient(180deg,transparent,var(--paarl))}

/* ---------- Scroll reveals ---------- */
.will-reveal{opacity:0;transform:translateY(18px);transition:opacity .6s cubic-bezier(.16,1,.3,1),transform .6s cubic-bezier(.16,1,.3,1);transition-delay:var(--stagger,0ms);will-change:opacity,transform}
.will-reveal.is-in{will-change:auto}
.will-reveal.is-in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.will-reveal{opacity:1;transform:none;transition:none}}

/* ---------- Interaction polish ---------- */
.video-card-media{overflow:hidden}
.video-card-media img{transition:transform .7s cubic-bezier(.16,1,.3,1)}
.video-card:hover .video-card-media img{transform:scale(1.05)}
.topic-pathway{transition:transform .45s cubic-bezier(.16,1,.3,1),border-color .45s ease,background-color .45s ease}
a.topic-pathway:hover{transform:translateY(-5px)}
.button,.nav .nav-cta{transition:transform .35s cubic-bezier(.16,1,.3,1),box-shadow .35s cubic-bezier(.16,1,.3,1),background-color .35s ease,color .35s ease}
.button-primary:hover,.nav .nav-cta:hover{transform:translate(-2px,-2px);box-shadow:8px 8px 0 rgba(var(--paarl-rgb),.4)}
.button .ui-icon{transition:transform .35s ease}
.button:hover .ui-icon{transform:translateX(4px)}
.pillar-grid article{transition:background-color .4s ease,color .4s ease}
.signup button,.contact-form .button{cursor:pointer}

/* ---------- Small screens ---------- */
@media(max-width:700px){
  .creed{padding:96px 0 90px}
  .creed-ticker span{font-size:21px}
  .creed-ticker-group{gap:22px;padding-right:22px}
  .creed cite:before,.creed cite:after{width:28px}
}