/* Local preview v153: align Section 01 copy with the supplied 1920 × 1080 PSD. */
.opening-logo-stack{translate:0 120px;opacity:1}
.opening-logo-stack .opening-logo-layer[data-logo-part="bae-woogi"]{inset:auto;left:50%;top:94px;width:170px;height:57px;translate:-50% 0;scale:1}
.opening-logo-stack .opening-logo-layer[data-logo-part="design"]{inset:auto;left:50%;top:151px;width:90px;height:14px;translate:-50% 0}
.opening-logo-stack .opening-portfolio-word{left:0;top:calc(84% - 14px);width:100%}
.opening-psd-english{position:absolute;top:calc(35svh + var(--scene-h)/2);left:50%;translate:-50% 0;width:min(88vw,437px);margin:0;text-align:center;color:rgba(255,255,255,.8);font:400 16px/1.125 Arial,sans-serif;letter-spacing:-.025em;white-space:nowrap;pointer-events:none}
html[data-state="idle"] .cta-slot{top:78svh}
html:is([data-state="starting"],[data-state="intro"],[data-state="ended"],[data-state^="continuation"]) .opening-psd-english{opacity:0;visibility:hidden}

/* Distinct square pixels form each arrow; the left arrow is a mirror. */
.svc151-ring-arrow{width:64px;height:64px;border:0;border-radius:0;background:transparent;color:#fff;display:grid;place-items:center;padding:0;line-height:0;transition:opacity .22s ease,transform .18s ease}
.svc151-ring-arrow svg{display:block;width:58px;height:58px;fill:currentColor;shape-rendering:crispEdges}
.svc151-ring-arrow-prev svg{transform:scaleX(-1)}
.svc151-ring-arrow:hover{background:transparent;transform:scale(1.08)}
.svc151-ring-arrow:active{transform:scale(.94)}

/* The icon/copy respond as separate parts of the same brief notification. */
@keyframes svc153-icon-shake{0%,100%{translate:0 0}22%{translate:-2px 1px}55%{translate:2px -1px}78%{translate:-1px 0}}
@keyframes svc153-title-shake{0%,100%{translate:0 0}22%{translate:1px -2px}55%{translate:-2px 1px}78%{translate:1px 1px}}
@keyframes svc153-english-shake{0%,100%{translate:0 0}28%{translate:-1px 1px}55%{translate:2px 0}80%{translate:-1px -1px}}
@keyframes svc153-body-shake{0%,100%{translate:0 0}25%{translate:2px 1px}52%{translate:-1px -1px}78%{translate:1px -1px}}
@keyframes svc153-view-shake{0%,100%{translate:0 0}25%{translate:-2px -1px}55%{translate:2px 1px}80%{translate:0 -1px}}
.svc151-card.is-vibrating .svc151-icon{animation:svc153-icon-shake .35s ease-in-out 1}
.svc151-card.is-vibrating .svc151-title{animation:svc153-title-shake .38s ease-in-out 1}
.svc151-card.is-vibrating .svc151-english{animation:svc153-english-shake .33s ease-in-out 1}
.svc151-card.is-vibrating .svc151-body{animation:svc153-body-shake .37s ease-in-out 1}
.svc151-card.is-vibrating .svc151-view{animation:svc153-view-shake .36s ease-in-out 1}

/* The PSD's right capsule keeps its single 50% ink fill while the copy pulses. */
@keyframes svc153-copy-pulse{0%,100%{opacity:.74}50%{opacity:.31}}
.svc151-plane.is-finished .svc151-pill-two span{animation:svc153-copy-pulse .84s ease-in-out infinite}

@media(max-width:1180px){
  .svc151-ring-arrow{width:54px;height:54px}
  .svc151-ring-arrow svg{width:50px;height:50px}
}
@media(max-width:700px){
  .opening-logo-stack{translate:0 80px}
  .opening-logo-stack .opening-logo-layer[data-logo-part="bae-woogi"]{top:20%;width:63%;height:auto;aspect-ratio:170/57}
  .opening-logo-stack .opening-logo-layer[data-logo-part="design"]{top:62%;width:30%;height:auto;aspect-ratio:90/14}
  .opening-logo-stack .opening-portfolio-word{top:calc(84% - 7px)}
  html[data-state="idle"] .cta-slot{top:74svh}
  .opening-psd-english{top:calc(34svh + var(--scene-h)/2);font-size:clamp(7px,1.75vw,9px);line-height:1.18;letter-spacing:-.035em}
}
@media(max-width:350px){
  .svc151-pill-two{top:62%}
  .svc151-play{top:66%}
  .opening-psd-english{top:calc(34svh + var(--scene-h)/2 + 17px)}
}
@media(prefers-reduced-motion:reduce){
  .svc151-card.is-vibrating :is(.svc151-icon,.svc151-title,.svc151-english,.svc151-body,.svc151-view),
  .svc151-plane.is-finished .svc151-pill-two span{animation:none!important}
  .svc151-ring-arrow{transition:none!important}
}