/* V6 interactive layer - no video sizing changes */

:root {
  --joy-accent: #ff9619;
}

/* Cursor */
@media (hover:hover) and (pointer:fine) {
  body.joy-cursor-on {
    cursor:none;
  }
  body.joy-cursor-on a,
  body.joy-cursor-on button,
  body.joy-cursor-on .thumb-shell {
    cursor:none;
  }

  .joy-cursor {
    position:fixed;
    left:0;
    top:0;
    width:9px;
    height:9px;
    background:var(--joy-accent);
    border-radius:50%;
    box-shadow:
      0 0 10px #ff9619bb,
      0 0 24px #ff961966;
    transform:translate(-50%,-50%);
    pointer-events:none;
    z-index:2147483647;
    opacity:0;
    transition:
      opacity .2s ease,
      width .2s ease,
      height .2s ease;
  }

  .joy-cursor::after {
    content:"";
    position:absolute;
    inset:-8px;
    border:1px solid #ff961977;
    border-radius:50%;
    transition:inset .2s ease;
  }

  .joy-cursor.is-hovering {
    width:17px;
    height:17px;
  }

  .joy-cursor.is-hovering::after {
    inset:-11px;
  }
}

/* Scroll progress */
.joy-progress {
  position:fixed;
  z-index:1000;
  top:0;
  left:0;
  height:3px;
  width:100%;
  background:var(--joy-accent);
  transform:scaleX(0);
  transform-origin:left center;
  pointer-events:none;
  box-shadow:0 0 12px #ff961977;
}

/* Navigation and CTAs */
.navlinks a,
footer a,
.filters button {
  transition:
    color .25s ease,
    background-color .25s ease,
    border-color .25s ease,
    transform .25s ease;
}

.navlinks a:hover {
  color:var(--joy-accent);
}

footer a:hover {
  background:var(--joy-accent);
  color:#111;
  transform:translateY(-3px);
}

.filters button:hover {
  transform:translateY(-2px);
}

/* Heading animation */
.hero h1 {
  animation:joy-hero-enter .85s both;
}

.hero h2,
.hero p {
  animation:joy-hero-enter .9s .12s both;
}

@keyframes joy-hero-enter {
  from {
    opacity:0;
    transform:translateY(24px);
  }
  to {
    opacity:1;
    transform:translateY(0);
  }
}

/* Reveal on scroll */
.joy-reveal {
  opacity:0;
  transform:translateY(24px);
  transition:
    opacity .65s ease,
    transform .65s cubic-bezier(.2,.75,.3,1);
}

.joy-reveal.joy-visible {
  opacity:1;
  transform:translateY(0);
}

/* Cards: no changes to their dimensions */
.gallery .card {
  transition:
    border-color .3s ease,
    box-shadow .3s ease;
}

.gallery .card:hover {
  border-color:#ff961955;
  box-shadow:0 14px 38px #00000033;
}

/* Animate thumbnail only - preserve approved crop */
.thumb-shell {
  isolation:isolate;
}

.thumb-shell .thumb-play {
  transition:
    background-color .2s ease,
    box-shadow .25s ease;
}

.thumb-shell:hover .thumb-play {
  background:#ff9619dd;
  color:#111;
  box-shadow:0 0 25px #ff961944;
}

.joy-click-pulse {
  animation:joy-press .22s ease;
}

@keyframes joy-press {
  50% { filter:brightness(1.2); }
}

/* Accessible keyboard focus */
:focus-visible {
  outline:2px solid var(--joy-accent);
  outline-offset:4px;
}

/* Touch screens use normal controls */
@media (hover:none), (pointer:coarse) {
  .joy-cursor {
    display:none !important;
  }
}

/* Accessibility */
@media (prefers-reduced-motion:reduce) {
  .joy-reveal,
  .joy-reveal.joy-visible {
    opacity:1 !important;
    transform:none !important;
    transition:none !important;
  }

  .hero h1,
  .hero h2,
  .hero p,
  .joy-click-pulse {
    animation:none !important;
  }
}