/* Grape Skills — interaction & motion layer
   Goal: every interactive state must be unmistakable at a glance.
   Colour changes live in the pages' style-hover attributes (support.js makes
   those !important); this file owns motion, depth, underlines and decoration.
   Everything is disabled under prefers-reduced-motion at the bottom. */

:root{
  --gs-berry:#8A014F;
  --gs-berry-bright:#A80260;
  --gs-berry-deep:#520130;
  --gs-plum:#6E1741;
  --gs-rose:#DEC7D2;
  --gs-ease:cubic-bezier(.22,.61,.36,1);
  /* measure: 1ch = 1.32 rendered chars in Montserrat German text */
  --measure:52ch;        /* ~68 characters per line — prose default */
  --measure-narrow:42ch; /* ~55 CPL — decks, card bodies */
  --measure-fine:64ch;   /* ~85 CPL — fine print / disclaimers */
}

/* ============ 1. CARDS — lift, shadow, accent bar ============ */
main article,
main .gs-card{
  position:relative;
  transition:transform .26s var(--gs-ease),
             box-shadow .26s var(--gs-ease),
             border-color .2s ease;
}
/* accent bar that wipes across the top edge on hover */
main article::after,
main .gs-card::after{
  content:"";
  position:absolute; left:0; right:0; top:0; height:3px;
  background:linear-gradient(90deg,var(--gs-berry),var(--gs-berry-bright));
  transform:scaleX(0); transform-origin:left;
  transition:transform .34s var(--gs-ease);
  pointer-events:none; border-radius:3px 3px 0 0;
}
main article:hover::after,
main .gs-card:hover::after,
main article:focus-within::after,
main .gs-card:focus-within::after{ transform:scaleX(1); }

main article:hover, main .gs-card:hover,
main article:focus-within, main .gs-card:focus-within{
  transform:translateY(-7px);
  box-shadow:0 30px 56px -30px rgba(82,1,48,.55), 0 4px 12px -6px rgba(82,1,48,.28);
  border-color:var(--gs-berry) !important;
}

/* anchor cards (course teasers, article tiles) */
main a[style*="border-radius:6px"][style*="overflow:hidden"],
main a[style*="border-radius:8px"][style*="overflow:hidden"]{
  display:block;
  transition:transform .26s var(--gs-ease), box-shadow .26s var(--gs-ease);
}
main a[style*="border-radius:6px"][style*="overflow:hidden"]:hover,
main a[style*="border-radius:8px"][style*="overflow:hidden"]:hover{
  transform:translateY(-7px);
  box-shadow:0 30px 56px -30px rgba(82,1,48,.5);
}

/* ============ 2. IMAGES — zoom inside their frame ============ */
main article img, main .gs-card img,
main a[style*="overflow:hidden"] img{
  transition:transform .6s var(--gs-ease), filter .4s ease;
}
main article:hover img, main .gs-card:hover img,
main a[style*="overflow:hidden"]:hover img{
  transform:scale(1.07);
  filter:saturate(1.06);
}

/* ============ 3. BUTTONS — lift, shadow, real pressed state ============ */
main a[style*="border-radius:4px"][style*="padding:1"],
main button[type="submit"],
main a[style*="border-radius:4px"][style*="background:#8A014F"]{
  transition:background .2s ease, color .2s ease, border-color .2s ease,
             transform .18s var(--gs-ease), box-shadow .18s var(--gs-ease);
}
main a[style*="border-radius:4px"][style*="padding:1"]:hover,
main button[type="submit"]:hover{
  transform:translateY(-3px);
  box-shadow:0 16px 26px -14px rgba(82,1,48,.7);
}
main a[style*="border-radius:4px"][style*="padding:1"]:active,
main button[type="submit"]:active{
  transform:translateY(1px) scale(.985);
  box-shadow:0 4px 8px -6px rgba(82,1,48,.6);
}

/* ============ 4. LINKS — thick underline grows in ============ */
main p > a[href]:not([style*="background"]):not([style*="border:"]),
main li > a[href]:not([style*="background"]),
main a.gs-link{
  background-image:linear-gradient(var(--gs-berry-bright),var(--gs-berry-bright));
  background-size:0% 2px; background-repeat:no-repeat; background-position:0 100%;
  transition:background-size .3s var(--gs-ease), color .2s ease;
  text-decoration:none; padding-bottom:1px;
}
main p > a[href]:not([style*="background"]):not([style*="border:"]):hover,
main li > a[href]:not([style*="background"]):hover,
main a.gs-link:hover{ background-size:100% 2px; }

/* arrow links slide further */
.gs-ar{ display:inline-block; transition:transform .24s var(--gs-ease); }
a:hover .gs-ar, a:focus-visible .gs-ar{ transform:translateX(7px); }

/* ============ 5. ICONS ============ */
.gs-ico{ display:inline-flex; align-items:center; justify-content:center; flex:none; vertical-align:middle; }
.gs-ico svg{ display:block; }

.gs-ico-plate{
  width:46px; height:46px; border-radius:10px;
  background:rgba(138,1,79,.09); color:var(--gs-berry);
  display:inline-flex; align-items:center; justify-content:center;
  transition:background .28s ease, color .28s ease,
             transform .34s var(--gs-ease), box-shadow .28s ease;
}
main article:hover .gs-ico-plate,
main .gs-card:hover .gs-ico-plate{
  background:var(--gs-berry); color:#FAF6EF;
  transform:translateY(-2px) scale(1.08) rotate(-4deg);
  box-shadow:0 12px 20px -10px rgba(82,1,48,.6);
}
.gs-ico-plate--on-dark{ background:rgba(255,255,244,.14); color:var(--gs-rose); }
main article:hover .gs-ico-plate--on-dark,
main .gs-card:hover .gs-ico-plate--on-dark{ background:#FAF6EF; color:var(--gs-plum); }

/* ============ 6. NUMBERED STEP MARKERS ============ */
.gs-step{
  display:inline-flex; align-items:center; justify-content:center;
  width:36px; height:36px; border-radius:50%;
  border:1.5px solid rgba(138,1,79,.4); color:var(--gs-berry);
  font-size:13px; font-weight:700;
  transition:background .26s ease, color .26s ease, border-color .26s ease, transform .3s var(--gs-ease);
}
main article:hover .gs-step, main .gs-card:hover .gs-step{
  background:var(--gs-berry); border-color:var(--gs-berry); color:#FAF6EF; transform:scale(1.1);
}

/* ============ 7. SCROLL REVEAL — stagger (fail-safe) ============ */
/* Children are VISIBLE by default. The reveal is an animation that only plays
   when .gs-on arrives, so if JS never runs the content is never hidden. */
@keyframes gsRise{ from{ opacity:0; transform:translateY(18px) } to{ opacity:1; transform:none } }
.gs-stagger.gs-on > *{ animation:gsRise .55s var(--gs-ease) backwards; }
.gs-stagger.gs-on > *:nth-child(1){ animation-delay:.05s }
.gs-stagger.gs-on > *:nth-child(2){ animation-delay:.12s }
.gs-stagger.gs-on > *:nth-child(3){ animation-delay:.19s }
.gs-stagger.gs-on > *:nth-child(4){ animation-delay:.26s }
.gs-stagger.gs-on > *:nth-child(5){ animation-delay:.33s }
.gs-stagger.gs-on > *:nth-child(6){ animation-delay:.40s }
.gs-stagger.gs-on > *:nth-child(7){ animation-delay:.47s }
.gs-stagger.gs-on > *:nth-child(8){ animation-delay:.54s }

/* kicker rule grows when its section reveals */
.gs-rule{ display:inline-block; height:1px; width:28px; background:currentColor;
  transition:width .55s var(--gs-ease); }
.gs-on .gs-rule, [data-reveal].gs-on .gs-rule{ width:52px; }

/* ============ 8. DECORATIVE ============ */
/* soft berry halo behind a hero/stat element */
.gs-halo{ position:relative; }
.gs-halo::before{
  content:""; position:absolute; inset:-14% -10% auto auto;
  width:56%; aspect-ratio:1; border-radius:50%;
  background:radial-gradient(circle, rgba(138,1,79,.13), transparent 68%);
  z-index:0; pointer-events:none;
}
.gs-halo > *{ position:relative; z-index:1; }

/* quiet ornamental divider between sections */
.gs-div{ display:flex; align-items:center; justify-content:center; gap:10px; }
.gs-div::before, .gs-div::after{
  content:""; height:1px; flex:1; max-width:120px;
  background:linear-gradient(90deg,transparent,rgba(138,1,79,.35));
}
.gs-div::after{ background:linear-gradient(90deg,rgba(138,1,79,.35),transparent); }

/* stat figure emphasis */
.gs-stat{ transition:transform .3s var(--gs-ease), color .3s ease; display:inline-block; }
main article:hover .gs-stat, main .gs-card:hover .gs-stat{ transform:scale(1.05); }

/* pill/badge lift */
.gs-pill{ transition:background .2s ease, border-color .2s ease, transform .2s var(--gs-ease); }
.gs-pill:hover{ transform:translateY(-2px); }

/* ============ 9. FOCUS — two-tone ring, works on light AND dark ============ */
/* A single-colour ring cannot pass on both grounds: berry on the plum band is
   1.18:1 and on a berry CTA 1.0:1. Cream ring + plum halo means whichever
   ground you are on, one of the two rings has contrast against it. */
:focus-visible{
  outline:3px solid #FAF6EF;
  outline-offset:2px;
  box-shadow:0 0 0 6px #6E1741;
  border-radius:3px;
}
/* on light grounds the plum halo carries it; on dark grounds the cream ring does */
main input:focus, main textarea:focus{
  border-color:var(--gs-berry) !important;
  box-shadow:0 0 0 3px rgba(138,1,79,.18);
}

/* ============ 10. REDUCED MOTION ============ */
@media (prefers-reduced-motion:reduce){
  main article, main .gs-card, main article img, main .gs-card img,
  main a img, .gs-ar, .gs-ico-plate, .gs-step, .gs-rule, .gs-stat, .gs-pill,
  main a, main button{
    transition:none !important; transform:none !important;
  }
  main article::after, main .gs-card::after{ transition:none !important; transform:scaleX(1); }
  main article:hover, main .gs-card:hover,
  main a[style*="overflow:hidden"]:hover{ transform:none !important; }
  main article:hover img, main .gs-card:hover img,
  main a[style*="overflow:hidden"]:hover img{ transform:none !important; filter:none !important; }
  .gs-stagger.gs-on > *{ animation:none !important; opacity:1 !important; }
}