/* GC Spark layer (2026-10-31)
   Decorative polish for parent-facing pages only (home, academy-info).
   Uses the brand tokens from gc.css. Not loaded in lessons, quizzes or the learner app.
   All motion is off for people who prefer reduced motion. */

/* ---------- texture + soft glow behind the Academy hero ---------- */
.ai-hero{
  position:relative;overflow:hidden;
  background:
    radial-gradient(60% 70% at 88% 18%,rgba(255,111,181,.20),transparent 70%),
    radial-gradient(50% 60% at 4% 92%,rgba(201,166,255,.26),transparent 70%),
    radial-gradient(rgba(107,63,160,.13) 1.2px,transparent 1.5px) 0 0/22px 22px,
    var(--paper);
}
.ai-hero .ai-wrap{position:relative;z-index:1}

/* ---------- sparkle stars ---------- */
.spark-star{position:absolute;width:26px;height:26px;pointer-events:none;z-index:2;color:var(--pink)}
.spark-star svg{display:block;width:100%;height:100%;fill:currentColor}
.ai-hero > .spark-star.s1{top:56px;left:46%;color:var(--lav);width:22px;height:22px}
.ai-hero > .spark-star.s2{bottom:44px;right:7%;width:30px;height:30px}
.hero-photo .spark-star.s1{top:-16px;left:-14px;color:var(--lav)}
.hero-photo .spark-star.s2{bottom:28%;right:-20px;width:20px;height:20px}
@media (prefers-reduced-motion:no-preference){
  .spark-star{animation:gcTwinkle 3.6s ease-in-out infinite}
  .spark-star.s2{animation-delay:1.4s}
}
@keyframes gcTwinkle{0%,100%{transform:scale(1) rotate(0);opacity:1}50%{transform:scale(.72) rotate(14deg);opacity:.7}}

/* ---------- rotating circular sticker ---------- */
.spark-sticker{position:absolute;top:-38px;right:-26px;width:136px;height:136px;z-index:3;pointer-events:none;filter:drop-shadow(0 8px 12px rgba(107,63,160,.28))}
.spark-sticker img,.spark-sticker svg{position:absolute;inset:0;display:block;width:100%;height:100%}
@media (prefers-reduced-motion:no-preference){
  .spark-sticker .spark-ring{animation:gcSpin 26s linear infinite}
}
@keyframes gcSpin{to{transform:rotate(360deg)}}

/* ---------- Academy screenshot as a tilted photo card ---------- */
.ai-hero .ai-shot{
  position:relative;overflow:visible;transform:rotate(-1.6deg);
  background:#fff;border:0;border-radius:20px;padding:10px 10px 0;
  box-shadow:0 24px 46px rgba(107,63,160,.22),0 2px 0 rgba(29,29,29,.05);
}
.ai-hero .ai-shot img{border-radius:12px}
.ai-hero .ai-shot figcaption{
  display:flex;justify-content:space-between;gap:10px;align-items:center;
  padding:12px 6px 14px;
  font:600 11px/1.3 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  letter-spacing:.1em;text-transform:uppercase;color:var(--purple);
}
.ai-hero .ai-shot figcaption span:last-child{color:var(--pink-d)}

/* ---------- numbered "getting started" tiles with a dashed path ---------- */
.ai-sec .ai-steps li{position:relative}
.ai-sec .ai-steps li::before{
  width:48px;height:48px;border-radius:14px;transform:rotate(-6deg);
  font:400 24px/1 'Graduate',Georgia,serif;margin-bottom:14px;
  box-shadow:0 6px 12px rgba(107,63,160,.18);
}
.ai-sec .ai-steps li:nth-child(1)::before{background:var(--pink);color:var(--ink)}
.ai-sec .ai-steps li:nth-child(2)::before{background:var(--lav);color:var(--ink)}
.ai-sec .ai-steps li:nth-child(3)::before{background:var(--purple);color:#fff}
@media (min-width:821px){
  .ai-sec .ai-steps li:not(:last-child)::after{
    content:"";position:absolute;top:44px;left:100%;width:18px;
    border-top:2px dashed var(--lav);
  }
}

/* ---------- editorial counters + accent edge on Academy cards ---------- */
.ai-sec .ai-grid{counter-reset:gcc}
.ai-sec .ai-card{counter-increment:gcc;position:relative;--edge:var(--pink);
  box-shadow:inset 0 5px 0 var(--edge),0 10px 26px rgba(107,63,160,.08);padding-top:26px}
.ai-sec .ai-card:nth-child(3n+2){--edge:var(--lav)}
.ai-sec .ai-card:nth-child(3n){--edge:var(--purple)}
.ai-sec .ai-card::before{
  content:"0" counter(gcc);display:block;margin-bottom:8px;
  font:600 11px/1 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  letter-spacing:.14em;color:var(--pink-d);
}
@media (hover:hover) and (prefers-reduced-motion:no-preference){
  .ai-sec .ai-card{transition:transform .2s ease,box-shadow .2s ease}
  .ai-sec .ai-card:hover{transform:translateY(-3px) rotate(-.4deg);
    box-shadow:inset 0 5px 0 var(--edge),0 16px 30px rgba(107,63,160,.14)}
}

/* ---------- small screens ---------- */
@media (max-width:820px){
  .ai-hero .ai-shot{transform:rotate(-1deg)}
  .spark-sticker{width:104px;height:104px;top:-28px;right:-8px}
  .ai-hero > .spark-star.s1{left:auto;right:12%;top:30px}
  .hero-photo .spark-star.s1{left:-6px}
  .hero-photo .spark-star.s2{right:-8px}
}
@media print{.spark-star,.spark-sticker{display:none}}


/* ---------- Display type: Barlow Condensed (open-license, self-hosted) ----------
   Used for page and section headings and small card titles on the home page and the
   Academy info page. The Giselle Chanel wordmark, logos and nav are unchanged.
   Body copy stays Inter for easy reading. */
@font-face{font-family:'Barlow Condensed';font-style:italic;font-weight:900;font-display:swap;src:url(/assets/fonts/barlow-condensed-latin-900-italic.woff2) format('woff2')}
@font-face{font-family:'Barlow Condensed';font-style:normal;font-weight:800;font-display:swap;src:url(/assets/fonts/barlow-condensed-latin-800-normal.woff2) format('woff2')}
@font-face{font-family:'Barlow Condensed';font-style:normal;font-weight:700;font-display:swap;src:url(/assets/fonts/barlow-condensed-latin-700-normal.woff2) format('woff2')}

body :is(.videos,.collection,.about,.club-promo,.mem-promo,.why,.partner,.ai-sec,.ai-final,.mem-card,.col-copy) h2,
body .ai-hero h1{
  font-family:'Barlow Condensed','Arial Narrow',Impact,sans-serif;
  font-weight:900;font-style:italic;text-transform:uppercase;
  letter-spacing:.005em;line-height:.96;
  font-size:clamp(38px,5vw,62px);
}
body .ai-hero h1{font-size:clamp(46px,6.4vw,82px);line-height:.92}
body .ai-hero h1 span{display:block;color:var(--pink-d);text-shadow:3px 3px 0 var(--baby)}
body .ai-final h2{font-size:clamp(40px,5.4vw,66px)}
body .why h2 em{font-style:italic}

body .ai-card h3,
body .ai-steps b{
  font-family:'Barlow Condensed','Arial Narrow',Impact,sans-serif;
  font-weight:800;text-transform:uppercase;letter-spacing:.015em;
  font-size:24px;line-height:1.05;margin-bottom:8px;
}
body .ai-steps b{color:var(--purple)}

.spark-ring text{
  font-family:'Barlow Condensed','Arial Narrow',Impact,sans-serif;
  font-weight:900;font-style:italic;font-size:118px;
}


/* ---------- Stardust glow behind select titles (class="dust") ----------
   Soft pink / lavender / turquoise haze (same idea as Kempbell's turning rainbow halo),
   plus a glitter-and-sparkle layer. Sits behind the text; text colors are unchanged.
   Motion is off for reduced-motion users. */
.dust{position:relative;isolation:isolate;width:fit-content;max-width:100%}
.ai-final h2.dust{margin-left:auto;margin-right:auto}
.ai-sec,.ai-final,.videos,.mem-promo{overflow-x:clip}
.dust::before{
  content:"";position:absolute;inset:-30% -10%;z-index:-1;pointer-events:none;border-radius:50%;
  background:conic-gradient(from var(--gc-a,0deg),#FF6FB5,#C9A6FF,#5EE0D2,#FFB6D9,#C9A6FF,#FF6FB5);
  filter:blur(30px);opacity:.5;
}
.dust::after{
  content:"";position:absolute;inset:-24% -8%;z-index:-1;pointer-events:none;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23FF6FB5' d='M12 0c.6 7 5 11.4 12 12-7 .6-11.4 5-12 12-.6-7-5-11.4-12-12 7-.6 11.4-5 12-12z'/%3E%3C/svg%3E"),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%235EE0D2' d='M12 0c.6 7 5 11.4 12 12-7 .6-11.4 5-12 12-.6-7-5-11.4-12-12 7-.6 11.4-5 12-12z'/%3E%3C/svg%3E"),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23C9A6FF' d='M12 0c.6 7 5 11.4 12 12-7 .6-11.4 5-12 12-.6-7-5-11.4-12-12 7-.6 11.4-5 12-12z'/%3E%3C/svg%3E"),
    radial-gradient(circle,#fff 0 1.7px,transparent 2.4px),
    radial-gradient(circle,rgba(255,111,181,.95) 0 1.5px,transparent 2.2px),
    radial-gradient(circle,rgba(94,224,210,.95) 0 1.5px,transparent 2.2px),
    radial-gradient(circle,rgba(201,166,255,1) 0 1.9px,transparent 2.6px);
  background-repeat:no-repeat,no-repeat,no-repeat,repeat,repeat,repeat,repeat;
  background-size:34px 34px,26px 26px,22px 22px,43px 37px,59px 51px,71px 63px,37px 47px;
  background-position:2% 10%,98% 78%,14% 100%,7px 11px,31px 5px,53px 37px,19px 41px;
  -webkit-mask-image:radial-gradient(closest-side,#000 62%,transparent 100%);
          mask-image:radial-gradient(closest-side,#000 62%,transparent 100%);
}
@media (prefers-reduced-motion:no-preference){
  .dust::before{animation:gcDustTurn 12s linear infinite}
  .dust::after{animation:gcGlitter 2.6s ease-in-out infinite,gcDrift 14s linear infinite}
}
@property --gc-a{syntax:"<angle>";initial-value:0deg;inherits:false}
@keyframes gcDustTurn{to{--gc-a:360deg}}
@keyframes gcGlitter{0%,100%{opacity:1}50%{opacity:.5}}
/* glitter floats upward; each layer moves exactly one tile so the loop is seamless */
@keyframes gcDrift{
  from{background-position:2% 10%,98% 78%,14% 100%,7px 11px,31px 5px,53px 37px,19px 41px}
  to{background-position:2% 4%,98% 84%,14% 94%,7px -26px,31px -46px,53px -26px,19px -6px}
}
body .ai-hero h1.dust::before{opacity:.4}
@media (max-width:820px){
  body .ai-hero h1.dust::before{inset:-14% -6%}
  body .ai-hero h1.dust::after{inset:-6% -4% -2%}
}
@media print{.dust::before,.dust::after{display:none}}