/* =========================================================
   Vidartico — consolidated stability layer
   Purpose: keep global header language controls consistent,
   preserve the original dark hero geometry, mirror it in light,
   and provide self-contained homepage kinetic typography.
   No versioned layout overrides live here.
   ========================================================= */

/* ---------------------------------------------------------
   LANGUAGE SWITCHER — one markup / one visual on every page
   --------------------------------------------------------- */
.header-controls .header-lang-switch,
.header-lang-switch {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: .32rem !important;
  height: 34px;
  white-space: nowrap;
}

.header-lang-link {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: .28rem !important;
  width: auto !important;
  min-width: 0 !important;
  height: 34px !important;
  padding: 0 .08rem !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  text-decoration: none !important;
  opacity: .72;
  transition: opacity .18s ease, color .18s ease;
}

.header-lang-link:hover,
.header-lang-link:focus-visible,
.header-lang-link.is-current {
  opacity: 1;
  background: transparent !important;
}

.header-lang-flag {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  font-size: 1.02rem !important;
  line-height: 1 !important;
  filter: saturate(.82) contrast(.96);
  transform: translateY(-.02em);
}

.header-lang-code {
  display: inline !important;
  color: rgba(241,245,249,.88) !important;
  font-size: .7rem !important;
  font-weight: 600;
  letter-spacing: .12em !important;
  line-height: 1;
}

.header-lang-link.is-current .header-lang-code {
  color: var(--vid-color-accent, #d4b06a) !important;
}

.header-lang-sep {
  display: inline !important;
  margin: 0 .08rem !important;
  color: var(--vid-color-accent, #d4b06a) !important;
  opacity: .74 !important;
  font-size: .78rem !important;
}

@media (max-width: 960px) {
  .header-controls .header-lang-switch,
  .header-lang-switch {
    gap: .22rem !important;
    height: 30px;
  }

  .header-lang-link {
    width: auto !important;
    min-width: 0 !important;
    height: 30px !important;
    padding: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
  }

  .header-lang-flag {
    display: inline-flex !important;
    font-size: .96rem !important;
  }

  .header-lang-code {
    display: inline !important;
    font-size: .64rem !important;
    letter-spacing: .085em !important;
  }

  .header-lang-sep {
    display: inline !important;
    margin: 0 .03rem !important;
  }
}

/* ---------------------------------------------------------
   HERO FRAME
   Dark theme is intentionally untouched: its existing ::before
   geometry remains the single source of truth.
   Light only swaps the frame/motif colour and removes the old
   second ::after ornament layer.
   --------------------------------------------------------- */
html[data-vid-theme="light"] .home-hero::before,
html[data-vid-theme="light"] .page-hero::before,
html[data-vid-theme="light"] .about-hero::before {
  border-color: #7A1F2B !important;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cg fill='none' stroke='%237A1F2B' stroke-width='1.2' stroke-linecap='round'%3E%3Ccircle cx='20' cy='20' r='3'/%3E%3Ccircle cx='20' cy='9' r='2.4'/%3E%3Ccircle cx='20' cy='31' r='2.4'/%3E%3Ccircle cx='9' cy='20' r='2.4'/%3E%3Ccircle cx='31' cy='20' r='2.4'/%3E%3Cpath d='M20 6v14M20 20v14M6 20h14M20 20h14'/%3E%3C/g%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cg fill='none' stroke='%237A1F2B' stroke-width='1.2' stroke-linecap='round'%3E%3Ccircle cx='20' cy='20' r='3'/%3E%3Ccircle cx='20' cy='9' r='2.4'/%3E%3Ccircle cx='20' cy='31' r='2.4'/%3E%3Ccircle cx='9' cy='20' r='2.4'/%3E%3Ccircle cx='31' cy='20' r='2.4'/%3E%3Cpath d='M20 6v14M20 20v14M6 20h14M20 20h14'/%3E%3C/g%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cg fill='none' stroke='%237A1F2B' stroke-width='1.2' stroke-linecap='round'%3E%3Ccircle cx='20' cy='20' r='3'/%3E%3Ccircle cx='20' cy='9' r='2.4'/%3E%3Ccircle cx='20' cy='31' r='2.4'/%3E%3Ccircle cx='9' cy='20' r='2.4'/%3E%3Ccircle cx='31' cy='20' r='2.4'/%3E%3Cpath d='M20 6v14M20 20v14M6 20h14M20 20h14'/%3E%3C/g%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cg fill='none' stroke='%237A1F2B' stroke-width='1.2' stroke-linecap='round'%3E%3Ccircle cx='20' cy='20' r='3'/%3E%3Ccircle cx='20' cy='9' r='2.4'/%3E%3Ccircle cx='20' cy='31' r='2.4'/%3E%3Ccircle cx='9' cy='20' r='2.4'/%3E%3Ccircle cx='31' cy='20' r='2.4'/%3E%3Cpath d='M20 6v14M20 20v14M6 20h14M20 20h14'/%3E%3C/g%3E%3C/svg%3E") !important;
}

html[data-vid-theme="light"] .home-hero::after,
html[data-vid-theme="light"] .page-hero::after,
html[data-vid-theme="light"] .about-hero::after {
  content: none !important;
  display: none !important;
  background-image: none !important;
}

/* ---------------------------------------------------------
   HOME HERO — CSS-native kinetic typography.
   It does not depend on JS boot order, so mobile/cache variants
   cannot leave the roles permanently static.
   --------------------------------------------------------- */
.hero-kinetic {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .32rem .52rem;
  min-height: 1.55rem;
  margin: .2rem 0 .72rem;
  color: rgba(248,250,252,.94);
  font-size: clamp(.72rem,1.35vw,.86rem);
  line-height: 1.2;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.hero-kinetic__primary { font-weight: 700; }
.hero-kinetic__plus {
  color: var(--vid-color-accent, #d4b06a);
  font-weight: 700;
}

.hero-kinetic__rotator {
  position: relative;
  display: inline-grid;
  min-width: 11.5ch;
  min-height: 1.2em;
  overflow: hidden;
}

.hero-kinetic__role {
  grid-area: 1 / 1;
  opacity: 0;
  transform: translateY(7px);
  pointer-events: none;
  white-space: nowrap;
  animation: vidHeroRoleCycle 11.4s linear infinite;
}

.hero-kinetic__role:nth-child(1) { animation-delay: 0s; }
.hero-kinetic__role:nth-child(2) { animation-delay: 2.85s; }
.hero-kinetic__role:nth-child(3) { animation-delay: 5.70s; }
.hero-kinetic__role:nth-child(4) { animation-delay: 8.55s; }

@keyframes vidHeroRoleCycle {
  0%   { opacity: 0; transform: translateY(7px); }
  3%   { opacity: 1; transform: translateY(0); }
  20%  { opacity: 1; transform: translateY(0); }
  24%  { opacity: 0; transform: translateY(-6px); }
  100% { opacity: 0; transform: translateY(-6px); }
}

@media (max-width: 700px) {
  .hero-kinetic {
    flex-wrap: nowrap;
    gap: .27rem .38rem;
    font-size: clamp(.67rem, 2.8vw, .78rem);
    letter-spacing: .105em;
  }

  .hero-kinetic__rotator {
    min-width: 11.2ch;
  }
}

/* ---------- Optional Next Show slot ---------- */
.hero-next-show {
  display: grid;
  grid-template-columns: auto minmax(0,1fr) auto;
  align-items: center;
  gap: .75rem 1rem;
  margin-top: 1rem;
  padding-top: .85rem;
  border-top: 1px solid rgba(255,255,255,.16);
  max-width: 520px;
}
.hero-next-show__eyebrow {
  color: var(--vid-color-accent, #d4b06a);
  font-size: .63rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
}
.hero-next-show__body { min-width: 0; }
.hero-next-show__meta,
.hero-next-show__title { margin: 0; }
.hero-next-show__meta {
  color: rgba(248,250,252,.72);
  font-size: .7rem;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.hero-next-show__title {
  margin-top: .12rem;
  color: #fff;
  font-size: .86rem;
  font-weight: 650;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hero-next-show__link {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1px solid rgba(212,176,106,.5);
  border-radius: 999px;
  color: #fff;
  text-decoration: none;
}

/* Approved, isolated desktop portfolio micro-motion. */
@media (hover: hover) and (pointer: fine) and (min-width: 769px) {
  .vid-pf .pf-thumb { display: block; overflow: hidden; }
  .vid-pf .pf-thumb img {
    transition: transform .48s cubic-bezier(.22,1,.36,1), filter .35s ease;
    transform-origin: center;
  }
  .vid-pf .pf-item__title {
    transition: transform .3s cubic-bezier(.22,1,.36,1);
  }
  .vid-pf .pf-item:hover .pf-thumb img,
  .vid-pf .pf-item:focus-within .pf-thumb img {
    transform: scale(1.025);
    filter: contrast(1.025);
  }
  .vid-pf .pf-item:hover .pf-item__title,
  .vid-pf .pf-item:focus-within .pf-item__title {
    transform: translateY(-4px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-kinetic__role {
    animation: none !important;
    opacity: 0 !important;
    transform: none !important;
  }
  .hero-kinetic__role.is-active,
  .hero-kinetic__role:first-child {
    opacity: 1 !important;
  }
}

/* MOBILE HERO GEOMETRY — authoritative final rule 2026-08-24 */
/* Desktop is already correct. Mobile now uses the exact same inner-frame geometry. */
@media (max-width: 900px) {
  html body .home-hero::before,
  html body .page-hero::before,
  html body .about-hero::before {
    inset: 10px !important;
    border-radius: 22px !important;
    background-size: 18px 18px !important;
    background-position:
      8px 8px,
      calc(100% - 8px) 8px,
      8px calc(100% - 8px),
      calc(100% - 8px) calc(100% - 8px) !important;
  }

  /* Light uses the same frame, only burgundy colour; never a second ornament layer. */
  html[data-vid-theme="light"] body .home-hero::after,
  html[data-vid-theme="light"] body .page-hero::after,
  html[data-vid-theme="light"] body .about-hero::after {
    content: none !important;
    display: none !important;
    background: none !important;
  }
}