/* Dinamo opening identity — words become process, process becomes brand. */
.intro{
  display:block;
  padding:30px var(--pad);
  overflow:hidden;
  background:#351052;
  color:#fff;
  isolation:isolate;
  transition:clip-path .9s cubic-bezier(.76,0,.24,1);
}
.intro:before{
  content:"";
  position:absolute;
  inset:-18%;
  z-index:-2;
  background:
    radial-gradient(circle at 77% 18%,rgba(255,255,255,.32),transparent 24%),
    radial-gradient(circle at 18% 78%,rgba(202,167,255,.68),transparent 31%),
    linear-gradient(128deg,#280441 0%,#6630a1 52%,#c3a3eb 100%);
  transform:scale(1.16) rotate(-2deg);
  animation:introAtmosphere 4.7s cubic-bezier(.2,.7,.2,1) both;
}
.intro:after{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:linear-gradient(110deg,transparent 0 37%,rgba(255,255,255,.5) 49%,transparent 61%);
  transform:translateX(-125%);
  animation:introSweep 1.05s 3.15s cubic-bezier(.2,.7,.2,1) both;
}
.intro-meta{
  z-index:5;
  color:rgba(255,255,255,.82);
  mix-blend-mode:difference;
}
.intro-sequence{
  position:absolute;
  inset:0;
  z-index:2;
  display:grid;
  place-items:center;
  padding:0 4vw;
}
.intro-sequence>span{
  position:absolute;
  width:100%;
  text-align:center;
  color:#fff;
  font-family:"Manrope","Helvetica Neue",Arial,sans-serif;
  font-size:clamp(64px,12vw,188px);
  line-height:.82;
  font-weight:500;
  letter-spacing:-.075em;
  font-feature-settings:"locl" 1,"kern" 1;
  font-variant-ligatures:common-ligatures;
  white-space:nowrap;
  padding:.18em 0 .16em;
  opacity:0;
  filter:blur(10px);
  transform:translateY(58%);
  clip-path:inset(0 0 100% 0);
  animation:introProcessWord .88s cubic-bezier(.2,.72,.18,1) both;
}
.intro-sequence>span:nth-child(1){animation-delay:.12s}
.intro-sequence>span:nth-child(2){animation-delay:.78s}
.intro-sequence>span:nth-child(3){animation-delay:1.44s}
.intro-sequence>span:nth-child(4){animation-delay:2.1s}
.intro-sequence>.intro-value{font-size:clamp(54px,10.6vw,168px)}
.intro-logo-stage{
  position:absolute;
  inset:0;
  z-index:3;
  display:grid;
  place-items:center;
  padding:0 4vw;
  opacity:0;
  transform:scale(.94);
  animation:introBrandStage 1.25s 2.92s cubic-bezier(.16,1,.3,1) forwards;
}
.intro-logo-official{
  width:min(52vw,620px);
  height:auto;
  object-fit:contain;
  filter:brightness(0) invert(1) contrast(1.4);
  transform:translateZ(0);
}
.intro-signature{
  position:absolute;
  top:calc(50% + min(8vw,116px));
  font:500 8px "Manrope","Helvetica Neue",Arial,sans-serif!important;
  letter-spacing:.28em!important;
  white-space:nowrap;
  color:rgba(255,255,255,.74);
  mix-blend-mode:difference;
  opacity:0;
  animation:introSignature .65s 3.48s ease forwards;
}
.intro-progress{
  z-index:5;
  color:rgba(255,255,255,.86);
  mix-blend-mode:difference;
}
.intro-progress i{
  background:currentColor;
  animation:introline 4.15s .15s cubic-bezier(.2,.7,.2,1) both;
}
.intro-progress b{white-space:nowrap}
@keyframes introAtmosphere{
  0%{transform:scale(1.16) rotate(-2deg);filter:saturate(1.16)}
  62%{transform:scale(1.04);filter:saturate(1)}
  100%{transform:scale(1);filter:saturate(.9);opacity:1}
}
@keyframes introSweep{to{transform:translateX(125%)}}
@keyframes introProcessWord{
  0%{opacity:0;filter:blur(10px);transform:translateY(58%);clip-path:inset(0 0 100% 0)}
  24%,66%{opacity:1;filter:blur(0);transform:none;clip-path:inset(0)}
  100%{opacity:0;filter:blur(7px);transform:translateY(-54%);clip-path:inset(100% 0 0 0)}
}
@keyframes introBrandStage{to{opacity:1;transform:scale(1)}}
@keyframes introSignature{to{opacity:1;transform:translateY(10px)}}
@media(max-width:780px){
  .intro{padding:22px 24px}
  .intro-sequence{padding:0 12px}
  .intro-sequence>span{font-size:17vw;letter-spacing:-.075em}
  .intro-sequence>.intro-value{font-size:13.5vw;white-space:normal;line-height:.86}
  .intro-logo-stage{padding:0 17px}
  .intro-logo-official{width:82vw;max-width:420px}
  .intro-signature{top:calc(50% + 14vw);font-size:6px!important;letter-spacing:.18em!important}
  .intro-progress b{font-size:7px}
}
@media(prefers-reduced-motion:reduce){
  .intro:before,.intro:after,.intro-sequence,.intro-signature,.intro-progress i{animation:none}
  .intro{background:#f7f4fa}
  .intro-sequence{display:none}
  .intro-logo-stage{opacity:1;transform:none;animation:none}
  .intro-logo-official{filter:brightness(0) invert(1) contrast(1.4);animation:none}
}