/* FILM FOCUS — lightweight hover depth and shared-element media transitions. */
:root {
  --film-acid: #c8ff2e;
  --film-ease: cubic-bezier(.22, 1, .36, 1);
}

@property --film-angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

.image-reel,
.motion-drum { --film-dim: 1; }

.image-reel.is-film-hovering .image-frame:not(.is-film-focus),
.motion-drum.is-film-hovering .motion-frame:not(.is-film-focus) {
  filter: none;
  opacity: 1;
}

.image-frame,
.motion-frame {
  isolation: isolate;
  transition-property: border-color, box-shadow, filter, opacity, transform;
  transition-duration: 240ms, 320ms, 320ms, 320ms, 520ms;
  transition-timing-function: ease-out, ease-out, ease-out, ease-out, var(--film-ease);
}

.image-reel-view {
  -webkit-mask-image: none !important;
  mask-image: none !important;
  overflow-clip-margin: 34px;
}

/* Keep every reel frame true to the source artwork. The former base
   brightness filter and edge fade made clear images look muddy on phones. */
.image-frame {
  background: transparent !important;
  box-shadow: none;
}

.image-frame img {
  backface-visibility: hidden;
  filter: none !important;
  image-rendering: auto;
  opacity: 1;
}

.image-frame::before {
  --film-angle: 0deg;
  background: conic-gradient(from var(--film-angle), transparent 0 17%, rgba(205, 255, 64, .12) 24%, #dcff72 30%, transparent 38% 67%, rgba(205, 255, 64, .2) 76%, #baff28 83%, transparent 91% 100%);
  content: "";
  inset: -3px;
  padding: 2px;
  opacity: 0;
  pointer-events: none;
  position: absolute;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  z-index: 7;
}

.image-frame.is-film-focus {
  border-color: var(--film-acid) !important;
  box-shadow: 0 0 0 1px rgba(200, 255, 46, .52), 0 0 30px rgba(180, 238, 43, .2) !important;
  transform: translate3d(0, -10px, 0) scale(1.2) !important;
  z-index: 8;
}

.image-frame.is-film-focus::before {
  animation: film-orbit 1.55s linear infinite;
  opacity: 1;
}

.image-frame img,
.motion-frame img,
.motion-frame video {
  transform: translate3d(var(--film-x, 0), var(--film-y, 0), 0) scale(var(--film-media-scale, 1));
  transition-property: transform, filter, opacity;
  transition-duration: 600ms, 320ms, 180ms;
  transition-timing-function: var(--film-ease), ease-out, ease-out;
}

.image-frame.is-film-focus img,
.motion-frame.is-film-focus img,
.motion-frame.is-film-focus video {
  --film-media-scale: 1.045;
  filter: none;
}

@media (hover: none), (pointer: coarse) {
  .image-reel.is-film-hovering .image-frame:not(.is-film-focus) {
    filter: none !important;
    opacity: 1 !important;
  }

  .image-frame.is-film-focus {
    box-shadow: 0 0 0 1px rgba(200, 255, 46, .46), 0 0 20px rgba(180, 238, 43, .16) !important;
  }
}

.motion-frame {
  --film-frame-scale: 1;
  transform: translateY(var(--film-lift, 0)) translateZ(var(--depth)) rotateY(var(--curve)) scale(var(--scale)) scale(var(--film-frame-scale));
}

.motion-frame.is-film-focus {
  --film-frame-scale: 1.2;
  --film-lift: -10px;
  border-color: var(--film-acid) !important;
  box-shadow: 0 22px 64px rgba(0, 0, 0, .52), 0 0 0 1px rgba(200, 255, 46, .38), 0 0 30px rgba(180, 238, 43, .15) !important;
  z-index: 7;
}

.motion-frame-open::after {
  --film-angle: 0deg;
  background: conic-gradient(from var(--film-angle), transparent 0 17%, rgba(205, 255, 64, .12) 24%, #dcff72 30%, transparent 38% 67%, rgba(205, 255, 64, .2) 76%, #baff28 83%, transparent 91% 100%);
  content: "";
  inset: 2px;
  padding: 2px;
  opacity: 0;
  pointer-events: none;
  position: absolute;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}

.motion-frame.is-film-focus .motion-frame-open::after {
  animation: film-orbit 1.55s linear infinite;
  opacity: 1;
}

.film-focus-flight {
  border: 1px solid rgba(212, 255, 82, .88);
  box-shadow: 0 26px 90px rgba(0, 0, 0, .62), 0 0 36px rgba(180, 238, 43, .17);
  margin: 0;
  object-fit: cover;
  pointer-events: none;
  position: fixed;
  z-index: 9999;
}

.lightbox.film-focus-entering > img,
.lightbox.film-focus-entering > aside,
.lightbox.film-focus-entering > p,
.lightbox.film-focus-entering > button:not(.lightbox-close),
.video-dialog.film-focus-entering > video,
.video-dialog.film-focus-entering > .video-dialog-bar {
  opacity: 0;
}

.lightbox > img,
.lightbox > aside,
.lightbox > p,
.lightbox > button,
.video-dialog > video,
.video-dialog > .video-dialog-bar {
  transition-property: opacity, transform, filter;
  transition-duration: 260ms, 520ms, 360ms;
  transition-timing-function: ease-out, var(--film-ease), ease-out;
}

.lightbox.film-focus-ready > img,
.video-dialog.film-focus-ready > video {
  animation: film-settle 520ms var(--film-ease) both;
}

.lightbox.film-focus-ready > img {
  filter: none !important;
  opacity: 1 !important;
}

.lightbox.film-focus-closing > :not(.film-focus-flight),
.video-dialog.film-focus-closing > :not(.film-focus-flight) {
  opacity: 0 !important;
  transition-duration: 160ms !important;
}

.lightbox[open]::backdrop,
.video-dialog[open]::backdrop {
  animation: film-backdrop-in 320ms ease-out both;
  background: rgba(2, 6, 4, .91);
  backdrop-filter: blur(12px) saturate(.7);
}

.lightbox-close,
.video-dialog button {
  min-height: 44px;
  min-width: 44px;
}

.lightbox-close:active,
.video-dialog button:active { transform: scale(.96); }

.lightbox img.film-focus-swap {
  animation: film-image-swap 300ms var(--film-ease) both;
}

/* Shared archive call-to-action: the same luminous oval carries every discipline. */
.image-archive-entry > a.image-archive-button,
.video-archive-entry > a,
.modeling-archive-entry > a,
.archive-unified-entry > a,
.game-mobile > header > a,
.workflow-entry-button {
  align-items:center !important;
  background:linear-gradient(105deg,#d9ff4d 0%,#d0ff39 48%,#b6ef27 100%) !important;
  border:1px solid rgba(241,255,158,.88) !important;
  border-radius:999px !important;
  box-shadow:0 0 0 1px rgba(227,255,101,.44),0 0 20px rgba(182,238,35,.46),0 0 42px rgba(157,222,29,.24) !important;
  color:#10140d !important;
  display:flex !important;
  justify-content:space-between !important;
  overflow:visible !important;
  position:relative !important;
  text-decoration:none !important;
  z-index:1;
}

.image-archive-entry > a.image-archive-button,
.video-archive-entry > a,
.modeling-archive-entry > a,
.archive-unified-entry > a,
.workflow-entry-button {
  height:58px !important;
  margin:18px 0 0 !important;
  min-height:58px !important;
  padding:7px 8px 7px 25px !important;
  width:340px !important;
}

.workflow-entry-button {
  cursor:default;
  font:700 18px/1.05 var(--site-sans,Arial,sans-serif);
  letter-spacing:-.025em;
}

.image-archive-entry > a.image-archive-button > i,
.video-archive-entry > a > i,
.modeling-archive-entry > a > i,
.archive-unified-entry > a > i,
.game-mobile > header > a > b,
.workflow-entry-button > i {
  align-items:center !important;
  background:#172610 !important;
  border:0 !important;
  border-radius:50% !important;
  color:#e7ff77 !important;
  display:flex !important;
  flex:0 0 42px !important;
  font:400 20px/1 Arial,sans-serif !important;
  font-style:normal !important;
  height:42px !important;
  justify-content:center !important;
  margin:0 !important;
  overflow:hidden !important;
  width:42px !important;
}

.image-archive-entry > a.image-archive-button::before,
.video-archive-entry > a::before,
.modeling-archive-entry > a::before,
.archive-unified-entry > a::before,
.game-mobile > header > a::before,
.workflow-entry-button::before {
  animation:archive-cta-orbit 3.8s linear infinite;
  background:transparent !important;
  border:1.5px solid rgba(209,255,71,.88) !important;
  border-radius:50% !important;
  box-shadow:0 0 13px rgba(194,255,45,.76) !important;
  content:"" !important;
  height:118% !important;
  left:-11% !important;
  opacity:.96 !important;
  pointer-events:none !important;
  position:absolute !important;
  top:-12% !important;
  transform:rotate(-8deg) !important;
  width:122% !important;
  z-index:-1 !important;
}

.image-archive-entry > a.image-archive-button::after,
.video-archive-entry > a::after,
.modeling-archive-entry > a::after,
.archive-unified-entry > a::after,
.game-mobile > header > a::after,
.workflow-entry-button::after {
  background:radial-gradient(circle,#fff 0 18%,#e3ff6a 28%,transparent 70%) !important;
  border:0 !important;
  border-radius:50% !important;
  box-shadow:0 0 14px 4px rgba(209,255,71,.72) !important;
  content:"" !important;
  height:7px !important;
  left:-8% !important;
  opacity:.95 !important;
  pointer-events:none !important;
  position:absolute !important;
  top:4px !important;
  width:7px !important;
  z-index:2 !important;
}

@keyframes film-scan {
  0% { transform: translateX(-105%); }
  100% { transform: translateX(105%); }
}

@keyframes film-orbit {
  to { --film-angle: 360deg; }
}

@keyframes film-backdrop-in {
  from { background: rgba(2, 6, 4, 0); backdrop-filter: blur(0) saturate(1); }
  to { background: rgba(2, 6, 4, .91); backdrop-filter: blur(12px) saturate(.7); }
}

@keyframes film-settle {
  from { filter: none; transform: scale(.985); }
  to { filter: none; transform: scale(1); }
}

@keyframes film-image-swap {
  from { filter: blur(3px); opacity: .55; transform: translateY(5px) scale(.995); }
  to { filter: none; opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes archive-cta-orbit {
  0%,100% { transform:rotate(-8deg) scale(1); opacity:.92; }
  50% { transform:rotate(-5deg) scale(1.022); opacity:1; }
}

@media (max-width: 700px), (pointer: coarse) {
  .image-frame.is-film-focus,
  .motion-frame.is-film-focus { transform: none !important; }
  .image-frame img,
  .motion-frame img,
  .motion-frame video { --film-x: 0px !important; --film-y: 0px !important; }
}

/* Mobile visual archive: keep all four film lanes readable in one viewport.
   These rules affect the image archive only; desktop framing and source-image
   clarity remain untouched. */
@media (max-width: 700px) {
  .image-archive {
    min-height: 0 !important;
    padding-bottom: 10px !important;
    padding-top: 8px !important;
  }

  /* Every archive intro uses the same compact mobile rhythm: title + oval entry. */
  .archive-unified-head {
    align-items: start !important;
    display: grid !important;
    gap: 2px !important;
    grid-template-columns: 1fr !important;
    grid-template-rows: 56px 48px !important;
    height: 120px !important;
    min-height: 120px !important;
    padding: 7px 18px !important;
  }

  .archive-unified-head h2 {
    align-self: center !important;
    font-size: clamp(34px, 9.5vw, 42px) !important;
    line-height: .78 !important;
    margin: 0 !important;
    white-space: normal !important;
  }

  .image-archive-head > div:last-child,
  .video-archive-status,
  .modeling-archive-status {
    display: none !important;
  }

  .image-archive-head .image-archive-entry,
  .video-archive-entry,
  .modeling-archive-entry,
  .archive-unified-entry {
    align-self: end !important;
    display: block !important;
    grid-row: 2 !important;
  }

  .image-archive-entry > p,
  .video-archive-entry > p,
  .modeling-archive-entry > p,
  .archive-unified-entry > p,
  .image-archive-entry > a:not(.image-archive-button),
  .video-archive-entry > span,
  .modeling-archive-entry > span,
  .archive-unified-entry > span {
    display: none !important;
  }

  .image-archive-entry > a.image-archive-button,
  .video-archive-entry > a,
  .modeling-archive-entry > a,
  .archive-unified-entry > a,
  .game-mobile > header > a,
  .workflow-entry-button {
    background:linear-gradient(105deg,#d9ff4d 0%,#d0ff39 48%,#b6ef27 100%) !important;
    border:1px solid rgba(241,255,158,.88) !important;
    border-radius: 999px !important;
    box-shadow:0 0 0 1px rgba(227,255,101,.44),0 0 18px rgba(182,238,35,.42),0 0 38px rgba(157,222,29,.22) !important;
    color:#10140d !important;
    height: 48px !important;
    margin: 0 !important;
    min-height: 48px !important;
    overflow:visible !important;
    padding: 5px 7px 5px 20px !important;
    position:relative !important;
    width: min(310px, 84vw) !important;
    z-index:1;
  }

  .image-archive-entry > a.image-archive-button::before,
  .video-archive-entry > a::before,
  .modeling-archive-entry > a::before,
  .archive-unified-entry > a::before,
  .game-mobile > header > a::before,
  .workflow-entry-button::before {
    animation:archive-cta-orbit 3.8s linear infinite;
    background:transparent !important;
    border:1.5px solid rgba(209,255,71,.88) !important;
    border-radius:50% !important;
    box-shadow:0 0 13px rgba(194,255,45,.76) !important;
    content:"" !important;
    display:block !important;
    height:118% !important;
    left:-11% !important;
    opacity:.96 !important;
    pointer-events:none !important;
    position:absolute !important;
    top:-12% !important;
    transform:rotate(-8deg) !important;
    width:122% !important;
    z-index:-1 !important;
  }

  .image-archive-entry > a.image-archive-button::after,
  .video-archive-entry > a::after,
  .modeling-archive-entry > a::after,
  .archive-unified-entry > a::after,
  .game-mobile > header > a::after,
  .workflow-entry-button::after {
    background:radial-gradient(circle,#fff 0 18%,#e3ff6a 28%,transparent 70%) !important;
    border:0 !important;
    border-radius:50% !important;
    box-shadow:0 0 14px 4px rgba(209,255,71,.72) !important;
    content:"" !important;
    display:block !important;
    height:7px !important;
    left:-8% !important;
    opacity:.95 !important;
    pointer-events:none !important;
    position:absolute !important;
    top:4px !important;
    width:7px !important;
    z-index:2 !important;
  }

  .image-archive-entry > a.image-archive-button strong,
  .video-archive-entry > a strong,
  .modeling-archive-entry > a strong,
  .archive-unified-entry > a strong,
  .game-mobile > header > a,
  .workflow-entry-button { font-size: 16px !important; }

  .image-archive-entry > a.image-archive-button i,
  .video-archive-entry > a i,
  .modeling-archive-entry > a i,
  .archive-unified-entry > a i {
    flex-basis: 38px !important;
    font-size: 17px !important;
    height: 38px !important;
    width: 38px !important;
  }

  .image-reels { gap: 0 !important; }

  .image-reel { --frame-height: 72px !important; }
  .image-reel--tall { --frame-height: 86px !important; }

  .image-reel-loop {
    padding: 7px 4px 9px !important;
  }

  .image-reel-loop::before,
  .image-reel-loop::after { height: 7px !important; }

  .image-frame {
    width: clamp(68px, calc(var(--frame-height) * var(--ratio)), 160px) !important;
  }

  .image-archive-link { display: none !important; }
}


@media (prefers-reduced-motion: reduce) {
  .film-focus-flight { display: none; }
  .image-frame::before,
  .motion-frame-open::after { animation: none !important; }
  .lightbox.film-focus-entering > *,
  .video-dialog.film-focus-entering > * { opacity: 1; }
}