/* Cinematic motion layer. Paired with /js/portfolio-motion.js.
   Nothing here hides content unless <html> carries .pm-js, which the inline
   bootstrap adds only when JavaScript runs and reduced motion is off. */

/* ---------- 1. Hide-before-reveal (JavaScript gated) ---------- */
html.pm-js [data-motion][data-motion]:not(.pm-done):not([data-motion="marquee"]):not([data-motion="parallax"]):not([data-motion="line"]):not([data-motion="hero-bg"]) {
  opacity: 0 !important;
}

html.pm-js .pm-word,
html.pm-js .pm-char {
  display: inline-block;
  will-change: transform, opacity;
}

html.pm-ready .pm-done .pm-word,
html.pm-ready .pm-done .pm-char {
  will-change: auto;
}

/* Hero portrait veil: a panel that wipes off the background image. */
html.pm-js [data-motion="hero-bg"] {
  position: relative;
}

html.pm-js [data-motion="hero-bg"]::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: var(--portfolio-home-bg, #0f0f0f);
  transform-origin: 100% 50%;
  transform: scaleX(var(--pm-veil, 1));
  pointer-events: none;
}

[data-motion="unmask"],
[data-motion="parallax"] {
  overflow: hidden;
}

[data-motion="parallax"] img {
  transform: scale(1.18);
  will-change: transform;
}

/* About timeline line, drawn by scroll position (--pm-line is tweened). */
[data-motion="line"] {
  position: relative;
}

html.pm-js [data-motion="line"]::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 2px;
  background: linear-gradient(180deg, #fd5b38, rgba(253, 91, 56, 0.15));
  transform-origin: 50% 0;
  transform: scaleY(var(--pm-line, 0));
  pointer-events: none;
}

/* ---------- 2. Curtain and branded intro ---------- */
#pm-curtain {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: none;
  pointer-events: none;
  will-change: clip-path;
}

html.pm-js #pm-curtain {
  display: block;
  clip-path: inset(0% 0% 100% 0%);
}

html.pm-js.pm-intro #pm-curtain,
html.pm-js.pm-cover #pm-curtain {
  clip-path: inset(0% 0% 0% 0%);
  pointer-events: auto;
}

.pm-curtain-panel {
  position: absolute;
  inset: 0;
  background: #0e0d0c;
}

.pm-curtain-panel::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 4px;
  background: #fd5b38;
}

/* ---------- Cross-document page transition: the old page zooms away, the new one settles in ---------- */
@media (prefers-reduced-motion: no-preference) {
  @view-transition {
    navigation: auto;
  }

  ::view-transition-image-pair(root) {
    isolation: auto;
  }

  ::view-transition-old(root),
  ::view-transition-new(root) {
    mix-blend-mode: normal;
    animation-fill-mode: both;
  }

  ::view-transition-old(root) {
    animation: pm-page-out 0.7s cubic-bezier(0.76, 0, 0.24, 1);
  }

  ::view-transition-new(root) {
    animation: pm-page-in 0.7s cubic-bezier(0.76, 0, 0.24, 1);
    box-shadow: 0 -4px 0 0 #fd5b38, 0 -24px 60px rgba(0, 0, 0, 0.55);
  }
}

/* Slide: the new page rises over the current one (the direction the curtain used), while
   the old page drifts up a little and dims underneath. Nothing goes dark in between. */
@keyframes pm-page-out {
  from { transform: translateY(0); opacity: 1; }
  to { transform: translateY(-12%); opacity: 0.55; }
}

@keyframes pm-page-in {
  from { transform: translateY(100%); }
  to { transform: translateY(0); }
}

/* With view transitions the curtain only shows its rising edge at the bottom while the
   next page loads; the orange line marks the top of that edge. */
html.pm-vt .pm-curtain-panel::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 91%;
  height: 4px;
  background: #fd5b38;
}

html.pm-vt .pm-curtain-panel::after {
  display: none;
}

html.pm-vt:not(.pm-intro) #pm-curtain {
  pointer-events: none;
}

/* Small mark shown while moving between pages (not during the first-visit intro). */
.pm-curtain-mark {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 44px;
  height: 44px;
  margin: -22px 0 0 -22px;
  opacity: 0;
  transform: scale(0.9);
}

html.pm-cover:not(.pm-intro) .pm-curtain-mark,
html.pm-leaving:not(.pm-intro) .pm-curtain-mark {
  animation: pm-mark-pulse 1.1s ease-in-out 0.15s infinite alternate;
}

@keyframes pm-mark-pulse {
  from { opacity: 0.45; transform: scale(0.92); }
  to { opacity: 0.9; transform: scale(1); }
}

/* Press feedback: buttons and button-like links settle under the pointer/finger. */
.butn,
.butn-crev,
.webfolio-button,
.portfolio-footer-contact-button,
.portfolio-hero-copy-button,
.contact-copy-button,
.contact-form button,
.ss-chat-button,
#ssChatLauncher,
.ss-chat-dialog-button,
.portfolio-navbar-toggle,
.navbar-toggler {
  transition: transform 0.18s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.18s ease;
}

.butn:active,
.butn-crev:active,
.webfolio-button:active,
.portfolio-footer-contact-button:active,
.portfolio-hero-copy-button:active,
.contact-copy-button:active,
.contact-form button:active,
.ss-chat-button:active,
#ssChatLauncher:active,
.ss-chat-dialog-button:active,
.portfolio-navbar-toggle:active,
.navbar-toggler:active,
a.pm-pressed {
  transform: scale(0.96);
  opacity: 0.85;
}

html.pm-leaving a.pm-pressed {
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.35s ease;
}

.pm-intro-stage {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: 0 16px;
  opacity: 0;
}

.pm-intro-mark {
  position: relative;
  display: grid;
  place-items: center;
  width: 108px;
  height: 108px;
}

.pm-intro-mark svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.pm-intro-logo {
  position: relative;
  width: 64px;
  height: 64px;
  opacity: 0;
}

.pm-intro-ring {
  fill: none;
  stroke: rgba(255, 255, 255, 0.28);
  stroke-width: 2;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}

.pm-intro-name {
  margin: 0;
  padding: 0.08em 0;
  overflow: hidden;
  color: #fff;
  font: 700 clamp(30px, 6vw, 60px) / 1 "Barlow Condensed", "Arial Narrow", Arial, sans-serif;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.pm-intro-letter {
  display: inline-block;
  opacity: 0;
  transform: translateY(110%);
}

.pm-intro-space {
  display: inline-block;
  width: 0.32em;
}

.pm-intro-role {
  margin: 0;
  color: #fd5b38;
  font: 600 13px / 1 "Barlow Condensed", "Arial Narrow", Arial, sans-serif;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  opacity: 0;
}

.pm-intro-bar {
  width: 160px;
  height: 2px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.12);
}

.pm-intro-bar i {
  display: block;
  height: 100%;
  background: #fd5b38;
  transform-origin: 0 50%;
  transform: scaleX(0);
}

/* ---------- 3. Custom cursor (fine pointers only, added by JS) ---------- */
#pm-cursor {
  display: none;
}

html.pm-cursor #pm-cursor {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100001;
  display: block;
  pointer-events: none;
  mix-blend-mode: difference;
  transition: opacity 0.25s ease;
}

html.pm-cursor #pm-cursor.is-hidden {
  opacity: 0;
}

html.pm-cursor #pm-cursor.is-label {
  mix-blend-mode: normal;
}

html.pm-cursor,
html.pm-cursor body,
html.pm-cursor a,
html.pm-cursor button,
html.pm-cursor label,
html.pm-cursor [role="button"],
html.pm-cursor summary {
  cursor: none !important;
}

html.pm-cursor :is(input, textarea, select, iframe) {
  cursor: auto !important;
}

.pm-cursor-dot {
  position: absolute;
  top: -4px;
  left: -4px;
  will-change: transform;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #fff;
  transition: opacity 0.2s ease;
}

#pm-cursor.is-label .pm-cursor-dot,
#pm-cursor.is-link .pm-cursor-dot {
  opacity: 0;
}

.pm-cursor-ring {
  position: absolute;
  top: -20px;
  left: -20px;
  width: 40px;
  height: 40px;
  will-change: transform;
}

.pm-cursor-ring i {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  border: 1.5px solid #fff;
  border-radius: 50%;
  font-style: normal;
  transform: scale(1);
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), background-color 0.35s ease, border-color 0.35s ease;
}

#pm-cursor.is-link .pm-cursor-ring i {
  background: rgba(255, 255, 255, 0.18);
  transform: scale(1.5);
}

#pm-cursor.is-down .pm-cursor-ring i {
  transform: scale(0.8);
}

#pm-cursor.is-label .pm-cursor-ring i {
  border-color: #fd5b38;
  background: #fd5b38;
  transform: scale(2);
}

.pm-cursor-label {
  color: #121212;
  font: 700 7px / 1 "Barlow Condensed", "Arial Narrow", Arial, sans-serif;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0;
  transition: opacity 0.25s ease;
}

#pm-cursor.is-label .pm-cursor-label {
  opacity: 1;
}

/* ---------- 4. Micro-interactions ---------- */
.pm-underline {
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-size: 0% 1px;
  background-position: 100% 100%;
  transition: background-size 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

.pm-underline.pm-underline-accent {
  background-image: linear-gradient(#fd5b38, #fd5b38);
  background-size: 0% 2px;
}

.pm-underline:hover,
.pm-underline:focus-visible {
  background-size: 100% 1px;
  background-position: 0% 100%;
}

.pm-underline.pm-underline-accent:hover,
.pm-underline.pm-underline-accent:focus-visible {
  background-size: 100% 2px;
}

.site-header .portfolio-navbar-mark img {
  transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}

.site-header .portfolio-navbar-brand:hover .portfolio-navbar-mark img,
.site-header .portfolio-navbar-brand:focus-visible .portfolio-navbar-mark img {
  transform: rotate(360deg);
}

.portfolio-footer-social svg {
  transition: transform 0.3s ease;
}

.portfolio-footer-social:hover svg,
.portfolio-footer-social:focus-visible svg {
  animation: pm-wiggle 0.6s ease-in-out;
}

@keyframes pm-wiggle {
  0%, 100% { transform: rotate(0deg) scale(1); }
  25% { transform: rotate(-12deg) scale(1.15); }
  50% { transform: rotate(10deg) scale(1.15); }
  75% { transform: rotate(-6deg) scale(1.1); }
}

.pm-zoom {
  overflow: hidden;
}

.pm-zoom img {
  transition: transform 1.2s cubic-bezier(0.22, 1, 0.36, 1);
}

.pm-zoom:hover img,
.pm-zoom:focus-within img {
  transform: scale(1.06);
}

[data-tilt] {
  position: relative;
  transform-style: preserve-3d;
}

[data-tilt]::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background: radial-gradient(circle at var(--pm-mx, 50%) var(--pm-my, 50%), rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0) 55%);
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
}

[data-tilt]:hover::after {
  opacity: 1;
}

.contact-form label > span {
  display: inline-block;
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), color 0.3s ease;
}

.contact-form label:focus-within > span {
  color: #fd5b38;
  transform: translateY(-2px);
}

.contact-form :is(input, textarea):focus-visible {
  box-shadow: 0 0 0 4px rgba(253, 91, 56, 0.22);
  transition: box-shadow 0.3s ease;
}

.contact-form input[type="checkbox"]:checked {
  animation: pm-pop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes pm-pop {
  0% { transform: scale(0.6); }
  60% { transform: scale(1.25); }
  100% { transform: scale(1); }
}

.portfolio-footer-contact-button.is-copied,
.portfolio-hero-copy-button.is-copied,
.contact-copy-button.is-copied {
  animation: pm-pop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ---------- 5. Chat widget ---------- */
/* Desktop only: below 1101px the widget draws its icon with ::before/::after. */
@media (min-width: 1101px) {
  .ss-chat-launcher::before {
    content: "";
    position: absolute;
    inset: -3px;
    border: 2px solid #fd5b38;
    border-radius: inherit;
    opacity: 0;
    animation: pm-ring 2.8s ease-out infinite;
    pointer-events: none;
  }

  .ss-chat-launcher:hover::before,
  .ss-chat-panel.is-open ~ .ss-chat-launcher::before,
  .ss-chat-launcher[aria-expanded="true"]::before {
    animation: none;
  }
}

@keyframes pm-ring {
  0% { transform: scale(1); opacity: 0.8; }
  70% { transform: scale(1.45); opacity: 0; }
  100% { transform: scale(1.45); opacity: 0; }
}

.ss-chat-panel {
  transition: transform 0.55s cubic-bezier(0.34, 1.4, 0.64, 1), opacity 0.3s ease, visibility 0s linear 0.3s;
}

.ss-chat-panel.is-open {
  transition: transform 0.55s cubic-bezier(0.34, 1.4, 0.64, 1), opacity 0.3s ease, visibility 0s;
}

.ss-chat-message.is-new {
  animation: pm-message 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes pm-message {
  from { opacity: 0; transform: translateY(12px) scale(0.97); }
  to { opacity: 1; transform: none; }
}

.ss-chat-typing {
  display: none;
  align-items: center;
  gap: 5px;
  width: max-content;
  margin-top: 11px;
  padding: 10px 12px;
  border: 1px solid #39322f;
  border-radius: 4px;
  background: #1c1816;
}

.ss-chat-panel.is-busy .ss-chat-typing {
  display: flex;
}

.ss-chat-typing span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #fd5b38;
  animation: pm-dots 1.1s ease-in-out infinite;
}

.ss-chat-typing span:nth-child(2) { animation-delay: 0.15s; }
.ss-chat-typing span:nth-child(3) { animation-delay: 0.3s; }

@keyframes pm-dots {
  0%, 80%, 100% { transform: translateY(0); opacity: 0.5; }
  40% { transform: translateY(-5px); opacity: 1; }
}

.ss-chat-chip,
.ss-chat-send,
.ss-chat-live,
.ss-chat-end {
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

.ss-chat-chip:hover,
.ss-chat-send:hover:not(:disabled) {
  transform: translateY(-2px);
}

/* ---------- 6. Reduced motion and touch ---------- */
@media (hover: none), (pointer: coarse) {
  [data-tilt]::after {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  #pm-curtain,
  #pm-cursor {
    display: none !important;
  }

  .pm-curtain-mark {
    animation: none !important;
  }

  [data-motion] {
    opacity: 1 !important;
  }

  [data-motion="parallax"] img {
    transform: none;
  }

  [data-motion="line"]::before {
    transform: none;
  }

  [data-tilt]::after {
    display: none;
  }

  .ss-chat-launcher::before {
    animation: none;
  }

  .pm-underline,
  .pm-zoom img,
  .site-header .portfolio-navbar-mark img,
  .contact-form label > span,
  .ss-chat-panel,
  .ss-chat-chip,
  .ss-chat-send {
    transition: none !important;
  }

  .ss-chat-message.is-new,
  .portfolio-footer-social:hover svg,
  .contact-form input[type="checkbox"]:checked,
  .is-copied {
    animation: none !important;
  }
}