/* Small, visible controls; the work remains the focus. */
.header-tools { display: flex; align-items: center; justify-self: end; gap: .4rem; }
.theme-toggle {
  display: inline-grid; place-items: center; height: 2.7rem; min-width: 2.7rem;
  padding: 0 .7rem; border: 1px solid var(--line); border-radius: .7rem;
  background: transparent; color: var(--ink); cursor: pointer;
  font: 700 .8rem/1 var(--body); transition: background .25s, color .25s, transform .3s;
}
.theme-toggle:hover { background: var(--panel); transform: translateY(-2px) rotate(12deg); }
.theme-toggle svg { width: 1.15rem; height: 1.15rem; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.theme-sun { display: none; }
[data-theme="dark"] .theme-moon { display: none; }
[data-theme="dark"] .theme-sun { display: block; }

:root { --player-yellow: #ffd735; }

/* The yellow play mark sits over the thumbnail, then gets out of the footage's way. */
.film-card .video-trigger .play-button {
  display: grid !important; z-index: 3; width: clamp(2.7rem, 4vw, 3.5rem); height: clamp(2.7rem, 4vw, 3.5rem);
  background: var(--player-yellow); color: #14202b; opacity: 1;
  box-shadow: 0 .35rem 1.4rem #0008, 0 0 0 .35rem #ffd73532;
  transition: opacity .35s ease, transform .5s cubic-bezier(.16,1,.3,1), box-shadow .45s ease;
}
.film-card .video-trigger .play-button::before {
  display: block; inset: -.42rem; border: 1px solid #ffd735b5; border-top-color: transparent;
  opacity: .7; animation: player-orbit 9s linear infinite;
}
.film-card .video-trigger:hover .play-button,
.film-card .video-trigger:focus-visible .play-button {
  background: var(--player-yellow); box-shadow: 0 .45rem 1.7rem #0009, 0 0 0 .62rem #ffd73532;
  transform: translate(-50%, -50%) scale(1.08);
}
.film-card .video-trigger.is-hover-preview .play-button { opacity: 0; transform: translate(-50%, -50%) scale(.75); }
@keyframes player-orbit { to { transform: rotate(360deg); } }
.film-card .video-trigger .preview-label { left: .8rem; bottom: .8rem; font-size: .75rem; }
.film-card .video-trigger .thumbnail-fallback {
  inset: 0; display: grid; place-items: center; padding: 1rem;
  background: radial-gradient(circle at 72% 24%, color-mix(in srgb, var(--frame-accent), transparent 75%), transparent 48%),
    linear-gradient(135deg, #193047, #101d2a);
  color: #e8f1ff; font-size: clamp(2rem, 4vw, 4.5rem); font-weight: 800;
  letter-spacing: -.065em; line-height: 1; text-align: center;
}
.film-card .video-trigger .thumbnail-fallback::after {
  position: absolute; inset: 1rem; border: 1px solid color-mix(in srgb, var(--frame-accent), transparent 65%);
  border-radius: .3rem; content: ""; pointer-events: none;
}
.film-card .video-trigger { cursor: pointer; }
.film-card .video-trigger::after {
  inset: auto 0 0; height: 3px; border: 0;
  background: var(--player-yellow); content: ""; opacity: .95;
  transform: scaleX(.22); transform-origin: left;
  transition: transform .65s cubic-bezier(.16,1,.3,1);
}
.film-card .video-trigger:hover::after, .film-card .video-trigger:focus-visible::after,
.film-card .video-trigger.is-hover-preview::after { transform: scaleX(1); }
.film-card .video-trigger::before {
  display: block; z-index: 3; left: -70%; right: auto; width: 45%;
  background: linear-gradient(105deg, transparent, #ffd73530, transparent);
  opacity: 0; transform: skewX(-15deg); transition: transform .85s cubic-bezier(.16,1,.3,1), opacity .3s;
}
.film-card .video-trigger:hover::before, .film-card .video-trigger:focus-visible::before {
  opacity: 1; transform: skewX(-15deg) translateX(450%);
}
.film-card .video-trigger.is-hover-preview::before { opacity: 0; }
.direct-player .direct-play {
  inset: 0; width: 100%; height: 100%; min-width: 0; min-height: 0;
  padding: 0; transform: none; border: 0; border-radius: inherit;
  background: transparent; box-shadow: none !important; opacity: 1; cursor: pointer;
}
.direct-player .direct-play:hover { background: transparent; box-shadow: none; }
.direct-player video[controls] + .direct-play { display: none !important; }
.direct-player .direct-play span {
  position: absolute; top: 50%; left: 50%; display: grid; place-items: center;
  width: clamp(2.65rem, 4vw, 3.3rem); height: clamp(2.65rem, 4vw, 3.3rem);
  border-radius: 50%; background: var(--player-yellow); color: #14202b;
  box-shadow: 0 .35rem 1.4rem #0008, 0 0 0 .35rem #ffd73536;
  transform: translate(-50%, -50%); transition: opacity .35s, transform .45s, box-shadow .45s;
}
.direct-player .direct-play svg { display: block; width: 40%; height: 40%; fill: currentColor; }
.direct-player:hover .direct-play span, .direct-player .direct-play:focus-visible span {
  transform: translate(-50%, -50%) scale(1.08); box-shadow: 0 .4rem 1.6rem #0009, 0 0 0 .6rem #ffd73530;
}
.direct-player.is-previewing .direct-play span { opacity: 0; transform: translate(-50%, -50%) scale(.75); }
.direct-player .direct-play:focus-visible { opacity: 1; outline: 3px solid #a5c1ff; outline-offset: -5px; }
.direct-card:hover .direct-player { transform: none; }
.direct-card { overflow: hidden; }
.direct-card::after { content: ""; display: block; width: 22%; height: 2px; margin: .42rem .25rem .12rem; background: var(--reel-accent); transition: width .5s cubic-bezier(.16,1,.3,1); }
.direct-card:hover::after { width: calc(100% - .5rem); }

/* Ink / midnight mode keeps artwork and original logos unchanged. */
[data-theme="dark"] { color-scheme: dark; --bg: #101820; --panel: #202d3a; --panel-2: #1a2733; --ink: #f0f4f8; --muted: #afbfcc; --line: #e3edff29; --blue: #91b5ff; --yellow: #a9c2f8; }
[data-theme="dark"] body { background: #101820; }
[data-theme="dark"] .site-header { background: #121d27ed; }
[data-theme="dark"] .nav-links { background: transparent; }
[data-theme="dark"] .nav-links a.is-active { background: #365db8; color: #fff; }
[data-theme="dark"] .nav-links a.is-active .nav-icon { color: #fff; }
[data-theme="dark"] .identity-mark { color: #fff; background: #365db8; }
[data-theme="dark"] .hero::before { background: radial-gradient(ellipse, #5278d323, transparent 66%); }
[data-theme="dark"] .opening-board::before { background: #1d3041; border-color: #668cc047; }
[data-theme="dark"] .opening-frame, [data-theme="dark"] .about-portrait, [data-theme="dark"] .comparison-card { background: #1e2c39; border-color: #dae6fb2b; color: #f0f4f8; }
[data-theme="dark"] #scenes { background: radial-gradient(circle at 88% 10%, #1f3b55, transparent 40%), #101820; }
[data-theme="dark"] .partners { background: #192632; }
[data-theme="dark"] .logo-set figure { background: #fff; }
[data-theme="dark"] .direct-videos { background: linear-gradient(130deg, #172838, #263346 58%, #2b2941); }
[data-theme="dark"] .stills { background: #14212b; }
[data-theme="dark"] .stills .image-trigger { background: #1f3443; }
[data-theme="dark"] .stills figcaption span, [data-theme="dark"] .about-portrait figcaption strong { color: #edf4fb; }
[data-theme="dark"] .transformation { background: #192a3a; }
[data-theme="dark"] .story-card-blue { background: #21374a; }
[data-theme="dark"] .story-card-yellow { background: #283c52; }
[data-theme="dark"] .story-card p, [data-theme="dark"] .mini-case dt { color: #b4c5d7; }
[data-theme="dark"] .site-footer { background: #182b3e; }
[data-theme="dark"] .site-footer::before { background: radial-gradient(ellipse at var(--contact-x, 70%) 35%, #4776c23a, transparent 55%); }
[data-theme="dark"] .contact-links a, [data-theme="dark"] .contact-links a:first-child { background: #21374a; color: #f0f4f8; }
[data-theme="dark"] .contact-links a:hover { background: #2e4b66; }
[data-theme="dark"] .contact-icon { color: #fff; }
[data-theme="dark"] .pointer-glow { background: radial-gradient(circle, #91b5ff13, transparent 65%); }
[data-theme="dark"] .film-card .video-trigger .preview-label { background: #15212bd9; }

@media (max-width: 760px) {
  .site-header { grid-template-columns: minmax(0,1fr) auto; }
  .header-tools { grid-column: 2; grid-row: 1; gap: .25rem; }
  .theme-toggle { width: 2.35rem; min-width: 2.35rem; height: 2.35rem; padding: 0; }
}
@media (max-width: 480px) {
  .header-tools { gap: .15rem; }
}

/* The original YouTube player takes the thumbnail's place in the same card. */
.film-card.is-playing { align-self: start; }
.film-card > .video-trigger[hidden] { display: none !important; }
.film-card > .inline-video {
  width: 100%; padding: .35rem; aspect-ratio: auto; overflow: visible;
  border: 1px solid var(--player-yellow); border-radius: .75rem;
  background: #111b26; box-shadow: 0 .8rem 2rem #030a1440;
  animation: stage-in .3s cubic-bezier(.16,1,.3,1) both;
}
.inline-video-actions { display: flex; justify-content: flex-end; padding: .4rem .1rem .05rem; }
.film-card .inline-video .inline-close {
  position: static; display: inline-flex; align-items: center; justify-content: center;
  top: auto; right: auto; bottom: auto; left: auto; width: auto; min-width: 2.75rem;
  height: 2.25rem; min-height: 2.25rem; padding: 0 .85rem; aspect-ratio: auto;
  transform: none !important; border: 1px solid #ffffff80; border-radius: 999px;
  background: transparent; color: #fff; box-shadow: none; font: 700 .82rem/1 var(--body);
}
.film-card .inline-video .inline-close:hover, .film-card .inline-video .inline-close:focus-visible {
  background: var(--player-yellow); color: #15202a; border-color: var(--player-yellow);
}
.film-card .inline-video .inline-close::after { display: none; }
.inline-video-frame { position: relative; width: 100%; min-height: 200px; aspect-ratio: 16 / 9; overflow: hidden; border-radius: .5rem; background: #070d14; }
.film-card .inline-video-frame iframe { position: absolute; inset: 0; display: block; width: 100%; height: 100%; border: 0; }
@keyframes stage-in { from { opacity: .5; transform: translateY(1rem) scale(.985); } to { opacity: 1; transform: none; } }

/* Slight movement in the frame, while the artwork remains still and legible. */
.motion-enabled .section-heading.is-visible .section-symbol svg { animation: mark-drift 5s ease-in-out 1.5s infinite alternate; }
.motion-enabled .section-heading.is-visible::after { transform-origin: left; animation: heading-rule .9s cubic-bezier(.16,1,.3,1) both; }
.motion-enabled .opening-board::before { animation: board-breathe 9s ease-in-out 1s infinite alternate; }
.motion-enabled .film-card.reveal.is-visible,
.motion-enabled .direct-card.reveal.is-visible { animation: card-arrive .85s cubic-bezier(.16,1,.3,1) both; }
.motion-enabled .film-card.reveal:nth-child(2).is-visible,
.motion-enabled .direct-card.reveal:nth-child(2).is-visible { animation-delay: .09s; }
.motion-enabled .film-card.reveal:nth-child(3).is-visible,
.motion-enabled .direct-card.reveal:nth-child(3).is-visible { animation-delay: .16s; }
.film-card > .video-trigger { transition-duration: .65s; }
.film-card > .video-trigger:hover, .film-card > .video-trigger:focus-visible { box-shadow: 0 1.2rem 2.5rem #101c2c36, 0 0 0 3px #ffd73570; }
.film-card .video-trigger .preview-label { transition: transform .55s cubic-bezier(.16,1,.3,1), background .3s ease; }
.film-card .video-trigger:hover .preview-label { transform: translateY(-.25rem); background: #182b3ceb; }
.direct-card:hover { box-shadow: 0 1rem 2rem #18232f2d, 0 0 0 2px #ffd73575; }
@keyframes mark-drift { to { transform: rotate(14deg) translateY(-2px); } }
@keyframes heading-rule { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes board-breathe { to { transform: rotate(-2.5deg) translateY(-.25rem); } }
@keyframes card-arrive { from { opacity: .25; translate: 0 1.2rem; } to { opacity: 1; translate: 0 0; } }
@media (prefers-reduced-motion: reduce) {
  .film-card .video-trigger::after, .direct-card::after { transition: none; }
  .film-card .video-trigger .play-button::before { animation: none; }
  .motion-enabled .film-card.reveal.is-visible, .motion-enabled .direct-card.reveal.is-visible { animation: none; }
  .film-card > .inline-video, .motion-enabled .section-heading.is-visible .section-symbol svg,
  .motion-enabled .opening-board::before, .motion-enabled .section-heading.is-visible::after { animation: none; }
}