/* Mastershot deploy fixes — loaded last. Keeps the original design, repairs
   readability, mobile menu layout, anchors and motion performance. */

/* 1. Keep the fixed header (and the open menu inside it) above the dim layer. */
.site-header { z-index:13; }

/* 2. Anchor links should not land under the fixed header. */
html { scroll-padding-top:96px; }
section[id] { scroll-margin-top:96px; }

/* 3. Hero headline legibility + small-screen fitting. */
.hero h1 { text-shadow:0 2px 30px rgba(0,0,0,.55), 0 1px 2px rgba(0,0,0,.45); }
.hero h1 span { color:#ff6a45; }
@media (max-width:800px) {
  .hero-filmstrip { opacity:.42; }
  .hero-overlay {
    background:
      linear-gradient(0deg, rgba(4,5,5,.96) 0%, rgba(4,5,5,.80) 42%, rgba(4,5,5,.36) 72%, rgba(4,5,5,.18) 100%),
      linear-gradient(90deg, rgba(4,5,5,.72), rgba(4,5,5,.22) 62%, rgba(4,5,5,.08));
  }
  .hero h1 { font-size:clamp(34px,10.6vw,64px); line-height:1.02; letter-spacing:-.05em; }
  .hero-content { width:calc(100vw - 36px); }
  .hero-intro { font-size:15px; }
}

/* 4. Work cards: text must stay readable over busy posters. */
.work-card::after,
.other-grid .work-card::after {
  background:linear-gradient(0deg, rgba(0,0,0,.96) 0%, rgba(0,0,0,.82) 18%, rgba(0,0,0,.42) 40%, rgba(0,0,0,0) 66%);
}
.work-card-content .type { color:#e2f57a; text-shadow:0 1px 12px rgba(0,0,0,.9); }
.work-card h3 { text-shadow:0 1px 18px rgba(0,0,0,.9), 0 1px 2px rgba(0,0,0,.7); }
.work-card p { color:rgba(242,240,233,.86); text-shadow:0 1px 10px rgba(0,0,0,.85); }
.work-card .role { color:rgba(242,240,233,.8); text-shadow:0 1px 10px rgba(0,0,0,.85); }
.play-hint { backdrop-filter:none !important; background:rgba(6,7,7,.55) !important; }

/* 5. Mobile menu: one column, readable text, no QR/poster overlap. */
@media (max-width:800px) {
  body.nav-open .main-nav {
    grid-template-columns:1fr;
    align-content:start;
    gap:18px;
    padding:96px 22px 40px;
    overflow:auto;
  }
  body.nav-open .main-nav a { font-size:clamp(40px,11vw,60px); line-height:1; }
  .nav-feature { grid-template-columns:1fr; gap:18px; align-items:start; }
  .nav-preview { width:100%; height:24vh; min-height:160px; }
  .nav-preview span { left:16px; bottom:14px; font-size:11px; }
  .nav-info { width:100%; font-size:13px; line-height:1.6; }
  .nav-info p { margin-bottom:8px; }
  .nav-info .nav-info-title { font-size:14px; letter-spacing:.08em; }
  .nav-contact { margin-top:12px !important; padding-top:12px; }
  .nav-contact-qr { width:84px; height:84px; }
}

/* 6. Contact headline: stop "合作 / 者?" from splitting. */
@media (min-width:801px) {
  .contact h2 { font-size:clamp(42px,4.4vw,70px); }
}

/* 7. WeChat / blocked-iframe fallback link. */
.trailer-modal-frame { position:relative; }
.player-external-link {
  position:absolute; right:14px; bottom:14px; z-index:5;
  padding:8px 12px; border:1px solid rgba(255,255,255,.55);
  background:rgba(5,6,6,.72); color:#fff;
  font:12px/1 -apple-system,BlinkMacSystemFont,"PingFang SC",Arial,sans-serif;
  letter-spacing:.02em; text-decoration:none; border-radius:2px;
}
.player-external-link:hover { background:var(--accent); color:#0c0d0d; border-color:var(--accent); }

/* 8. Performance on phones: skip full-screen blurs and the noise layer. */
@media (max-width:800px) {
  .site-noise { display:none; }
  body.nav-open .main-nav::before { filter:none; background-image:none; background:#0b0c0d; }
  body.nav-open::after { backdrop-filter:none; -webkit-backdrop-filter:none; }
}

/* 9. Accessibility. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  *, *::before, *::after {
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .splash-screen { display:none !important; }
}
:focus-visible { outline:2px solid #ffd400; outline-offset:3px; }
#project-view-scroll:focus { outline:none; }

/* 10. Opening wordmark: a slower 10% centre zoom-in (scale .90 -> 1). */
.splash-wordmark {
  transform-origin:center center;
  animation: splash-logo-in 1.8s cubic-bezier(.42,0,.28,1) both !important;
}
@keyframes splash-logo-in {
  from { opacity:0; transform:scale(.90); }
  to   { opacity:1; transform:scale(1); }
}
.splash-screen.is-done { animation-duration:.9s; }

/* 12. Long project titles: break at punctuation, not mid-word. */
.project-detail-title h1 { word-break:keep-all; overflow-wrap:anywhere; }
@media (max-width:800px) {
  .player-external-link { top:8px; right:52px; bottom:auto; padding:6px 8px; font-size:10px; }
}

/* 13. Desktop hero: keep the poster wall, but give the headline a dark bed. */
@media (min-width:801px) {
  .hero-overlay {
    background:
      linear-gradient(0deg, rgba(4,5,5,.92) 0%, rgba(4,5,5,.66) 34%, rgba(4,5,5,.10) 66%),
      linear-gradient(90deg, rgba(4,5,5,.74) 0%, rgba(4,5,5,.34) 40%, rgba(4,5,5,0) 72%);
  }
}

/* 14. Clear close buttons for the project / trailer page. */
.project-topbar-actions { display:flex; align-items:center; gap:16px; }
.project-close-x {
  width:46px; height:46px; padding:0; flex:none;
  display:grid; place-items:center;
  border:1px solid rgba(242,240,233,.38); border-radius:50%;
  background:rgba(8,9,10,.42); color:#f2f0e9;
  font:300 28px/1 Helvetica,Arial,sans-serif; cursor:pointer;
  transition:background .22s, border-color .22s, color .22s, transform .22s;
}
.project-close-x:hover, .project-close-x:focus-visible {
  background:var(--accent); border-color:var(--accent); color:#0c0d0d; transform:rotate(90deg);
}
.project-trailer-close {
  position:absolute; z-index:8; top:12px; right:12px;
  width:40px; height:40px; padding:0;
  display:grid; place-items:center;
  border:1px solid rgba(255,255,255,.62); border-radius:50%;
  background:rgba(5,6,6,.72); color:#fff;
  font:300 22px/1 Helvetica,Arial,sans-serif; cursor:pointer;
  transition:background .2s, border-color .2s, color .2s;
}
.project-trailer-close:hover, .project-trailer-close:focus-visible {
  background:var(--accent); border-color:var(--accent); color:#0c0d0d;
}
@media (max-width:800px) {
  .project-topbar-actions { gap:10px; }
  .project-close-x { width:40px; height:40px; font-size:24px; }
  .project-trailer-close { top:8px; right:8px; width:36px; height:36px; font-size:20px; }
}
@media (max-width:420px) {
  .project-logo b { display:none; }
  .project-close-x { width:36px; height:36px; font-size:22px; }
}

/* 16. Detail play control: a transparent, white-outline triangle (no ring). */
.trailer-play.triangle-play,
.detail-play.triangle-play {
  width:auto !important;
  height:auto !important;
  padding:0 !important;
  border:0 !important;
  border-radius:0 !important;
  background:none !important;
  box-shadow:none !important;
  display:inline-flex !important;
  align-items:center;
  justify-content:center;
  color:#fff;
  transform:none !important;
  font-size:0 !important;
}
.trailer-play.triangle-play::before,
.detail-play.triangle-play::before {
  content:none !important;
  display:none !important;
  border:0 !important;
}
.trailer-play.triangle-play svg {
  width:clamp(58px,6vw,90px);
  height:auto;
  display:block;
  filter:drop-shadow(0 8px 30px rgba(0,0,0,.55));
  transition:transform .25s ease, color .25s ease;
}
.trailer-play.triangle-play:hover,
.trailer-play.triangle-play:focus-visible {
  background:none !important;
  border:0 !important;
  color:var(--acid);
  scale:1.06;
}
@media (max-width:800px) {
  .trailer-play.triangle-play svg { width:66px; }
}

/* 17. Mobile contact headline: keep "正在找合作者？" on one line. */
@media (max-width:800px) {
  .contact h2 { font-size:clamp(34px,9.8vw,44px); line-height:1.04; }
}

/* 18. Hold the poster for a beat so the player never flashes a black frame. */
.player-poster-cover {
  position:absolute; inset:0; z-index:4;
  background-color:#080808; background-size:cover; background-position:center;
  pointer-events:none; opacity:1;
  transition:opacity .4s ease;
}
.player-poster-cover.is-hidden { opacity:0; }

/* 19. Mobile width guards (iPhone SE / small Android). */
@media (max-width:800px) {
  html, body { overflow-x:hidden; }
  img, video, iframe { max-width:100%; }
}
@media (max-width:380px) {
  .work-grid { gap:6px; }
  .work-card h3 { font-size:16px; }
  .work-card p { font-size:9.5px; }
  .work-card .role { font-size:9px; }
  .filter { padding:9px 12px; font-size:12px; }
  .project-home { font-size:11px; }
  .project-close-x { width:34px; height:34px; font-size:21px; }
  .project-detail-title h1 { font-size:clamp(32px,11.4vw,52px); }
  .project-detail-copy, .project-gallery { width:calc(100vw - 28px); }
}

/* 20. Trilogy: three full posters as a triptych (instead of cropped bands). */
.trilogy-grid {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:16px;
}
.trilogy-card {
  position:relative;
  min-height:0;
  aspect-ratio:2/3;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  padding:22px;
  overflow:hidden;
  cursor:pointer;
  background-color:#0b0c0d;
  background-image:var(--image);
  background-size:cover;
  background-position:center;
  transition:transform .45s ease;
}
.trilogy-card::after {
  content:"";
  position:absolute; inset:0; z-index:0;
  background:
    linear-gradient(180deg, rgba(7,8,9,.86) 0%, rgba(7,8,9,.28) 34%, transparent 58%),
    linear-gradient(0deg, rgba(7,8,9,.96) 0%, rgba(7,8,9,.58) 32%, rgba(7,8,9,.06) 66%, transparent 100%);
  pointer-events:none;
}
.trilogy-card > div { position:relative; z-index:1; }
.trilogy-card .card-no { display:block; margin-bottom:10px; }
.trilogy-card h3 { margin:0; font-size:clamp(24px,2.3vw,36px); line-height:1; text-shadow:0 2px 18px rgba(0,0,0,.8); }
.trilogy-card p { margin:0 0 18px; max-width:260px; }
.trilogy-card .text-link { font-size:11px; }
.trilogy-card:hover h3, .trilogy-card:focus-visible h3 { color:var(--acid); }
.trilogy-card:focus-visible { outline:2px solid #ffd400; outline-offset:4px; }
@media (max-width:800px) {
  .trilogy-grid { grid-template-columns:1fr; gap:12px; }
  .trilogy-card { aspect-ratio:2/3; min-height:0; padding:18px; }
}

/* 21. Mobile trilogy heading: keep "三部曲项目协作。" on one line. */
@media (max-width:800px) {
  .trilogy h2 { font-size:clamp(34px,9.8vw,44px); line-height:1.05; }
}

/* 22. Mobile hero: fit the MASTERSHOT wordmark, use a 2x2 poster wall instead of
   four squeezed vertical slices, and keep the headline inside the viewport. */
@media (max-width:800px) {
  .hero-filmstrip {
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    grid-template-rows:repeat(2,minmax(0,1fr)) !important;
  }
  .hero-filmstrip span,
  .hero-filmstrip span:nth-child(-n+3) {
    background-size:cover !important;
    background-position:center 30% !important;
  }
  .hero-wordmark {
    top:17% !important;
    left:0 !important;
    width:100vw !important;
    transform:none !important;
    overflow:hidden !important;
  }
  .hero-wordmark span {
    font-size:clamp(36px,12.4vw,64px) !important;
    letter-spacing:.005em !important;
    text-indent:.005em !important;
    line-height:.95 !important;
  }
  .hero-content { padding-top:27vh !important; }
  .hero h1 {
    font-size:clamp(32px,9.6vw,46px) !important;
    line-height:1.06 !important;
    letter-spacing:-.045em !important;
    margin-top:24px !important;
    margin-bottom:18px !important;
  }
  .hero-intro { font-size:14px !important; }
}

/* 23. Consistent wordmark font on phones, and never clip the QR caption. */
@font-face {
  font-family:"Arimo";
  src:url("assets/fonts/arimo-latin-700.woff2") format("woff2");
  font-weight:700;
  font-style:normal;
  font-display:swap;
}
.hero-wordmark span {
  font-family:"Arimo", Helvetica, Arial, sans-serif !important;
}
.contact-qr-wrap > span {
  white-space:normal !important;
  max-width:220px;
  line-height:1.4;
  text-align:center;
  font-family:"Arimo", Helvetica, Arial, sans-serif;
}
@media (max-width:800px) {
  .contact-qr-wrap > span {
    max-width:min(220px, 72vw);
    font-size:10px !important;
    line-height:1.45;
    text-align:left;
  }
}

/* 24. Directing: original scripts, director's statement, and the two features in development. */
.directing { padding:110px 0 100px; border-top:1px solid var(--line); }
.directing-head { display:grid; grid-template-columns:1fr 1fr; gap:64px; margin-top:48px; align-items:start; }
.directing-head h2 { margin:0; font-size:clamp(42px,5.2vw,78px); line-height:.98; letter-spacing:-.075em; font-weight:600; }
.directing-head h2 i { color:var(--acid); font-style:normal; }
.directing-statement { margin:0; max-width:540px; color:rgba(242,240,233,.72); font-size:16px; line-height:1.8; }
.directing-statement strong { color:var(--paper); font-weight:500; }
.directing-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:54px; }
.directing-card { border:1px solid var(--line); padding:30px; background:rgba(255,255,255,.025); display:flex; flex-direction:column; }
.directing-card-top { display:flex; justify-content:space-between; align-items:center; gap:16px; }
.directing-status { font:10px "DM Mono",monospace; letter-spacing:.12em; color:var(--acid); text-transform:uppercase; }
.directing-card h3 { margin:24px 0 4px; font-size:clamp(30px,3vw,44px); line-height:1; letter-spacing:-.05em; }
.directing-en { margin:0 0 18px; font:11px "DM Mono",monospace; letter-spacing:.14em; color:var(--muted); text-transform:uppercase; }
.directing-meta { margin:0 0 6px; color:var(--acid); font:11px "DM Mono",monospace; letter-spacing:.06em; }
.directing-credit { margin:0 0 20px; color:rgba(242,240,233,.55); font:11px "DM Mono",monospace; letter-spacing:.02em; }
.directing-logline { margin:0; color:rgba(242,240,233,.8); font-size:15px; line-height:1.8; }
.directing-logline + .directing-logline { margin-top:12px; }
.directing-note { margin-top:24px; padding-top:16px; border-top:1px solid var(--line); color:rgba(242,240,233,.45); font:11px "DM Mono",monospace; letter-spacing:.04em; }
.section-caption { margin:10px 0 0; color:rgba(242,240,233,.5); font-size:12px; line-height:1.6; }
.section-caption a { color:var(--acid); border-bottom:1px solid rgba(201,217,120,.4); }
.about-directing { margin-top:18px !important; color:var(--acid) !important; font-size:14px !important; line-height:1.6; }
.credits-note { margin-top:18px; color:rgba(242,240,233,.45); font-size:11px; line-height:1.6; }
@media(max-width:800px) {
  .directing { padding:80px 0; }
  .directing-head { grid-template-columns:1fr; gap:26px; margin-top:36px; }
  .directing-head h2 { font-size:clamp(36px,10.5vw,54px); }
  .directing-statement { font-size:15px; }
  .directing-grid { grid-template-columns:1fr; gap:12px; margin-top:36px; }
  .directing-card { padding:22px; }
  .directing-card h3 { font-size:32px; }
  .directing-logline { font-size:14px; }
}

/* 25. Director's experience: on-set, post-direction, and Previz credits. */
.about-experience { margin-top:10px !important; color:rgba(242,240,233,.62) !important; font-size:14px !important; line-height:1.7; }
.directing-experience-label { margin:42px 0 0; color:var(--muted); font:10px "DM Mono",monospace; letter-spacing:.14em; text-transform:uppercase; }
.directing-experience { display:grid; grid-template-columns:1fr 1fr; gap:0; margin-top:18px; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.directing-experience > div { padding:28px 32px 30px 0; }
.directing-experience > div + div { padding-left:32px; border-left:1px solid var(--line); }
.directing-experience h3 { margin:10px 0 14px; font-size:24px; line-height:1.05; letter-spacing:-.04em; }
.directing-experience p { margin:0 0 10px; color:rgba(242,240,233,.7); font-size:14px; line-height:1.75; }
.directing-experience p:last-child { margin-bottom:0; }
.directing-experience strong { color:var(--paper); font-weight:500; }
@media(max-width:800px) {
  .directing-experience { grid-template-columns:1fr; }
  .directing-experience > div { padding:24px 0; }
  .directing-experience > div + div { padding-left:0; border-left:0; border-top:1px solid var(--line); }
  .directing-experience h3 { font-size:22px; }
}

/* 26. Mobile work heading: keep the new caption on its own line. */
@media (max-width:800px) {
  .section-heading { display:block; }
  .section-caption { margin-top:10px; }
}

/* 27. Directing project posters: poster left, text right, stacked on phones. */
.directing-card.has-poster { display:grid; grid-template-columns:240px minmax(0,1fr); gap:24px; padding:20px; align-items:start; }
.directing-poster { border:1px solid rgba(255,255,255,.12); background:#0a0b0c; overflow:hidden; align-self:start; }
.directing-poster img { display:block; width:100%; height:auto; aspect-ratio:848/1264; object-fit:cover; }
.directing-body { min-width:0; display:flex; flex-direction:column; }
.directing-body h3 { margin-top:18px; }
.directing-body .directing-note { margin-top:auto; }
@media(max-width:1100px) {
  .directing-grid { grid-template-columns:1fr; }
  .directing-card.has-poster { grid-template-columns:260px minmax(0,1fr); }
}
@media(max-width:800px) {
  .directing-card.has-poster { grid-template-columns:1fr; padding:16px; }
  .directing-poster { width:min(240px,100%); margin:0 auto; }
  .directing-body h3 { font-size:30px; }
}

/* 28. Director experience: three concise capability cards, music included. */
.directing-experience { grid-template-columns:repeat(3,minmax(0,1fr)); }
.directing-experience > div { padding:28px 24px 28px 0; }
.directing-experience > div + div { padding-left:24px; border-left:1px solid var(--line); }
.directing-experience h3 { font-size:22px; margin:10px 0 12px; }
.directing-experience p { font-size:13px; line-height:1.7; }
.directing-credit-line { color:rgba(242,240,233,.55) !important; font-size:12px !important; line-height:1.65 !important; }
.directing-credit-line strong { color:var(--paper); }
@media(max-width:1000px) {
  .directing-experience { grid-template-columns:1fr; }
  .directing-experience > div { padding:22px 0; }
  .directing-experience > div + div { padding-left:0; border-left:0; border-top:1px solid var(--line); }
}

/* 29. Working archive: horizontal scroll with arrow controls. */
.gallery-head { display:flex; align-items:center; justify-content:space-between; gap:20px; margin-top:52px; }
.gallery-label { color:var(--muted); font:10px "DM Mono",monospace; letter-spacing:.14em; text-transform:uppercase; }
.gallery-nav { display:flex; gap:8px; }
.gallery-btn { width:38px; height:38px; border:1px solid var(--line); border-radius:50%; background:transparent; color:var(--paper); display:grid; place-items:center; font-size:16px; line-height:1; cursor:pointer; transition:border-color .2s,color .2s,opacity .2s; }
.gallery-btn:hover:not(:disabled) { border-color:var(--acid); color:var(--acid); }
.gallery-btn:disabled { opacity:.25; cursor:default; }
.intro-gallery { display:flex !important; grid-template-columns:none !important; overflow-x:auto; scroll-snap-type:x mandatory; gap:14px; margin-top:14px; padding-bottom:6px; scrollbar-width:none; -ms-overflow-style:none; }
.intro-gallery::-webkit-scrollbar { display:none; }
.intro-gallery figure { flex:0 0 calc((100% - 28px)/3); aspect-ratio:auto; margin:0; min-width:0; scroll-snap-align:start; }
.intro-gallery img { width:100%; height:auto; aspect-ratio:1.45; object-fit:cover; }
@media(max-width:800px) {
  .gallery-head { margin-top:36px; }
  .intro-gallery figure { flex-basis:82%; }
}