/* ==========================================================================
   WordPress-theme fixes layered on top of the original stylesheets.
   The original css/*.css files are untouched; everything added lives here.
   ========================================================================== */

/* 1. Arrows: iPhones (and some Macs) swap ↗ ↘ ✳ for colour emoji because the
   site fonts don't contain them. These faces join the existing families only for
   those characters. Windows keeps its own Segoe UI Symbol glyphs exactly as before;
   everywhere else gets matching text-style arrows. */
@font-face{font-family:"Instrument Sans";src:local("Segoe UI Symbol"),local("SegoeUISymbol"),url("../assets/fonts/og-arrows.woff2") format("woff2");unicode-range:U+2196-2199,U+2733;font-weight:400 700;font-style:normal;font-display:block}
/* The serif family only exists in italic, so its arrow face must be italic too, or iPhones skip it (the e-mail arrow on Contact). */
@font-face{font-family:"Instrument Serif";src:local("Segoe UI Symbol"),local("SegoeUISymbol"),url("../assets/fonts/og-arrows.woff2") format("woff2");unicode-range:U+2196-2199,U+2733;font-weight:400;font-style:italic;font-display:block}

/* 2. Hero video: never show the browser's own play button over the hero
   (iOS shows one when Low Power Mode blocks autoplay). One rule per selector,
   because an unknown pseudo-element would invalidate a combined rule. */
.hero-video::-webkit-media-controls{display:none!important;-webkit-appearance:none}
.hero-video::-webkit-media-controls-start-playback-button{display:none!important;-webkit-appearance:none}
.hero-video::-webkit-media-controls-overlay-play-button{display:none!important;-webkit-appearance:none}
.hero-video::-webkit-media-controls-panel{display:none!important;-webkit-appearance:none}
.hero-video::-webkit-media-controls-overlay-enclosure{display:none!important}

/* Phones (portrait) play a lighter phone-sized cut of the hero video (hardware decoded).
   If the phone refuses to play video (Low Power Mode), a looping animated copy takes over.
   Its colour treatment is baked in, so no per-frame filter work is needed. */
.og-hero-fallback{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none;user-select:none;opacity:0;visibility:hidden;transition:opacity .4s ease}
html.og-video-fallback .og-hero-fallback{opacity:1;visibility:visible}
.motion-off .og-hero-fallback{visibility:hidden!important;opacity:0!important}
@media (prefers-reduced-motion:reduce){html:not(.motion-explicit-on) .og-hero-fallback{visibility:hidden!important;opacity:0!important}}

/* 3. Smoothness on phones: word masks no longer keep a permanent GPU layer each
   (GSAP still promotes them while they animate). */
@media (hover:none),(pointer:coarse){.motion-word{will-change:auto}}

/* Scroll parallax on touch screens runs in the browser's compositor (same movement as the
   GSAP version: hero drifts 40% while it scrolls away, project images -12% → 12% while
   crossing the screen), so it stays glued to the finger instead of trailing behind it. */
@keyframes og-hero-drift{from{transform:translateY(0)}to{transform:translateY(40%)}}
@keyframes og-image-drift{from{transform:translateY(-12%)}to{transform:translateY(12%)}}
html.og-native-parallax .hero-media{animation:og-hero-drift linear both;animation-timeline:scroll(root block);animation-range:0px max(100svh,720px)}
@media (max-width:550px){html.og-native-parallax .hero-media{animation-range:0px max(100svh,680px)}}
html.og-native-parallax .project-image,html.og-native-parallax .case-cover{view-timeline-name:--og-panel;view-timeline-axis:block;view-timeline-inset:0px}
html.og-native-parallax .project-image img,html.og-native-parallax .case-cover img{animation:og-image-drift linear both;animation-timeline:--og-panel;animation-range:cover 0% cover 100%}
html.og-native-parallax.motion-off .hero-media,html.og-native-parallax.motion-off .project-image img,html.og-native-parallax.motion-off .case-cover img{animation:none}

/* 4. Colour below the footer / behind the phone browser bar (set by og-wp.js). */
.og-edge-tint{position:fixed;left:0;right:0;bottom:0;height:2px;pointer-events:none;z-index:150;display:none}
html.og-edge-gold .og-edge-tint{display:block}