/* =========================================================
   PSMweb · Hero motion "Live Layout" · 2026-10-18
   Studio language: a viewport opens on a layout grid, design
   layers land, a cursor demonstrates interaction, projects
   change with a page wipe. One thing moves at a time.
   Driven by /studio-hero-motion.js. transform/opacity/clip only.
   ========================================================= */
:root{
  --pw-expo:cubic-bezier(.19,1,.22,1);
  --pw-wipe:cubic-bezier(.77,0,.18,1);
  --pw-glide:cubic-bezier(.45,0,.2,1);
  --pw-dwell:6200ms;
}

/* ---------- Typography entrance (tighter, no glyph leaks) ---------- */
.studio-hero-line-mask{padding:.08em 0 .1em;margin:-.08em 0 -.1em}
.studio-hero-line{
  transform:translateY(125%);
  animation:studioHeroLineIn 1.05s var(--pw-expo) forwards;
}
.studio-hero-line-mask:nth-child(1) .studio-hero-line{animation-delay:.12s}
.studio-hero-line-mask:nth-child(2) .studio-hero-line{animation-delay:.2s}
.studio-hero-line-mask:nth-child(3) .studio-hero-line{animation-delay:.28s}
.studio-hero-eyebrow{animation:studioHeroMetaIn .7s var(--pw-expo) .05s forwards}
.studio-hero-subline,
.studio-hero-support,
.studio-hero-actions,
.studio-hero-footline{animation-duration:.8s;animation-timing-function:var(--pw-expo)}
.studio-hero-subline{animation-delay:.62s}
.studio-hero-support{animation-delay:.7s}
.studio-hero-actions{animation-delay:.78s}
.studio-hero-footline{animation-delay:.9s}

/* Desktop: headline must not run into the project window */
@media(min-width:981px){
  .studio-hero .studio-hero-showcase{width:min(480px,34vw)}
  .studio-hero-content{width:min(900px,calc(100% - min(480px,34vw) - 3vw))}
  /* Size the headline from the free column so it always sets in three lines. */
  .hero.studio-hero .studio-hero-title{font-size:clamp(3rem,calc((100vw - 17vw - min(480px,34vw)) / 8.8),6.6rem)!important}
  .studio-hero-line{white-space:nowrap}
  .studio-hero-showcase .studio-showcase-slide strong{font-size:clamp(30px,3.15vw,50px)}
}

/* ---------- Background: slow camera settle + pointer depth ---------- */
/* No intro zoom here: a full-bleed image animating under a blurred
   window cost 33–50 ms frames. Static 5% bleed leaves room for parallax. */
.studio-hero .hero-background-image{
  scale:1.05;
  translate:var(--bgx,0px) var(--bgy,0px);
}

/* ---------- Showcase frame ---------- */
.studio-hero .studio-hero-showcase{
  opacity:1;
  transform:none;
  animation:none;
  perspective:1400px;
}
.studio-hero-showcase .studio-showcase-window{
  /* Slides are opaque, so the backdrop blur was invisible but repainted every frame. */
  background:rgba(4,14,24,.96);
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
}
.studio-hero-showcase .studio-showcase-window,
.studio-hero-showcase .studio-showcase-window:hover{
  transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));
  translate:0 var(--lift,0px);
  transition:translate 320ms var(--pw-expo),box-shadow 320ms var(--pw-expo);
  animation:pwViewportIn 1.1s var(--pw-expo) .32s both;
}
@media(hover:hover) and (pointer:fine){
  .studio-hero-showcase:hover{--lift:-4px}
}
.studio-hero-showcase .studio-showcase-meta{
  animation:pwRise .7s var(--pw-expo) 1.15s both;
}

/* Layout grid: visible while the viewport opens, then it steps back */
.pw-grid{
  position:absolute;
  inset:0 6%;
  z-index:4;
  display:grid;
  grid-template-columns:repeat(12,1fr);
  gap:2%;
  pointer-events:none;
  opacity:0;
  animation:pwGrid 1.9s ease .3s both;
}
.pw-grid i{
  border-left:1px solid rgba(93,214,255,.16);
  border-right:1px solid rgba(93,214,255,.16);
}
@media(hover:hover) and (pointer:fine){
  .studio-hero-showcase:hover .pw-grid{opacity:.55;transition:opacity 300ms ease;animation:none}
}

/* ---------- Slides: page wipe ---------- */
.studio-hero-showcase .studio-showcase-slide{
  opacity:1;
  filter:none;
  visibility:hidden;
  z-index:0;
  clip-path:inset(0 0 0 100%);
  transform:none;
  transition:none;
}
.studio-hero-showcase .studio-showcase-slide.is-active{
  visibility:visible;
  z-index:2;
  clip-path:inset(0 0 0 0);
  transform:none;
  transition:clip-path 900ms var(--pw-wipe);
}
.studio-hero-showcase .studio-showcase-slide.is-leaving{
  visibility:visible;
  z-index:1;
  clip-path:inset(0 0 0 0);
  transform:translate3d(-7%,0,0);
  transition:transform 900ms var(--pw-wipe);
}
.studio-showcase-slide::after{
  content:"";
  position:absolute;
  inset:0;
  background:#07111F;
  opacity:0;
  pointer-events:none;
  transition:opacity 900ms var(--pw-wipe);
}
.studio-hero-showcase .studio-showcase-slide.is-leaving::after{opacity:.72}

/* Wipe edge: a single hairline travels with the incoming page */
.pw-edge{
  position:absolute;
  z-index:5;
  top:0;bottom:0;left:0;
  width:100%;
  pointer-events:none;
  opacity:0;
  transform:translate3d(100%,0,0);
}
.pw-edge::before{
  content:"";
  position:absolute;
  top:0;bottom:0;left:0;
  width:1px;
  background:#5DD6FF;
  box-shadow:0 0 18px 2px rgba(93,214,255,.35);
}
.pw-edge.is-run{animation:pwEdge 900ms var(--pw-wipe) both}
@keyframes pwEdge{
  0%{opacity:1;transform:translate3d(100%,0,0)}
  92%{opacity:1}
  100%{opacity:0;transform:translate3d(0,0,0)}
}

/* Design layers land one after another, with depth on pointer move */
.studio-showcase-slide>*{translate:calc(var(--mx,0) * var(--d,4px)) calc(var(--my,0) * var(--d,4px))}
.studio-showcase-slide>small{--d:3px}
.studio-showcase-slide>p{--d:5px}
.studio-showcase-slide>strong{--d:9px}
.studio-showcase-slide>div,
.studio-showcase-slide>span{--d:13px}
.studio-showcase-slide>*:nth-child(2){--n:1}
.studio-showcase-slide>*:nth-child(3){--n:2}
.studio-showcase-slide>*:nth-child(4){--n:3}
.studio-showcase-slide>*:nth-child(5){--n:4}
.studio-showcase-slide>*:nth-child(6){--n:5}
.studio-showcase-slide.is-entering>*{
  animation:pwLayerIn 760ms var(--pw-expo) both;
  animation-delay:calc(260ms + var(--n,0) * 60ms);
}
/* First paint: layers land after the viewport has opened */
.studio-showcase-slide.is-entering.is-first>*{animation-delay:calc(820ms + var(--n,0) * 70ms)}

/* Keep the PSM Karten line clear of the card in the narrower window */
.studio-hero-showcase .studio-showcase-psm p{max-width:56%}
@media(min-width:981px) and (max-width:1180px){
  .studio-hero-showcase .studio-showcase-psm p{max-width:48%}
  .studio-hero-showcase .showcase-psm-card{width:132px;right:20px;bottom:20px;padding:12px}
}

/* Cursor-driven hover states inside the previews */
.showcase-maxima-actions span,
.showcase-orhan-link,
.showcase-psm-card{
  transition:background-color 240ms ease,color 240ms ease,border-color 240ms ease,transform 380ms var(--pw-expo),scale 120ms ease;
}
.showcase-maxima-actions span.is-cursor-hover{background:#a9dfca;color:#0d3557}
.showcase-orhan-link.is-cursor-hover{color:#f0d79a;border-color:#f0d79a;transform:translateX(3px)}
.showcase-psm-card.is-cursor-hover{transform:rotate(-3deg) translateY(-6px)}
[data-cursor-target].is-cursor-press{scale:.95}

.pw-cursor{
  position:absolute;
  z-index:6;
  left:0;top:0;
  width:22px;height:22px;
  pointer-events:none;
  opacity:0;
  transform:translate3d(var(--cx,0px),var(--cy,0px),0);
  transition:opacity 260ms ease;
}
.pw-cursor.is-moving{transition:opacity 260ms ease,transform 1100ms var(--pw-glide)}
.pw-cursor.is-visible{opacity:1}
.pw-cursor svg{
  position:relative;
  z-index:2;
  display:block;
  width:100%;height:100%;
  fill:#fff;
  stroke:#07111F;
  stroke-width:1.4;
  stroke-linejoin:round;
  filter:drop-shadow(0 3px 6px rgba(0,0,0,.35));
  transform-origin:5px 3px;
  transition:transform 120ms ease;
}
.pw-cursor.is-press svg{transform:scale(.84)}
.pw-cursor i{
  position:absolute;
  left:-11px;top:-12px;
  width:32px;height:32px;
  border:1.5px solid rgba(255,255,255,.85);
  border-radius:50%;
  opacity:0;
  transform:scale(.3);
}
.pw-cursor.is-press i{animation:pwClick 560ms var(--pw-expo) both}
.pw-cursor.is-touch svg{display:none}

/* ---------- URL + meta roll ---------- */
.pw-roll{display:block;overflow:hidden}
.pw-roll>i{display:block;font-style:normal}
.studio-showcase-topbar>.pw-roll>i{overflow:hidden;text-overflow:ellipsis}

/* ---------- Project controls: dwell progress ring ---------- */
.studio-hero-showcase .studio-showcase-controls button{position:relative}
.pw-ring{
  position:absolute;
  inset:-4px;
  width:calc(100% + 8px);
  height:calc(100% + 8px);
  pointer-events:none;
  transform:rotate(-90deg);
}
.pw-ring circle{
  fill:none;
  stroke:#5DD6FF;
  stroke-width:1.6;
  stroke-dasharray:100;
  stroke-dashoffset:100;
  opacity:0;
}
.studio-hero-showcase.is-auto .studio-showcase-controls button.is-active .pw-ring circle{
  opacity:1;
  animation:pwRing var(--pw-dwell) linear both;
}
.studio-hero-showcase.is-held .pw-ring circle,
.studio-hero-showcase.is-paused .pw-ring circle{animation-play-state:paused!important}
.studio-hero-showcase .studio-showcase-controls button:active{transform:scale(.94)}

/* ---------- Primary CTA: quick, confident ---------- */
.studio-hero-cta{
  transition:transform 220ms cubic-bezier(.2,.8,.2,1),box-shadow 280ms cubic-bezier(.2,.8,.2,1),background-color 180ms ease;
}
.studio-hero-cta .roll-text-current,
.studio-hero-cta .roll-text-next{transition:transform 340ms cubic-bezier(.7,0,.2,1)}
@media(hover:hover) and (pointer:fine){
  .studio-hero-cta:hover{
    transform:translateY(-2px);
    box-shadow:0 14px 30px -14px rgba(93,214,255,.75);
  }
}
.studio-hero-cta:active{transform:translateY(0) scale(.97);box-shadow:none;transition-duration:90ms}
.psm-hero-secondary:active{transform:translateY(0) scale(.98)}

@keyframes pwViewportIn{
  from{clip-path:inset(48% 0 48% 0 round 26px);opacity:.4}
  45%{opacity:1}
  to{clip-path:inset(0 0 0 0 round 26px);opacity:1}
}
@keyframes pwGrid{
  0%{opacity:0}
  20%,55%{opacity:1}
  100%{opacity:0}
}
@keyframes pwRise{from{opacity:0;transform:translate3d(0,10px,0)}to{opacity:1;transform:none}}
@keyframes pwLayerIn{from{opacity:0;transform:translate3d(28px,0,0)}to{opacity:1;transform:none}}
@keyframes pwClick{
  0%{opacity:.9;transform:scale(.3)}
  100%{opacity:0;transform:scale(1.25)}
}
@keyframes pwRing{from{stroke-dashoffset:100}to{stroke-dashoffset:0}}

/* ---------- Tablet & mobile: preview directly under the headline ---------- */
@media(max-width:980px){
  .hero.studio-hero{align-content:center!important;row-gap:0!important}
  .studio-hero-content{display:contents}
  .studio-hero-content>*{position:relative;z-index:2}
  .studio-hero-eyebrow{order:1}
  .studio-hero-title{order:2}
  .studio-hero .studio-hero-showcase{order:3;margin:26px 0 6px}
  .studio-hero-subline{order:4}
  .studio-hero-support{order:5}
  .studio-hero-actions{order:6}
  .studio-hero-footline{order:7}
  .studio-hero-showcase .studio-showcase-window,
  .studio-hero-showcase .studio-showcase-meta{animation-delay:.18s}
  .studio-hero-showcase .studio-showcase-meta{animation-delay:.8s}
}
@media(max-width:680px){
  :root{--pw-dwell:5200ms}
  .studio-hero .studio-hero-showcase{margin:20px 0 4px}
  .studio-hero-showcase .studio-showcase-slide strong{font-size:clamp(29px,8.6vw,42px)}
  .studio-hero-showcase .showcase-maxima-nav{margin-bottom:22px}
  .studio-hero-showcase .studio-showcase-orhan small{margin-top:30px}
  .studio-hero-showcase .studio-showcase-slide.is-active,
  .studio-hero-showcase .studio-showcase-slide.is-leaving{transition-duration:720ms}
  .studio-showcase-slide::after{transition-duration:720ms}
  .pw-edge.is-run{animation-duration:720ms}
  .studio-hero-showcase .studio-showcase-window{animation-duration:.9s}
  @keyframes pwViewportIn{
    from{clip-path:inset(48% 0 48% 0 round 20px);opacity:.4}
    45%{opacity:1}
    to{clip-path:inset(0 0 0 0 round 20px);opacity:1}
  }
}

/* ---------- Reduced motion: final composition, manual switching ---------- */
@media(prefers-reduced-motion:reduce){
  .studio-hero-showcase .studio-showcase-window,
  .studio-hero-showcase .studio-showcase-meta,
  .studio-showcase-slide>*,
  .pw-grid,
  .pw-ring circle{animation:none!important}
  .pw-grid,.pw-cursor,.pw-ring,.pw-edge{display:none!important}
  .studio-hero-showcase .studio-showcase-slide,
  .studio-hero-showcase .studio-showcase-slide.is-active,
  .studio-hero-showcase .studio-showcase-slide.is-leaving,
  .studio-hero-showcase .studio-showcase-window,
  .studio-showcase-slide::after,
  .studio-hero-cta{transition:none!important}
  .studio-hero-line-mask{padding:0;margin:0}
}