/* Root-only Grahl Studio abstract intro: original orbital ribbon + official mark. */
.grahl-intro {
  display:none;
  position:fixed;
  inset:0;
  z-index:2147483000;
  overflow:hidden;
  color:#fff;
  background:#050506;
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  opacity:1;
  visibility:visible;
  transition:opacity .95s cubic-bezier(.76,0,.24,1),visibility .95s;
}
html.grahl-intro-ready .grahl-intro { display:grid; place-items:center; }
.grahl-intro.is-exiting { visibility:hidden; pointer-events:none; opacity:0; }
.grahl-intro__grid {
  position:absolute;
  inset:0;
  pointer-events:none;
  background:radial-gradient(circle at 50% 50%,rgba(100,51,79,.11),transparent 37%);
}
.grahl-intro__bloom {
  position:absolute;
  top:50%;
  left:50%;
  width:14rem;
  height:14rem;
  border-radius:50%;
  background:radial-gradient(circle,rgba(100,51,79,.56),rgba(100,51,79,.18) 45%,transparent 72%);
  filter:blur(7px);
  opacity:0;
  transform:translate(-50%,-50%) scale(.25);
  animation:grahl-bloom 1.9s 1.35s ease-out both;
}
.grahl-intro__ribbon-wrap {
  position:absolute;
  z-index:1;
  width:min(36vw,360px);
  min-width:260px;
  aspect-ratio:1;
  opacity:0;
  transform:scale(.92);
  animation:grahl-ribbon-in .5s .04s cubic-bezier(.16,1,.3,1) forwards,grahl-ribbon-release .7s 1.38s cubic-bezier(.76,0,.24,1) forwards;
}
.grahl-intro__ribbon { width:100%; height:100%; overflow:visible; }
.grahl-intro__ribbon-halo {
  fill:none;
  stroke:#64334f;
  stroke-width:18;
  stroke-linecap:round;
  filter:blur(10px);
  opacity:0;
  stroke-dasharray:900;
  stroke-dashoffset:900;
  animation:grahl-ribbon-draw .85s .08s cubic-bezier(.76,0,.24,1) forwards,grahl-halo-breathe .5s .85s ease-in-out both;
}
.grahl-intro__ribbon-line {
  fill:none;
  stroke:url(#grahl-intro-ribbon-gradient);
  stroke-width:5;
  stroke-linecap:round;
  stroke-linejoin:round;
  stroke-dasharray:900;
  stroke-dashoffset:900;
  filter:drop-shadow(0 0 2px rgba(255,255,255,.65));
  animation:grahl-ribbon-draw .85s .08s cubic-bezier(.76,0,.24,1) forwards;
}
.grahl-intro__ribbon-node {
  fill:#fff;
  filter:drop-shadow(0 0 8px rgba(100,51,79,.95));
  opacity:0;
  transform-box:fill-box;
  transform-origin:center;
  animation:grahl-node-in .22s .78s cubic-bezier(.16,1,.3,1) forwards;
}
.grahl-intro__lockup {
  position:relative;
  z-index:2;
  display:flex;
  align-items:center;
  gap:22px;
  animation:grahl-lockup-in .55s .72s cubic-bezier(.16,1,.3,1) both;
}
.grahl-intro__skip {
  position:absolute;
  top:max(20px, env(safe-area-inset-top));
  right:max(20px, env(safe-area-inset-right));
  z-index:3;
  min-height:44px;
  padding:8px 12px;
  border:0;
  background:transparent;
  color:inherit;
  font:500 13px/1.25 Inter,ui-sans-serif,system-ui,sans-serif;
  cursor:pointer;
}
.grahl-intro__skip:focus-visible { outline:2px solid #b87898; outline-offset:3px; }
.grahl-intro__mark-wrap { position:relative; display:grid; width:78px; height:78px; place-items:center; }
.grahl-intro__mark {
  width:66px;
  height:66px;
  object-fit:contain;
  clip-path:inset(100% 0 0 0);
  opacity:0;
  animation:grahl-mark-reveal .45s .72s cubic-bezier(.76,0,.24,1) forwards,grahl-mark-glow .7s 1.1s ease-out both;
}
.grahl-intro__trace { display:none; }
.grahl-intro__name {
  display:flex;
  flex-direction:column;
  gap:4px;
  opacity:0;
  line-height:.88;
  animation:grahl-name-in .45s .92s cubic-bezier(.16,1,.3,1) forwards;
}
.grahl-intro__name strong { font-size:clamp(35px,6vw,76px); letter-spacing:-.08em; }
.grahl-intro__name span { padding-left:3px; color:#b87898; font-size:11px; letter-spacing:.36em; }
.grahl-intro__status {
  position:absolute;
  bottom:8vh;
  z-index:2;
  margin:0;
  color:#9f9a9b;
  font-size:10px;
  letter-spacing:.16em;
  text-transform:uppercase;
  opacity:0;
  animation:grahl-fade-up .45s 1.05s both;
}
.grahl-intro__progress {
  position:absolute;
  right:0;
  bottom:0;
  left:0;
  z-index:3;
  height:3px;
  background:#292426;
}
.grahl-intro__progress span {
  display:block;
  height:100%;
  background:linear-gradient(90deg,#64334f 0%,#b87898 65%,#fff 100%);
  transform:scaleX(0);
  transform-origin:left;
  animation:grahl-progress 1.9s cubic-bezier(.76,0,.24,1) both;
}
@keyframes grahl-ribbon-in { to { opacity:1; transform:scale(1); } }
@keyframes grahl-ribbon-draw { to { stroke-dashoffset:0; } }
@keyframes grahl-halo-breathe { 55% { opacity:.86; } to { opacity:.48; } }
@keyframes grahl-node-in { from { opacity:0; transform:scale(0); } to { opacity:1; transform:scale(1); } }
@keyframes grahl-ribbon-release { 35% { opacity:.95; } to { opacity:0; transform:scale(7); } }
@keyframes grahl-lockup-in { from { opacity:0; transform:translateY(16px) scale(.985); } to { opacity:1; transform:none; } }
@keyframes grahl-mark-reveal { from { clip-path:inset(100% 0 0 0); opacity:0; } to { clip-path:inset(0); opacity:1; } }
@keyframes grahl-mark-glow { 50% { filter:drop-shadow(0 0 13px rgba(184,120,152,.8)); } to { filter:drop-shadow(0 0 2px rgba(184,120,152,.18)); } }
@keyframes grahl-name-in { from { opacity:0; transform:translateX(12px); } to { opacity:1; transform:none; } }
@keyframes grahl-fade-up { from { opacity:0; transform:translateY(16px); } to { opacity:1; transform:none; } }
@keyframes grahl-progress { to { transform:scaleX(1); } }
@keyframes grahl-bloom { 0% { opacity:0; transform:translate(-50%,-50%) scale(.25); } 22% { opacity:1; } 100% { opacity:0; transform:translate(-50%,-50%) scale(17); } }
@media (max-width:800px) {
  .grahl-intro__ribbon-wrap { width:78vw; min-width:240px; }
  .grahl-intro__lockup { gap:15px; }
  .grahl-intro__mark-wrap { width:58px; height:58px; }
  .grahl-intro__mark { width:49px; height:49px; }
  .grahl-intro__name strong { font-size:clamp(30px,11vw,52px); }
  .grahl-intro__name span { font-size:8px; letter-spacing:.3em; }
}
@media (prefers-reduced-motion:reduce) { .grahl-intro { display:none !important; } }