/* Light / dark theme switch.
   -------------------------------------------------------------------------
   The whole site was built as a single dark theme with colors hardcoded
   throughout dozens of stylesheets (no CSS custom properties for
   background/text/surface colors) — retokenizing every rule to make a
   hand-authored light palette is not realistic to do safely across ~30
   pages in one pass. Instead this uses the standard "instant theme" CSS
   trick: invert the whole page's lightness (filter: invert + hue-rotate),
   which flips every dark surface to light and vice-versa while roughly
   preserving hue (so the orange brand accent still reads as orange, not
   blue) — then apply a second, canceling invert to anything that must NOT
   be recolored: real photos/renders/video (this is a game-art portfolio;
   screenshots and cinematics must never be color-shifted) and the small
   set of hand-tinted icon classes that already use `filter:` to recolor a
   black glyph to the brand orange.
   Because two identical filters on nested elements cancel out (the child
   renders normally, then gets inverted once by the ancestor same as
   everything else — net zero for that element specifically), this needs
   no changes to any existing stylesheet or markup beyond the toggle button
   itself. */

:root[data-theme="light"] {
  filter: invert(1) hue-rotate(180deg);
  background: #0b0b0f;
}

/* .header-logo / .footer-logo (the wordmark), .carousal-img (client brand
   logos), and .avatar (a flat gray-circle/white-silhouette placeholder
   icon, not a real photo) are all flat marks drawn for a dark background —
   counter-inverting them like a photo would keep them in their original
   dark-theme coloring (and for .avatar specifically, any faint non-fully-
   transparent edge in the PNG stays stuck at its old shade too, showing up
   as a mismatched square behind the circle once the card around it goes
   light). These need to actually flip WITH the theme to stay visually
   consistent, so they're excluded from the photo/video "stay unchanged"
   rule below. */
:root[data-theme="light"] img:not(.header-logo):not(.footer-logo):not(.carousal-img):not(.testamonial-icon):not(.avatar),
:root[data-theme="light"] picture,
:root[data-theme="light"] video,
:root[data-theme="light"] canvas,
:root[data-theme="light"] iframe,
:root[data-theme="light"] model-viewer,
:root[data-theme="light"] embed,
:root[data-theme="light"] object,
:root[data-theme="light"] .no-invert,
/* The chat widget is a self-contained, separately branded UI — its own
   dark panel, message bubbles, teaser — that was never designed to have a
   "light mode" at all. Without this, the site's root invert was flipping
   its dark panel background to white, which is the stark white chat
   window the user was seeing. Canceling the invert on each of its own
   fixed-position pieces keeps it exactly as designed regardless of site
   theme, same as the theme toggle button (.no-invert above) — but the
   filter goes on THESE elements specifically, not on their shared parent
   #pixalot-chat-root: that parent is a deliberate 0×0 anchor pinned at the
   true viewport corner (so its fixed children stay reliable regardless of
   page scroll/height), and `filter` on an ancestor makes IT the
   positioning reference for any `position:fixed` descendant — against a
   0×0 box, every `right:`/`bottom:` in the widget resolved to a huge
   negative offset, throwing the whole panel off-screen. Filtering the
   fixed elements themselves instead avoids ever making that 0×0 div into
   a broken containing block. */
:root[data-theme="light"] .pl-chat__teaser,
:root[data-theme="light"] .pl-chat__launcher,
:root[data-theme="light"] .pl-chat__shell,
:root[data-theme="light"] .service-icon,
:root[data-theme="light"] .glry-icon,
:root[data-theme="light"] .gallery-icon,
:root[data-theme="light"] .gallery-icon-circle,
:root[data-theme="light"] .additions:hover,
/* Dark contrast washes sitting ON TOP of a video/image (so its own text
   stays legible) — a plain CSS gradient div, not a photo, so it isn't
   caught by the img/video rule above, but it still needs to cancel the
   invert: otherwise a wash meant to DARKEN the media behind it inverts
   into a wash that LIGHTENS it instead, turning every hero/card image
   into a washed-out haze (that's the "too much white" over the videos). */
:root[data-theme="light"] .hero-v2-overlay,
:root[data-theme="light"] .craft-card-overlay,
:root[data-theme="light"] .marquee-tile-overlay,
:root[data-theme="light"] .proj-tile-overlay,
:root[data-theme="light"] .proj-tile-overlay-strong,
:root[data-theme="light"] .pv2-card-overlay,
:root[data-theme="light"] .overlay,
/* Decorative section banners set as a plain CSS `background-image` (inline
   or in style.css) rather than an <img> tag — same "must stay a real photo"
   requirement, just not caught by the img/video rule since there's no img
   element to match. Covers the gallery/project/about-us/careers/services/
   contact-us page banners. */
:root[data-theme="light"] .gallery_section_2D,
:root[data-theme="light"] .gallery_section_2D_p,
:root[data-theme="light"] .gallery_section,
:root[data-theme="light"] .about-us-desc,
:root[data-theme="light"] .about-us-slider,
:root[data-theme="light"] .about-us_section,
:root[data-theme="light"] .background-section,
:root[data-theme="light"] .background_sections-cave,
:root[data-theme="light"] .building-design-3d-wrapper,
:root[data-theme="light"] .company_backdrop,
:root[data-theme="light"] .contactus_section,
:root[data-theme="light"] .game_art_production_section,
:root[data-theme="light"] .portfolio_inner_section,
:root[data-theme="light"] .production-team-section-contact-us,
:root[data-theme="light"] [class=".jobs-backround-container"] {
  filter: invert(1) hue-rotate(180deg);
}

/* Some of the above already carry their own `filter:` (icon recoloring,
   hover effects) in the base stylesheet — chain the cancel-out AFTER that
   original effect rather than replacing it. */
:root[data-theme="light"] .card-services:hover .service-icon {
  filter: invert(1) hue-rotate(180deg) invert(65%) sepia(66%) saturate(6268%) hue-rotate(355deg) brightness(101%) contrast(101%);
}
:root[data-theme="light"] .service-icon {
  filter: invert(1) hue-rotate(180deg) invert(100%) sepia(0%) saturate(10%) hue-rotate(214deg) brightness(106%) contrast(102%);
}
:root[data-theme="light"] .glry:hover .glry-icon,
:root[data-theme="light"] .gallery-icon:hover,
:root[data-theme="light"] .gallery-icon-circle:hover,
:root[data-theme="light"] .is-active .glry-icon {
  filter: invert(1) hue-rotate(180deg) invert(65%) sepia(66%) saturate(6268%) hue-rotate(355deg) brightness(101%) contrast(101%);
}
:root[data-theme="light"] .glry-icon.active,
:root[data-theme="light"] .gallery-icon.active,
:root[data-theme="light"] .gallery-icon.active:hover,
:root[data-theme="light"] .gallery-icon-circle:hover,
:root[data-theme="light"] .gallery-icon-circle.active,
:root[data-theme="light"] .is-active .gallery-icon-circle {
  filter: invert(1) hue-rotate(180deg) invert(50%) sepia(74%) saturate(2783%) hue-rotate(351deg) brightness(102%) contrast(101%);
}
:root[data-theme="light"] .glry-icon,
:root[data-theme="light"] .gallery-icon,
:root[data-theme="light"] .gallery-icon-circle,
:root[data-theme="light"] .additions:hover {
  filter: invert(1) hue-rotate(180deg) invert(43%) sepia(87%) saturate(809%) hue-rotate(347deg) brightness(101%) contrast(101%);
}

/* ---- The toggle switch itself: always the same look in both themes ---- */
.pl-theme-toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  width: 54px;
  height: 28px;
  /* Explicit all 4 sides: the base stylesheet has a blanket `button {
     margin: 10px }` rule, and this class selector only beats it on
     whichever side gets a value here (a class beats a bare element
     selector) — leaving the others unset let 10px leak in from that base
     rule on top/right/bottom, nudging the whole toggle down. */
  margin: 0 0 0 14px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  cursor: pointer;
  flex: 0 0 auto;
}

.pl-theme-toggle:hover {
  border-color: rgba(255, 255, 255, 0.32);
}

.pl-theme-icon {
  /* Pinned by its own exact center (left/top + translate(-50%,-50%)) to
     the precise coordinate each knob circle rests at, instead of flexbox
     text alignment (which centers the glyph's line box, not necessarily
     the glyph itself, and kept landing slightly off). */
  position: absolute;
  z-index: 2;
  top: 50%;
  font-size: 12px;
  line-height: 1;
  color: rgba(255, 255, 255, 0.55);
  transition: color 0.2s ease;
  pointer-events: none;
}

/* Track is 54px wide with a 20px knob resting at left:3px (dark) or
   translateX(26px) from there (light) — knob centers sit at x=13 and
   x=39. */
.pl-theme-icon-moon {
  left: 13px;
  transform: translate(-50%, -50%);
}

.pl-theme-icon-sun {
  left: 39px;
  transform: translate(-50%, -50%);
}

.pl-theme-toggle-knob {
  position: absolute;
  z-index: 1;
  top: 50%;
  left: 3px;
  width: 20px;
  height: 20px;
  margin-top: -10px;
  border-radius: 50%;
  background: linear-gradient(135deg, #ff9a3c, #ff5b1f);
  transition: transform 0.25s ease;
}

:root[data-theme="light"] .pl-theme-toggle .pl-theme-toggle-knob {
  transform: translateX(26px);
}

:root:not([data-theme="light"]) .pl-theme-icon-moon,
:root[data-theme="light"] .pl-theme-icon-sun {
  color: #fff;
}

.nav-theme-item {
  /* Match the CONTACT US button next to it: that one sits flush at the
     TOP of its nav-item, not vertically centered, so align-items:center
     here (both are 28px tall) made this one sit visibly lower/misaligned. */
  display: flex;
  align-items: flex-start;
}

@media (max-width: 991px) {
  .nav-theme-item {
    margin: 10px 0;
    align-items: center;
  }
}

/* Form fields: confirmed empirically that a real <input>/<textarea>'s own
   background-color does NOT reliably repaint through an ancestor CSS
   `filter` the way every other element does — tried a cancel-out filter
   directly on the field (worked for some inputs, not consistently for
   others, not at all for the textarea even with extra compositing hints).
   Rather than keep fighting that per-element unreliability, these are
   made fully transparent instead — a transparent background has no color
   for a broken filter to get wrong — and the actual visible surface is
   painted by their `.form-group` wrapper div instead, which (being a
   perfectly ordinary div, not a native form widget) inverts correctly
   every time, same as everything else on the page. */
:root[data-theme="light"] .form-control,
:root[data-theme="light"] .text-area,
:root[data-theme="light"] .text-area-gallery,
:root[data-theme="light"] input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="submit"]):not([type="button"]),
:root[data-theme="light"] textarea,
:root[data-theme="light"] select {
  background-color: transparent;
  color: #1c1c1c;
  /* Transparent, not just lighter — the wrapper below now draws the whole
     visible box (background + rounded corners + shadow); the field's own
     (differently-rounded, originally dark) border was showing through as
     a mismatched second box outline right at the wrapper's edge. */
  border-color: transparent;
}

:root[data-theme="light"] .form-group:has(.form-control),
:root[data-theme="light"] .form-group:has(.text-area),
:root[data-theme="light"] .form-group:has(textarea) {
  background: linear-gradient(180deg, #f3f4f6 0%, #eaecef 100%);
  border-radius: 8px;
  box-shadow: inset 0 1px 2px rgba(20, 20, 25, 0.06);
}

:root[data-theme="light"] .form-control:hover,
:root[data-theme="light"] .form-control:focus,
:root[data-theme="light"] .text-area:hover,
:root[data-theme="light"] .text-area:focus {
  border-color: transparent;
  outline: none;
}

:root[data-theme="light"] input::placeholder,
:root[data-theme="light"] textarea::placeholder {
  color: #6b7280;
}

/* ---- Light-theme-only polish -------------------------------------------
   Everything below only ever touches [data-theme="light"] — dark theme is
   completely untouched by any of it. */

/* The site's recurring "hollow" heading style (transparent fill + a 1-2px
   stroke, used for big background titles like "Contact us", "3D 2D",
   "RETURNAL"...) was tuned for a darker backdrop. Once that backdrop's own
   contrast wash flips lighter, the thin stroke reads as a faint, blurry
   "fog" instead of a crisp outline. A soft dark glow behind the letters
   restores the contrast without changing the hollow-outline look itself. */
:root[data-theme="light"] .section-title-home,
:root[data-theme="light"] .section-title-home-s,
:root[data-theme="light"] .section-title-home-pixalot,
:root[data-theme="light"] .section-title-home-executive-team,
:root[data-theme="light"] .hero-title-G,
:root[data-theme="light"] .main-side-headings h2,
:root[data-theme="light"] .need-txt-gallery,
:root[data-theme="light"] .team-txt-gallery,
:root[data-theme="light"] .titleFont,
:root[data-theme="light"] .fill {
  text-shadow: 0 4px 30px rgba(20, 20, 25, 0.5), 0 1px 3px rgba(20, 20, 25, 0.35);
}

/* A flat, single-tone white reads as clinical/harsh across a long page —
   Apple's own marketing pages lean on subtle warm/cool off-white shifts
   and soft card elevation instead. This nudges the base tone off pure
   white and gives the recurring card/tile surfaces a gentle sheen + lift
   so the light theme reads as "designed" rather than "inverted". */
:root[data-theme="light"] body {
  background-color: #f7f7f9;
}

/* Needs its own cancel-out filter (same as everywhere else in this file) or
   the still-active root invert flips this "light gradient" into a solid
   near-black card — exactly what was happening. But .test-card has real
   text children (name, quote) that rely on the ROOT's single inversion to
   go from their authored white to dark — putting the cancel-filter
   directly on .test-card would cancel that out for them too, reverting
   them to white-on-white. So the gradient lives on a ::before behind the
   real (still normally-inverted) content instead. */
:root[data-theme="light"] .test-card {
  position: relative;
  z-index: 0;
}

:root[data-theme="light"] .test-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  filter: invert(1) hue-rotate(180deg);
  background: linear-gradient(180deg, #ffffff 0%, #f6f7f9 100%);
  box-shadow: 0 1px 2px rgba(20, 20, 25, 0.04), 0 12px 28px rgba(20, 20, 25, 0.08);
}

:root[data-theme="light"] .pl-theme-toggle {
  box-shadow: 0 1px 2px rgba(20, 20, 25, 0.12);
}

/* A photo/video kept "true to itself" under this theme system goes through
   TWO chained filter passes (the root's invert, then this element's own
   canceling invert) instead of dark theme's zero passes — mathematically
   they cancel out, but GPU filter compositing has limited per-pass color
   precision, so a double pass measurably desaturates/flattens contrast
   versus the untouched original. Most images hide this fine, but the
   homepage's 3D/2D/Animation craft cards are already moody, low-key shots,
   and their overlay's own darkening on top made the precision loss read
   as visibly "faded" next to crisper sections. Softening the overlay here
   (light theme only) gives the underlying image more headroom, which
   compensates visually regardless of the exact cause. */
:root[data-theme="light"] .craft-card-overlay {
  background: linear-gradient(180deg, rgba(11, 11, 15, 0.05) 0%, rgba(11, 11, 15, 0.18) 45%, rgba(11, 11, 15, 0.75) 100%);
}