@import url('/pw-hero-motion-v2.css?v=202609161223');
@import url('/pw-performance.css?v=202609161119');
@font-face {
  font-family: 'Inter';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/font-01.woff) format('truetype');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/font-02.woff) format('truetype');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/fonts/font-03.woff) format('truetype');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/assets/fonts/font-04.woff) format('truetype');
}
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/fonts/font-05.woff) format('truetype');
}
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/assets/fonts/font-06.woff) format('truetype');
}

/* Final hero correction: clean typography, no broken sweep rectangle, no repeated header tagline. */
html body header a[href*="#top"]>p:nth-child(2){
  font-size:0!important;
  letter-spacing:0!important;
  color:transparent!important;
  text-shadow:none!important;
}
html body header a[href*="#top"]>p:nth-child(2)::after{
  content:"CREATIVE DIGITAL STUDIO";
  display:inline-block;
  font-family:'Inter',system-ui,sans-serif;
  font-size:.62rem;
  font-weight:600;
  letter-spacing:.18em;
  color:rgba(186,203,228,.72);
  text-shadow:0 0 10px rgba(69,151,255,.18);
}

html body main#top>section:first-child .rise-in h1{
  font-family:'Playfair Display',Georgia,serif!important;
  font-weight:600!important;
  font-style:normal!important;
  font-size:clamp(2.85rem,11.4vw,4.7rem)!important;
  line-height:.96!important;
  letter-spacing:-.045em!important;
  color:#f8fbff!important;
  -webkit-text-fill-color:#f8fbff!important;
  background:none!important;
  background-image:none!important;
  text-shadow:0 0 5px rgba(255,255,255,.34),0 0 15px rgba(136,199,255,.28),0 0 34px rgba(41,118,255,.18)!important;
  filter:drop-shadow(0 8px 20px rgba(0,0,0,.42))!important;
  perspective:900px;
}
html body main#top>section:first-child .rise-in h1::after{
  display:none!important;
  content:none!important;
  background:none!important;
  animation:none!important;
}
html body main#top>section:first-child .rise-in h1::before{
  opacity:.72!important;
  box-shadow:0 0 10px rgba(86,165,255,.42)!important;
}
html body main#top>section:first-child .rise-in h1 .pw-word{
  display:inline-block!important;
  font-family:'Playfair Display',Georgia,serif!important;
  font-weight:600!important;
  font-size:1em!important;
  line-height:inherit!important;
  letter-spacing:inherit!important;
  color:#f8fbff!important;
  -webkit-text-fill-color:#f8fbff!important;
  background:none!important;
  filter:none!important;
  opacity:0;
  transform-origin:50% 100%;
  animation:pwFinalHeroDomino .58s cubic-bezier(.18,.82,.2,1) calc(.08s + (var(--pw-i) * .055s)) both!important;
  text-shadow:inherit!important;
}
html body main#top>section:first-child .rise-in h1 .pw-word.ai,
html body main#top>section:first-child .rise-in h1 .pw-word.www{
  font-family:'Playfair Display',Georgia,serif!important;
  font-size:1em!important;
  font-weight:600!important;
  color:#ffffff!important;
  -webkit-text-fill-color:#ffffff!important;
  text-shadow:0 0 6px rgba(255,255,255,.62),0 0 18px rgba(126,196,255,.52),0 0 34px rgba(47,126,255,.32)!important;
  transform:none;
}

@keyframes pwFinalHeroDomino{
  0%{opacity:0;transform:translateY(18px) rotateX(62deg) scale(.96);filter:blur(4px)}
  70%{opacity:1;transform:translateY(-2px) rotateX(0deg) scale(1.015);filter:blur(0)}
  100%{opacity:1;transform:translateY(0) rotateX(0deg) scale(1);filter:blur(0)}
}

@media(max-width:767px){
  html body main#top>section:first-child .rise-in h1{
    max-width:23rem!important;
    margin-left:auto!important;
    margin-right:auto!important;
  }
  html body main#top>section:first-child .rise-in::before{
    margin-bottom:1.2rem!important;
  }

  /* Keep the document scroll root untouched. Clip only the intro artwork itself. */
  .splash-screen{
    inset:0!important;
    left:0!important;
    right:0!important;
    width:100%!important;
    max-width:100%!important;
    overflow:hidden!important;
    background:#08090b!important;
    contain:paint;
    isolation:isolate;
    transform:translateZ(0);
    backface-visibility:hidden;
  }
  .splash-screen::before{
    content:"";
    position:absolute;
    z-index:6;
    top:0;
    bottom:0;
    left:0;
    width:14px;
    pointer-events:none;
    background:linear-gradient(90deg,#08090b 0 72%,rgba(8,9,11,.98) 86%,rgba(8,9,11,0) 100%);
  }
  .splash-screen::after{
    content:"";
    position:absolute;
    z-index:6;
    top:0;
    left:0;
    right:0;
    height:5px;
    pointer-events:none;
    background:linear-gradient(180deg,#08090b 0 65%,rgba(8,9,11,.96) 82%,rgba(8,9,11,0) 100%);
  }
  .splash-picture{
    position:absolute!important;
    inset:0!important;
    width:100%!important;
    height:100%!important;
    max-width:100%!important;
    max-height:100%!important;
    overflow:hidden!important;
    margin:0!important;
    background:#08090b!important;
    transform:translateZ(0);
    backface-visibility:hidden;
  }
  .splash-plate{
    position:absolute!important;
    top:-5%!important;
    left:-5%!important;
    width:110%!important;
    height:110%!important;
    min-width:110%!important;
    max-width:none!important;
    max-height:none!important;
    object-fit:cover!important;
    object-position:55% 50%!important;
    margin:0!important;
    transform:translateZ(0)!important;
    backface-visibility:hidden!important;
    clip-path:inset(.5px)!important;
  }

  /* Responsive hero sizing without changing page scrolling. */
  main#top>section:first-child .rise-in{
    width:min(100%,100vw)!important;
    max-width:100vw!important;
  }
}

@media(max-width:390px){
  html body main#top>section:first-child .rise-in h1.pw-show-title{
    width:100vw!important;
    max-width:100vw!important;
    margin-left:0!important;
    margin-right:0!important;
    padding-left:.35rem!important;
    padding-right:.35rem!important;
    font-size:clamp(2.15rem,9.7vw,3.2rem)!important;
    letter-spacing:-.06em!important;
  }
  .splash-plate{
    top:-6%!important;
    left:-6%!important;
    width:112%!important;
    height:112%!important;
    min-width:112%!important;
    object-position:56% 50%!important;
  }
}

/* Intro v3: intact logo first, lightning impact, radial crack, then gravity-driven glass fall. */
.pw-glass-transition.pw-breaking .pw-glass-cracks{
  animation:pwGlassImpactFlash .48s cubic-bezier(.16,.82,.2,1) .56s forwards!important;
}
.pw-glass-transition.pw-breaking .pw-glass-cracks path{
  animation:pwGlassRadialCrack .44s cubic-bezier(.14,.84,.2,1) .56s forwards!important;
}
.pw-glass-transition.pw-breaking .pw-glass-base{
  animation:pwGlassBaseRelease .24s ease-out .76s forwards!important;
}
.pw-glass-transition.pw-breaking .pw-glass-shard{
  opacity:0!important;
  transform-origin:50% 38%!important;
}
.pw-glass-transition.pw-breaking .pw-glass-shard.s1{animation:pwGlassFall1 .96s cubic-bezier(.24,.62,.28,1) .76s forwards!important}
.pw-glass-transition.pw-breaking .pw-glass-shard.s2{animation:pwGlassFall2 .98s cubic-bezier(.24,.62,.28,1) .77s forwards!important}
.pw-glass-transition.pw-breaking .pw-glass-shard.s3{animation:pwGlassFall3 .94s cubic-bezier(.22,.60,.30,1) .80s forwards!important}
.pw-glass-transition.pw-breaking .pw-glass-shard.s4{animation:pwGlassFall4 .91s cubic-bezier(.22,.60,.30,1) .81s forwards!important}
.pw-glass-transition.pw-breaking .pw-glass-shard.s5{animation:pwGlassFall5 .95s cubic-bezier(.22,.60,.30,1) .80s forwards!important}
.pw-glass-transition.pw-breaking .pw-glass-shard.s6{animation:pwGlassFall6 .88s cubic-bezier(.20,.58,.32,1) .84s forwards!important}
.pw-glass-transition.pw-breaking .pw-glass-shard.s7{animation:pwGlassFall7 .86s cubic-bezier(.20,.58,.32,1) .85s forwards!important}
.pw-glass-transition.pw-breaking .pw-glass-shard.s8{animation:pwGlassFall8 .89s cubic-bezier(.20,.58,.32,1) .84s forwards!important}

@keyframes pwGlassRadialCrack{
  0%{stroke-dashoffset:1200}
  26%{stroke-dashoffset:860}
  58%{stroke-dashoffset:360}
  100%{stroke-dashoffset:0}
}
@keyframes pwGlassImpactFlash{
  0%{opacity:0;filter:drop-shadow(0 0 0 rgba(255,255,255,0))}
  12%{opacity:1;filter:drop-shadow(0 0 7px #fff) drop-shadow(0 0 18px rgba(91,197,255,.98))}
  48%{opacity:.96;filter:drop-shadow(0 0 4px #fff) drop-shadow(0 0 12px rgba(52,154,255,.82))}
  100%{opacity:.22;filter:drop-shadow(0 0 2px rgba(150,220,255,.5))}
}
@keyframes pwGlassBaseRelease{
  0%{opacity:1;filter:brightness(1)}
  35%{opacity:.94;filter:brightness(1.22)}
  100%{opacity:0;filter:brightness(1)}
}
@keyframes pwGlassFall1{
  0%{opacity:1;transform:translate3d(0,0,0) rotate(0) scale(1.002)}
  24%{transform:translate3d(-.8vw,4vh,0) rotate(-1.1deg) scale(1.004)}
  68%{opacity:1;transform:translate3d(-2vw,31vh,0) rotate(-3.4deg) scale(1.006)}
  100%{opacity:0;transform:translate3d(-3vw,72vh,0) rotate(-6deg) scale(1.008)}
}
@keyframes pwGlassFall2{
  0%{opacity:1;transform:translate3d(0,0,0) rotate(0) scale(1.002)}
  24%{transform:translate3d(.7vw,4vh,0) rotate(1deg) scale(1.004)}
  68%{opacity:1;transform:translate3d(2vw,33vh,0) rotate(3.1deg) scale(1.006)}
  100%{opacity:0;transform:translate3d(3vw,75vh,0) rotate(5.5deg) scale(1.008)}
}
@keyframes pwGlassFall3{
  0%{opacity:1;transform:translate3d(0,0,0) rotate(0) scale(1.002)}
  22%{transform:translate3d(-.7vw,7vh,0) rotate(-1.5deg)}
  66%{opacity:1;transform:translate3d(-1.8vw,40vh,0) rotate(-4.4deg)}
  100%{opacity:0;transform:translate3d(-2.6vw,86vh,0) rotate(-7deg)}
}
@keyframes pwGlassFall4{
  0%{opacity:1;transform:translate3d(0,0,0) rotate(0) scale(1.002)}
  22%{transform:translate3d(-.2vw,8vh,0) rotate(.5deg)}
  66%{opacity:1;transform:translate3d(-.4vw,44vh,0) rotate(2.1deg)}
  100%{opacity:0;transform:translate3d(-.6vw,91vh,0) rotate(4.3deg)}
}
@keyframes pwGlassFall5{
  0%{opacity:1;transform:translate3d(0,0,0) rotate(0) scale(1.002)}
  22%{transform:translate3d(.7vw,7vh,0) rotate(1.4deg)}
  66%{opacity:1;transform:translate3d(1.8vw,41vh,0) rotate(4.2deg)}
  100%{opacity:0;transform:translate3d(2.8vw,87vh,0) rotate(6.8deg)}
}
@keyframes pwGlassFall6{
  0%{opacity:1;transform:translate3d(0,0,0) rotate(0) scale(1.002)}
  20%{transform:translate3d(-.6vw,10vh,0) rotate(-1.6deg)}
  62%{opacity:1;transform:translate3d(-1.5vw,49vh,0) rotate(-4.5deg)}
  100%{opacity:0;transform:translate3d(-2.1vw,102vh,0) rotate(-7.5deg)}
}
@keyframes pwGlassFall7{
  0%{opacity:1;transform:translate3d(0,0,0) rotate(0) scale(1.002)}
  20%{transform:translate3d(.1vw,11vh,0) rotate(.8deg)}
  62%{opacity:1;transform:translate3d(.4vw,53vh,0) rotate(2.7deg)}
  100%{opacity:0;transform:translate3d(.8vw,108vh,0) rotate(5deg)}
}
@keyframes pwGlassFall8{
  0%{opacity:1;transform:translate3d(0,0,0) rotate(0) scale(1.002)}
  20%{transform:translate3d(.7vw,10vh,0) rotate(1.5deg)}
  62%{opacity:1;transform:translate3d(1.6vw,50vh,0) rotate(4.3deg)}
  100%{opacity:0;transform:translate3d(2.4vw,104vh,0) rotate(7deg)}
}

@media(prefers-reduced-motion:reduce){
  html body main#top>section:first-child .rise-in h1 .pw-word{
    animation:none!important;
    opacity:1!important;
    transform:none!important;
    filter:none!important;
  }
}