@property --gg-cream { syntax: '<percentage>'; inherits: true; initial-value: 0%; }
@property --gg-etch  { syntax: '<percentage>'; inherits: true; initial-value: 0%; }

/* ===== overlay / backdrop ===== */
.gg-intro{
  position:fixed;inset:0;z-index:100000;display:flex;align-items:center;justify-content:center;
  background:rgba(16,14,11,0);backdrop-filter:blur(0px);-webkit-backdrop-filter:blur(0px);
  cursor:pointer;-webkit-tap-highlight-color:transparent;padding:5vh 5vw;
  pointer-events:none;
  transition:background .6s ease,backdrop-filter .6s ease,-webkit-backdrop-filter .6s ease,opacity .8s ease;
}
.gg-intro.go{background:rgba(16,14,11,.52);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);pointer-events:auto}
html.gg-lock,html.gg-lock body{overflow:hidden}

/* ===== panel (the "screen surface" the cream is painted on) ===== */
.gg-panel{
  position:relative;z-index:2;width:min(620px,93vw);min-height:min(50vh,400px);
  display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;
  padding:clamp(2.4rem,6vw,3.8rem) clamp(1.6rem,5vw,3rem);
  opacity:0;
  --gg-cream:0%;--gg-etch:0%;
}
.gg-intro.go .gg-panel{
  animation:
    gg-panelin .55s ease forwards,
    gg-cream 1.55s cubic-bezier(.45,.05,.3,1) .35s forwards,
    gg-etch  1.75s cubic-bezier(.5,.05,.35,1) 2.05s forwards;
}
@keyframes gg-panelin{from{opacity:0;transform:translateY(16px) scale(.985)}to{opacity:1;transform:none}}
@keyframes gg-cream{from{--gg-cream:0%}to{--gg-cream:101%}}
@keyframes gg-etch{from{--gg-etch:0%}to{--gg-etch:101%}}

/* ===== cream coat (revealed by the brush sweep) ===== */
.gg-cream{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:url('./images/intro-cream.png') center/auto 142% no-repeat;
  -webkit-mask-image:linear-gradient(96deg,#000 calc(var(--gg-cream) - 7%),transparent calc(var(--gg-cream) + 1.5%));
  mask-image:linear-gradient(96deg,#000 calc(var(--gg-cream) - 7%),transparent calc(var(--gg-cream) + 1.5%));
  filter:drop-shadow(0 18px 30px rgba(40,30,18,.45));
}
.gg-cream-frame{display:none}

/* wet leading edge that rides with the brush */
.gg-wet{
  position:absolute;top:0;bottom:0;left:var(--gg-cream);width:26px;z-index:2;pointer-events:none;opacity:0;
  transform:translateX(-60%);
  background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.85) 55%,rgba(255,250,240,.2));
  filter:blur(1px);
}
.gg-intro.go .gg-wet{animation:gg-wet 1.55s ease .35s forwards}
@keyframes gg-wet{0%{opacity:0}9%{opacity:.95}80%{opacity:.7}100%{opacity:0}}

/* ===== the cosmetic brush (real photo) ===== */
.gg-brush{
  position:absolute;top:50%;left:var(--gg-cream);z-index:5;width:clamp(140px,30vw,200px);
  transform:translate(-42%,-52%);pointer-events:none;opacity:0;
  filter:drop-shadow(0 14px 18px rgba(60,45,30,.4));
}
.gg-brush__img{display:block;width:100%;height:auto;
  transform:rotate(99deg);transform-origin:center}
.gg-intro.go .gg-brush{animation:gg-brushshow 1.55s ease .35s forwards}
@keyframes gg-brushshow{0%{opacity:0}8%{opacity:1}84%{opacity:1}100%{opacity:0}}
.gg-brush__art{transform-origin:50% 50%}
.gg-intro.go .gg-brush__art{animation:gg-brushbob 1.55s ease-in-out .35s}
@keyframes gg-brushbob{
  0%{transform:translateY(0) rotate(-1.5deg)}
  25%{transform:translateY(-4px) rotate(1deg)}
  50%{transform:translateY(3px) rotate(-1deg)}
  75%{transform:translateY(-3px) rotate(1deg)}
  100%{transform:translateY(0) rotate(-1.5deg)}
}

/* ===== content on the cream ===== */
.gg-content{position:relative;z-index:6;display:flex;flex-direction:column;align-items:center;width:100%}
.gg-card__mark{display:block;height:clamp(32px,6.5vw,44px);margin:0 auto clamp(.9rem,2.4vw,1.4rem);opacity:0}
.gg-card__mark img{height:100%;width:auto;display:block;margin:0 auto;
  filter:drop-shadow(0 1px 0 rgba(255,255,255,.8))}
.gg-intro.go .gg-card__mark{animation:gg-fade .6s ease 1.95s forwards}

/* headline – drawn through the cream with a fingertip (dark, readable) */
.gg-headline{position:relative;display:inline-block}
.gg-line{position:relative;display:inline-block;
  font-family:'Great Vibes',cursive;font-size:clamp(2.4rem,8.5vw,3.7rem);line-height:1.14;
  color:#2a2014;padding:0 .14em;
  text-shadow:
    1px 1px 0 rgba(255,255,255,.85),
    -1px -1px 1px rgba(120,92,55,.4),
    0 2px 4px rgba(90,68,40,.3);
  -webkit-mask-image:linear-gradient(100deg,#000 calc(var(--gg-etch) - 4%),transparent calc(var(--gg-etch) + 1%));
  mask-image:linear-gradient(100deg,#000 calc(var(--gg-etch) - 4%),transparent calc(var(--gg-etch) + 1%));
}
/* fingertip tracing the writing */
.gg-laser{position:absolute;top:48%;left:var(--gg-etch);z-index:7;width:16px;height:16px;
  transform:translate(-50%,-50%);pointer-events:none;opacity:0;border-radius:50%;
  background:radial-gradient(circle at 38% 32%,#fffaf1 0%,#ecdcc4 55%,rgba(236,220,196,0) 72%);
  box-shadow:0 1px 5px rgba(120,92,55,.5);}
.gg-laser::after{content:"";position:absolute;left:50%;top:50%;width:4px;height:4px;border-radius:50%;
  transform:translate(-50%,-50%);background:#6b5230;box-shadow:0 0 3px 1px rgba(107,82,48,.5);}
.gg-intro.go .gg-laser{animation:gg-laser 1.75s ease 2.05s forwards}
@keyframes gg-laser{0%{opacity:0}6%{opacity:1}92%{opacity:1}100%{opacity:0}}

/* subline (lightly etched) */
.gg-sub{margin:clamp(.8rem,2.2vw,1.2rem) auto 0;max-width:32ch;
  font-family:'Hanken Grotesk',sans-serif;font-size:clamp(.82rem,2.3vw,.95rem);
  line-height:1.5;color:#5a4d3a;opacity:0;
  text-shadow:0 1px 0 rgba(255,255,255,.7)}
.gg-sub strong{font-weight:700;color:#2a2014}
.gg-intro.go .gg-sub{animation:gg-up .7s ease 3.9s forwards}

/* stats */
.gg-stats{display:flex;justify-content:center;gap:clamp(1rem,5vw,2.4rem);
  margin-top:clamp(1.3rem,3.4vw,1.9rem);padding-top:clamp(1.1rem,3vw,1.5rem);
  border-top:1px solid rgba(176,147,94,.4)}
.gg-stat{display:flex;flex-direction:column;gap:.25rem;opacity:0;transform:translateY(8px)}
.gg-intro.go .gg-stat{animation:gg-up .6s ease forwards}
.gg-intro.go .gg-stat:nth-child(1){animation-delay:4.0s}
.gg-intro.go .gg-stat:nth-child(2){animation-delay:4.15s}
.gg-intro.go .gg-stat:nth-child(3){animation-delay:4.3s}
.gg-num{font-family:'Playfair Display',serif;font-size:clamp(1.35rem,4.4vw,1.85rem);font-weight:500;color:#1b2342;white-space:nowrap}
.gg-lbl{font-family:'Hanken Grotesk',sans-serif;font-size:clamp(.6rem,1.8vw,.7rem);letter-spacing:.12em;text-transform:uppercase;color:#8a7e6a}

/* controls */
.gg-skip{position:absolute;bottom:1.5rem;right:1.6rem;z-index:8;background:none;border:0;cursor:pointer;
  font-family:'Hanken Grotesk',sans-serif;font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(247,244,239,.7);text-shadow:0 1px 6px rgba(0,0,0,.5);transition:color .3s;opacity:0}
.gg-intro.go .gg-skip{animation:gg-fade .5s ease 1.6s forwards}
.gg-skip:hover{color:#fff}
.gg-close{position:absolute;top:.5rem;right:.65rem;z-index:9;width:2.2rem;height:2.2rem;
  display:flex;align-items:center;justify-content:center;border:0;background:none;cursor:pointer;
  font-family:'Hanken Grotesk',sans-serif;font-size:1.7rem;line-height:1;color:#9a7c44;border-radius:50%;
  opacity:0;transition:background .25s,color .25s,transform .25s}
.gg-close:hover{background:rgba(176,147,94,.16);color:#7e6536;transform:rotate(90deg)}
.gg-intro.go .gg-close{animation:gg-fade .5s ease 2.4s forwards}

@keyframes gg-fade{to{opacity:1}}
@keyframes gg-up{to{opacity:1;transform:translateY(0)}}

/* exit */
.gg-intro.gg-out{opacity:0;pointer-events:none}
.gg-intro.gg-out .gg-panel{animation:gg-flyout .8s cubic-bezier(.5,0,.75,.2) forwards}
@keyframes gg-flyout{to{transform:translateY(-30px) scale(.98);opacity:0}}

@media (prefers-reduced-motion:reduce){.gg-intro{display:none}}