/* Dream Steps — pages/design-video-animation.css
 * Page-specific rules for design/video-animation.html.
 */

.wd-motion {
  width: 100%; height: 100%; display: block; position: relative; overflow: hidden
}
.wd-motion svg {
  display: block; width: 100%; height: 100%
}
.wd-motion-brand {
  background: linear-gradient(135deg, #15151B 0%, #0B0B0E 100%)
}
.wd-motion-explainer {
  background: linear-gradient(135deg, #1F2D3D 0%, #0E1825 100%)
}
.wd-motion-demo {
  background: linear-gradient(135deg, #F7F4EE 0%, #EFEADD 100%)
}
.wd-motion-hero {
  background: linear-gradient(135deg, #2A1F1A 0%, #14100C 100%)
}
.wd-motion-social {
  background: linear-gradient(135deg, #EFEADD 0%, #E0D8C5 100%)
}
.wd-motion-ui {
  background: linear-gradient(160deg, #15151B 0%, #0B0B0E 100%)
}
.wd-grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--warm-line); border-radius: var(--rad-lg); overflow: hidden; box-shadow: var(--shadow-1)
}
@media (max-width: 880px) {
  .wd-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr))
  }
}
.wd-tile {
  background: var(--paper); padding: 40px 32px 36px; transition: background .35s var(--ease); position: relative; min-height: 240px; min-width: 0
}
.fj-thumb {
  aspect-ratio: 5 / 3; background: linear-gradient(135deg, var(--warm) 0%, var(--warm-2) 100%); border-bottom: 1px solid var(--warm-line); display: block
}
.hero-canvas .va-stage {
  position: relative; width: 100%; aspect-ratio: 1 / 1.05; background: linear-gradient(135deg, #0B0B0E 0%, #15151B 100%); border-radius: var(--rad-lg); overflow: hidden; box-shadow: var(--shadow-3)
}
.hero-canvas .va-stage::before {
  content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 80% 20%, rgba(232,67,10,.18) 0%, transparent 55%); pointer-events: none
}
.hero-canvas .va-stage svg.va-curve {
  position: absolute; inset: 0; width: 100%; height: 100%
}
.hero-canvas .va-stage .va-curve-path {
  stroke-dasharray: 600; stroke-dashoffset: 600; animation: vaCurveDraw 1.6s cubic-bezier(.2,.7,.2,1) .25s forwards
}
@keyframes vaCurveDraw {
  to {
    stroke-dashoffset: 0
  }
}
.hero-canvas .va-stage .va-frame {
  opacity: 0; transform: translateY(8px); animation: vaFrameIn .55s cubic-bezier(.16,1,.3,1) forwards
}
@keyframes vaFrameIn {
  to {
    opacity: 1; transform: translateY(0)
  }
}
.hero-canvas .va-stage .va-letter {
  opacity: 0; animation: vaLetterIn .5s cubic-bezier(.16,1,.3,1) forwards
}
@keyframes vaLetterIn {
  to {
    opacity: 1
  }
}
.hero-canvas .va-stage .va-pulse {
  transform-origin: center; animation: vaPulse 3s ease-in-out 2s infinite
}
@keyframes vaPulse {
  0%, 100% {
    opacity: .9; transform: scale(1)
  }
  50% {
    opacity: 1; transform: scale(1.04)
  }
}
.motion-language {
  background: linear-gradient(180deg, #0B0B0E 0%, #15151B 100%); color: #fff; position: relative; overflow: hidden
}
.motion-language::before {
  content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 20% 30%, rgba(232,67,10,.10) 0%, transparent 50%); pointer-events: none
}
.motion-language .container {
  position: relative
}
.motion-language .section-head {
  text-align: center; max-width: 720px; margin: 0 auto 56px
}
.motion-language .section-head .eyebrow {
  color: var(--orange); justify-content: center
}
.motion-language .section-head h2 {
  color: #fff; font-size: var(--t-h2); font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; margin: 16px 0 14px; text-wrap: balance
}
.motion-language .section-head h2 em {
  font-style: normal; color: var(--orange-soft)
}
.motion-language .section-head p {
  font-size: 17px; line-height: 1.55; color: rgba(255,255,255,.65); margin: 0; max-width: 56ch; margin: 0 auto
}
.ml-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; max-width: 920px; margin: 0 auto
}
@media (max-width: 720px) {
  .ml-grid {
    grid-template-columns: 1fr
  }
}
.ml-tile {
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); border-radius: var(--rad-md); padding: 28px; transition: border-color .3s var(--ease), background .3s var(--ease)
}
.ml-tile:hover {
  border-color: rgba(232,67,10,.4); background: rgba(255,255,255,.06)
}
.ml-tile .ml-eyebrow {
  font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--orange); margin-bottom: 14px
}
.ml-tile h3 {
  font-size: 20px; font-weight: 600; letter-spacing: -0.012em; color: #fff; margin: 0 0 10px
}
.ml-tile p {
  font-size: 14.5px; line-height: 1.6; color: rgba(255,255,255,.6); margin: 0 0 22px
}
.ml-tile .ml-visual {
  height: 130px; background: rgba(0,0,0,.25); border: 1px solid rgba(255,255,255,.06); border-radius: var(--rad-sm); padding: 18px; display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden
}
.ml-tile .ml-visual svg {
  width: 100%; height: 100%; display: block
}
.ml-easing svg {
  width: 100%; height: 100%
}
.ml-easing .ec-path {
  stroke-dasharray: 200; animation: mlEcDraw 4s cubic-bezier(.2,.7,.2,1) infinite
}
@keyframes mlEcDraw {
  0% {
    stroke-dashoffset: 200
  }
  40%, 60% {
    stroke-dashoffset: 0
  }
  100% {
    stroke-dashoffset: -200
  }
}
.ml-easing .ec-dot {
  offset-path: path('M 20 90 Q 40 90 80 50 T 180 10'); offset-distance: 0%; animation: mlEcDot 4s cubic-bezier(.2,.7,.2,1) infinite
}
@keyframes mlEcDot {
  0% {
    offset-distance: 0%; opacity: 0
  }
  10% {
    opacity: 1
  }
  50%, 60% {
    offset-distance: 100%; opacity: 1
  }
  70%, 100% {
    offset-distance: 100%; opacity: 0
  }
}
.ml-duration .dc-chip {
  opacity: .7
}
.ml-entrance .le-letter {
  opacity: 1
}
.ml-signature .ls-line {
  stroke-dasharray: 120; stroke-dashoffset: 0
}
.ml-signature .ls-dot {
  opacity: 1
}
.portfolio-card .pc-svg-mark svg [data-motion="orbit"] {
  transform-origin: center; animation: pcOrbitIdle 6s linear infinite paused
}
.portfolio-card:hover .pc-svg-mark svg [data-motion="orbit"] {
  animation-play-state: running
}
@keyframes pcOrbitIdle {
  to {
    transform: rotate(360deg)
  }
}
.portfolio-card .pc-svg-mark svg [data-motion="pulse"] {
  transform-origin: center; animation: pcPulseIdle 2.4s ease-in-out infinite paused
}
.portfolio-card:hover .pc-svg-mark svg [data-motion="pulse"] {
  animation-play-state: running
}
@keyframes pcPulseIdle {
  0%, 100% {
    opacity: .55
  }
  50% {
    opacity: 1
  }
}
.portfolio-card .pc-svg-mark svg [data-motion="drift"] {
  animation: pcDriftIdle 3s ease-in-out infinite paused
}
.portfolio-card:hover .pc-svg-mark svg [data-motion="drift"] {
  animation-play-state: running
}
@keyframes pcDriftIdle {
  0%, 100% {
    transform: translateY(0)
  }
  50% {
    transform: translateY(-3px)
  }
}
.portfolio-card .pc-svg-mark svg [data-motion="rotate"] {
  transform-origin: center; animation: pcRotateIdle 4s linear infinite paused
}
.portfolio-card:hover .pc-svg-mark svg [data-motion="rotate"] {
  animation-play-state: running
}
@keyframes pcRotateIdle {
  to {
    transform: rotate(360deg)
  }
}
.portfolio-card .pc-svg-mark svg [data-motion="stagger"] {
  opacity: 0; animation: pcStaggerIdle 3.2s ease-in-out infinite paused
}
.portfolio-card:hover .pc-svg-mark svg [data-motion="stagger"] {
  animation-play-state: running
}
.portfolio-card .pc-svg-mark svg [data-motion="stagger"]:nth-child(2) {
  animation-delay: .08s
}
.portfolio-card .pc-svg-mark svg [data-motion="stagger"]:nth-child(3) {
  animation-delay: .16s
}
.portfolio-card .pc-svg-mark svg [data-motion="stagger"]:nth-child(4) {
  animation-delay: .24s
}
.portfolio-card .pc-svg-mark svg [data-motion="stagger"]:nth-child(5) {
  animation-delay: .32s
}
@keyframes pcStaggerIdle {
  0% {
    opacity: 0
  }
  20%, 70% {
    opacity: 1
  }
  90%, 100% {
    opacity: 0
  }
}
.portfolio-card::after {
  content: ""; position: absolute; right: 18px; bottom: 18px; width: 22px; height: 22px; background: rgba(255,255,255,.12); border-radius: 50%; display: grid; place-items: center; pointer-events: none; transition: background .3s var(--ease)
}
.portfolio-card:hover::after {
  background: var(--orange)
}
.portfolio-card::before {
  content: "▶"; position: absolute; right: 23px; bottom: 22px; font-size: 9px; color: rgba(255,255,255,.9); pointer-events: none; z-index: 2; transition: color .3s var(--ease)
}