/* Slater CSS file (linked from the head). PURE CSS ONLY: no <style>, no
   <script>. The browser parses this file as a stylesheet, and any HTML tag
   in it is garbage the parser has to recover from — which ate the :root
   token block when the whole head snippet was pasted in here. */

/* ============================ 1. TOKENS ================================== *
 * Scoped to html[data-theme-status], never a bare [data-theme-status]. The
 * old page embed put that attribute on <body> too; scoping to html makes any
 * leftover body attribute inert instead of a specificity fight.             */
:root{
  color-scheme: light;
  --oeg-ground:#FFFFFF;
  --oeg-ink:#101012;
  --oeg-ink-soft:#5A5C63;
  --oeg-hairline:rgba(16,16,18,.14);
  --oeg-card:#F3F3F5;
  --oeg-nav-ground:#101012;      /* the nav is always the opposite of the page */
  --oeg-nav-ink:#F4F5F7;
  --oeg-accent:#D4FF00;          /* marks, focus, selection */
  --oeg-accent-fill:#D4FF00;     /* light can wear full acid: on white it is a
                                    hue shift with almost no value jump */
  --oeg-accent-text:#647A00;     /* raw acid on white is 1.16:1 — unreadable */
}
html[data-theme-status="dark"]{
  color-scheme: dark;            /* scrollbars and form controls, and no white
                                    scrollbar flash on a dark first paint */
  --oeg-ground:#0B0C0E;          /* neutral: chrome is a neutral material, and a
                                    saturated ground tints every grey in the plate */
  --oeg-ink:#DCDFE3;             /* not pure white — it halates at display sizes
                                    and would sit level with the accent */
  --oeg-ink-soft:#8C9199;
  --oeg-hairline:rgba(220,223,227,.14);
  --oeg-card:#16181B;
  --oeg-nav-ground:#F4F5F7;
  --oeg-nav-ink:#101012;
  /* #D4FF00 is 16.9:1 on this ground and only ~1.05:1 from the body text, so
     accent-as-text carries no hierarchy. Raw acid is marks and focus only. */
  --oeg-accent-fill:#B6DC00;
  --oeg-accent-text:#B6DC00;
}

/* ============================ 2. SURFACES ================================ *
 * .main-background is the rule that matters: position:fixed, inset:0,
 * z-index:2 and OPAQUE, so it — not <body> — is the surface everyone sees,
 * and it is the ring canvas's own parent, so it is literally the colour the
 * WebGL ring composites over.                                              */
html, body       { background-color: var(--oeg-ground); color: var(--oeg-ink); }
.main-background { background-color: var(--oeg-ground) !important; }

h1, h2, h3, h4,
.hero-heading, .footer-email { color: var(--oeg-ink) !important; }
/* .project-grid-title-2, .subtext-hero-projectz and .text-block-2 were in here
   and exist on no page of the site, so the whole ink-soft rule had nothing to
   colour. If a class gets renamed in the Designer, this is the rule to update. */

.underlay-nav__inner         { background-color: var(--oeg-nav-ground) !important; }
.underlay-nav__inner a,
.underlay-nav__link-large,
.underlay-nav__link-small    { color: var(--oeg-nav-ink) !important; }
.underlay-nav__bottom-border { background-color: var(--oeg-nav-ink); opacity:.25; }

/* ======================= 3. THE NAV CONTROL ============================== *
 * The header is position:fixed and does not move, but the page slides out
 * from under it. Closed, the control is over the PAGE. Open, it is over the
 * PANEL — the inverse colour. So it cannot follow one token; it follows the
 * menu state. This is why "Close" was invisible: hard-coded #fff for a panel
 * that is light in dark theme.                                             */
.underlay-nav__header,
.underlay-nav__toggle,
.underlay-nav__toggle-text,
.underlay-nav__toggle-label,
.underlay-nav__toggle-icon,
.underlay-nav__logo,
.logo-text,
.btn-darklight              { color: var(--oeg-ink) !important; }
.underlay-nav__toggle-bar   { background-color: var(--oeg-ink) !important;
                              border-top-color: var(--oeg-ink) !important; }

body[data-menu-status="open"] .underlay-nav__toggle,
body[data-menu-status="open"] .underlay-nav__toggle-text,
body[data-menu-status="open"] .underlay-nav__toggle-label,
body[data-menu-status="open"] .underlay-nav__toggle-label.close,
body[data-menu-status="open"] .underlay-nav__toggle-icon,
body[data-menu-status="open"] .btn-darklight
                            { color: var(--oeg-nav-ink) !important; }
body[data-menu-status="open"] .underlay-nav__toggle-bar
                            { background-color: var(--oeg-nav-ink) !important;
                              border-top-color: var(--oeg-nav-ink) !important; }

/* ==================== 4. INSIDE THE PANEL ================================ */
.underlay-nav__container,
.underlay-nav__bottom,
.underlay-nav__bottom-col,
.underlay-nav__list li,
.underlay-nav__list a       { color: var(--oeg-nav-ink) !important; }
/* The frame that makes the page read as a rounded card when the menu is open:
   two 16px strips along the top and bottom edge, and two 32px corner pieces.
   They are the PANEL colour wrapping the page — that is what carves the
   corners round — so they follow nav-ground, not nav-ink.

   The corner is NOT a solid box. It is a radial gradient: a transparent
   quarter-circle (the page shows through) with the panel colour outside it.
   Webflow bakes that colour in as a literal rgb(0,0,0), so `color` alone
   cannot theme it, and a background-color would flood the transparent quarter
   and turn the curve into a square. The gradient is re-declared here with
   currentColor, and background-color is pinned transparent. */
.underlay-nav__border       { background-color: var(--oeg-nav-ground) !important; }
.underlay-nav__corner       { color: var(--oeg-nav-ground) !important;
                              background-color: transparent !important;
                              background-image: radial-gradient(circle farthest-side at 0 100%,
                                                transparent 99%, currentColor) !important; }
.underlay-nav__corner.is--bottom
                            { background-image: radial-gradient(circle farthest-side at 0 0,
                                                transparent 99%, currentColor) !important; }

/* The current-page pill. Webflow ships #ffff00 — pure yellow, not the brand
   acid. In LIGHT the panel is near-black, so acid-on-dark is right. In DARK
   the panel inverts to near-white and acid on it measures 1.02:1 — the
   affordance all but disappears. So the pill inverts with its panel: a dark
   chip with acid type. Measured: 17.42:1 pill vs panel, 16.38:1 type. */
.underlay-nav__link-large.w--current
                            { background-color: var(--oeg-accent-fill) !important;
                              color: #0E0F11 !important; }
html[data-theme-status="dark"] .underlay-nav__link-large.w--current
                            { background-color: var(--oeg-nav-ink) !important;
                              color: var(--oeg-accent) !important; }

/* ==================== 5. PAGE CHROME ===================================== *
 * The showreel card's own background IS visible (no image covers it), so this
 * is scoped to DARK ONLY — unscoped it would repaint a black card #F3F3F5 in
 * light, an unforced change to the established look.                        */
html[data-theme-status="dark"] .showreel-video-card
                            { background-color: var(--oeg-card) !important;
                              border-color: var(--oeg-hairline) !important; }

/* ==================== 6. THE CROSS-FADE ================================== *
 * Only once .oeg-theme-ready lands, i.e. after the first paint has committed,
 * so a stored dark theme SNAPS in on load and only a real toggle animates.
 * 0.45s matches the ring's own uniform fade so page and ring move as one.   */
html.oeg-theme-ready body,
html.oeg-theme-ready .main-background,
html.oeg-theme-ready .underlay-nav__inner,
html.oeg-theme-ready .underlay-nav__toggle,
html.oeg-theme-ready .underlay-nav__toggle-text,
html.oeg-theme-ready .underlay-nav__toggle-label,
html.oeg-theme-ready .underlay-nav__toggle-bar,
html.oeg-theme-ready .underlay-nav__logo,
html.oeg-theme-ready .logo-text,
html.oeg-theme-ready .btn-darklight,
html.oeg-theme-ready .underlay-nav__link-large,
html.oeg-theme-ready .underlay-nav__link-large.w--current,
html.oeg-theme-ready .underlay-nav__border,
html.oeg-theme-ready .underlay-nav__corner,
html.oeg-theme-ready h1, html.oeg-theme-ready h2,
html.oeg-theme-ready h3, html.oeg-theme-ready h4,
html.oeg-theme-ready .hero-heading,
html.oeg-theme-ready .footer-email {
  transition: background-color .45s cubic-bezier(.35,1,.6,1),
              color            .45s cubic-bezier(.35,1,.6,1),
              border-color     .45s cubic-bezier(.35,1,.6,1);
}

/* ==================== 7. THE TOGGLE BUTTON =============================== *
 * The word swap and icon spin, re-scoped to html. Unchanged behaviour.      */
html[data-theme-status="dark"]  .btn-darklight .btn-darklight__word-p,
html[data-theme-status="light"] .btn-darklight .btn-darklight__word-p.is--absolute { opacity: 0; }
html[data-theme-status="light"] .btn-darklight .btn-darklight__word-p,
html[data-theme-status="dark"]  .btn-darklight .btn-darklight__word-p.is--absolute { opacity: 1; }

.btn-darklight .btn-darklight__icon-box{
  transition: transform .8s cubic-bezier(.35,1.5,.6,1);
  transform: translateY(0%) rotate(-90deg);
}
html[data-theme-status="dark"] .btn-darklight .btn-darklight__icon-box{
  transform: translateY(-100%) rotate(.001deg);
}

/* ---- loader: follows the page ground, so dark mode no longer flashes white ---- */
.loader__bg                  { background-color: var(--oeg-ground) !important; }
/* the wrapper itself must be see-through: Webflow paints it white, and an
   opaque wrapper hides the page until the loader is removed, so any reveal
   animated on .loader__bg is invisible and the end is a hard cut */
.loader                      { background-color: transparent !important; color: var(--oeg-ink) !important; }
/* the bar is drawn in the ground colour, exactly as invisible as it was;
   swap in var(--oeg-accent-fill) to show a progress line */
.loader__bg-bar              { background-color: var(--oeg-ground) !important; }
.loader__logo-item.is--top,
.loader__logo-item.is--base  { color: var(--oeg-ink) !important; }
.loader__text-el             { color: var(--oeg-ink-soft) !important; }

/* ---- logo marquee: solid-black SVG logos take the dark theme's ink ----
   The logos arrive as <img>, which CSS cannot recolour, so dark mode inverts
   them: black -> 86% grey, the same soft ink as the rest of the dark theme
   (a full invert would be a harsher pure white). Rides the theme cross-fade. */
.draggable-marquee__item-img { transition: filter .45s ease; }
html[data-theme-status="dark"] .draggable-marquee__item-img { filter: invert(.86); }

/* ---- .content_wrapper: frosted material ----
   Webflow puts backdrop-filter: blur(14px) on this class, and the class is
   reused by the Work grid — twelve cards on one page. A backdrop filter makes
   the compositor snapshot and blur its backdrop EVERY scroll frame, so twelve
   of them is what made that page crawl. It is also pointless here: a backdrop
   filter cannot see the WebGL ring at all, which is why the frost canvas was
   written in the first place. So the filter is turned off and the frost layer
   does the blur, on the boxes that ask for it. */
.main-container .content_wrapper {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  /* A backdrop filter also makes the element a containing block for absolutely
     positioned children, and .commercial-image is position:absolute. Turning
     the filter off took that away and the images escaped the card, so the
     containing block is restored explicitly here. */
  position: relative;
  background-color: color-mix(in srgb, var(--oeg-ground) 42%, transparent);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--oeg-ink) 26%, transparent),
    0 40px 90px -50px rgba(0, 0, 0, .6);
  transition: background-color .45s ease, box-shadow .45s ease;
}

/* -----------------------------------------
   SPECTRAL EDGE  —  .commercial_card
   -----------------------------------------
   The Work grid's poster cards carry an opaque image that fills the whole box,
   so the frosted-glass panel and the WebGL rim are both invisible behind it:
   the image is position:absolute at z-index 1, the halo canvas sits at z-index
   -1, and the card is overflow:hidden so an outer glow is clipped as well.
   These cards therefore get their edge in CSS instead, painted ABOVE the image
   and inside the same corner radius. No WebGL context, no readback, no cap —
   every card in the collection looks identical however many the CMS holds.
   In Webflow, ADD commercial_card as a second class on the Work card - do not
   rename - so the card keeps every bit of its existing content_wrapper styling
   (corner radius, padding, layout) and simply opts out of the glass treatment.
   The halo and frost selectors both read .content_wrapper:not(.commercial_card),
   so the About text panels still get the real frost and WebGL rim. */

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

.commercial_card {
  position: relative;
  isolation: isolate;
}

.commercial_card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;                    /* above .commercial-image (1) and .commerical_button (2) */
  pointer-events: none;
  border-radius: inherit;
  padding: var(--oeg-edge-width, 1.25px);
  background: conic-gradient(from var(--oeg-edge-spin, 0deg),
    #FF2D6F, #FF8A00, #FFE600, #46FF77, #00E5FF, #4B6BFF, #B447FF, #FF2D6F);
  /* paint only the padding ring: fill the box, punch out the content area */
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  opacity: var(--oeg-edge-alpha, .62);
  transition: opacity .4s ease;
}

/* over a white ground the full spectrum shouts; pull it back */
html[data-theme-status="light"] .commercial_card::after { opacity: var(--oeg-edge-alpha-light, .42); }

/* Lit and turning, but only for the card under the pointer or keyboard focus:
   one animated conic-gradient at a time instead of twelve repainting forever.
   Both selectors carry the html[...] prefix so the light-theme rule above
   cannot outrank them. */
html .commercial_card:hover::after,
html .commercial_card:focus-within::after {
  opacity: var(--oeg-edge-alpha-hover, .9);
  animation: oeg-edge-spin var(--oeg-edge-speed, 18s) linear infinite;
}

/* Three dials, set them on :root (or on one card) to retune without touching
   this rule:  --oeg-edge-width (rim thickness), --oeg-edge-alpha (how present
   it is on dark; --oeg-edge-alpha-light for white, -hover for the hover lift),
   --oeg-edge-speed (one full turn, while hovered). */

@keyframes oeg-edge-spin { to { --oeg-edge-spin: 360deg; } }

@media (prefers-reduced-motion: reduce) {
  html .commercial_card:hover::after,
  html .commercial_card:focus-within::after { animation: none; }
}

/* -----------------------------------------
   PER-PAGE THEME LOCK  +  NAV SCRIM
   -----------------------------------------
   data-theme-lock="light" (or "dark") on a page's Barba container pins that
   page's theme. The visitor's own choice is kept in storage and still applies
   everywhere else; only the pinned page ignores it. The toggle is hidden while
   a lock is in force, because a control that visibly does nothing is worse
   than no control at all.

   The visitor's own darkening overlay on the page handles contrast against
   full-bleed imagery; nothing is painted over the nav here. */

html[data-theme-locked] [data-theme-toggle] {
  visibility: hidden;
  pointer-events: none;
}
