/* The bright side: Luxara's garden, the world Medusa knew as a girl. The antithesis of the cavern:
   ivory light, royal columns, greenery, pale rose and pale sage, black ink for every text.
   Every colour of the sections is turned by tools/gen-bright.js (css/medusa-bright.gen.css);
   this file adds what a colour swap cannot: the switch, the garden, the portrait and fixes.
   Switched by js/medusa-side.js through <html data-side="bright">. */

/* ---------- the switch, next to "Say Hello" (both sides) ---------- */
.medusa-side-switch {
  --k: 0;
  position: relative; display: inline-flex; align-items: center; flex: none; width: 5.6rem; height: 3rem; margin: 0 2.2rem 0 0; padding: 0;
  border: 1px solid #aab6c859; border-radius: 999px; background: linear-gradient(135deg, #1a2440cc, #0d1424cc); cursor: pointer;
  box-shadow: inset 0 1px 0 #ffffff14, 0 6px 18px #03060e66; transition: background .5s, border-color .5s, box-shadow .5s;
}
.medusa-side-switch__thumb {
  position: absolute; top: 50%; left: .3rem; display: grid; place-items: center; width: 2.3rem; height: 2.3rem; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #3b3263, #171b33); color: #c9b9ff; box-shadow: 0 0 12px #9a6bff66;
  transform: translate(calc(var(--k) * 2.55rem), -50%); transition: transform .55s cubic-bezier(.65, 0, .35, 1), background .5s, color .5s, box-shadow .5s;
}
.medusa-side-switch svg { position: absolute; width: 1.4rem; height: 1.4rem; transition: opacity .4s, transform .55s; }
.medusa-side-switch__sun { opacity: 0; transform: rotate(-90deg) scale(.6); }
.medusa-side-switch:hover { border-color: #c9b9ff99; }
.medusa-side-switch:focus-visible { outline: 2px solid #1769ff; outline-offset: 4px; }
html[data-side="bright"] .medusa-side-switch {
  --k: 1; border-color: #a8874f66; background: linear-gradient(135deg, #fffaf0, #efe4cf); box-shadow: inset 0 1px 0 #ffffff, 0 6px 18px #5c462c26;
}
html[data-side="bright"] .medusa-side-switch__thumb { background: radial-gradient(circle at 35% 30%, #fff6dc, #e8c98a); color: #8a6a2e; box-shadow: 0 0 14px #e8c98aaa; }
html[data-side="bright"] .medusa-side-switch__moon { opacity: 0; transform: rotate(90deg) scale(.6); }
html[data-side="bright"] .medusa-side-switch__sun { opacity: 1; transform: none; }
@media (max-width: 767px) {
  .medusa-side-switch { width: 4.6rem; height: 2.6rem; margin-right: 0; }
  .medusa-side-switch__thumb { left: .25rem; width: 1.9rem; height: 1.9rem; transform: translate(calc(var(--k) * 2rem), -50%); }
  .medusa-side-switch svg { width: 1.2rem; height: 1.2rem; }
}

/* ---------- the language switch, before the side switch: RO first, the page's language lit ---------- */
.medusa-lang-switch {
  position: relative; display: inline-flex; align-items: center; flex: none; height: 3rem; margin: 0 1rem 0 0; padding: .3rem;
  border: 1px solid #aab6c859; border-radius: 999px; background: linear-gradient(135deg, #1a2440cc, #0d1424cc);
  box-shadow: inset 0 1px 0 #ffffff14, 0 6px 18px #03060e66; text-decoration: none; transition: border-color .4s, background .5s;
}
.medusa-lang-switch span {
  display: grid; place-items: center; min-width: 2.6rem; height: 2.3rem; padding: 0 .6rem; border-radius: 999px;
  font: 500 1.1rem/1 var(--_font-default); letter-spacing: .08em; color: #aab6c8; transition: color .4s, background .4s, box-shadow .4s;
}
html[lang="ro"] .medusa-lang-switch [data-lang="ro"], html:not([lang="ro"]) .medusa-lang-switch [data-lang="en"] {
  background: radial-gradient(circle at 35% 30%, #3b3263, #171b33); color: #e6deff; box-shadow: 0 0 12px #9a6bff55;
}
.medusa-lang-switch:hover { border-color: #c9b9ff99; }
.medusa-lang-switch:focus-visible { outline: 2px solid #1769ff; outline-offset: 4px; }
html[data-side="bright"] .medusa-lang-switch { border-color: #a8874f66; background: linear-gradient(135deg, #fffaf0, #efe4cf); box-shadow: inset 0 1px 0 #ffffff, 0 6px 18px #5c462c26; }
html[data-side="bright"] .medusa-lang-switch span { color: #7a6a52; }
html[data-side="bright"][lang="ro"] .medusa-lang-switch [data-lang="ro"], html[data-side="bright"]:not([lang="ro"]) .medusa-lang-switch [data-lang="en"] {
  background: radial-gradient(circle at 35% 30%, #fff6dc, #e8c98a); color: #5c4520; box-shadow: 0 0 14px #e8c98aaa;
}
@media (max-width: 767px) {
  .medusa-lang-switch { height: 2.6rem; margin-right: .6rem; padding: .25rem; }
  .medusa-lang-switch span { min-width: 2rem; height: 1.9rem; padding: 0 .3rem; font-size: .95rem; }
}

/* The circle that spreads from the switch (view transition); without it, a cross-fade. */
::view-transition-old(root), ::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
html.is-side-fading body * { transition: background-color .6s, color .6s, border-color .6s, fill .6s !important; }

/* ---------- page and garden ---------- */
html[data-side="bright"] { color-scheme: light; --b-ivory: #f6f0e4; --b-ink: #1c1915; --b-muted: #5e554a; --b-rose: #e9c9cc; --b-sage: #c9d6bf; --b-gold: #a8874f; }
html[data-side="bright"] body, html[data-side="bright"] .medusa-cosmos { background: var(--b-ivory); }
html[data-side="bright"] .medusa-cosmos__sky {
  background:
    radial-gradient(ellipse 46% 60% at 50% 38%, #fdfaf3 0, transparent 72%),
    radial-gradient(ellipse 40% 34% at 18% 86%, #e9c9cc55, transparent 70%),
    radial-gradient(ellipse 36% 30% at 84% 14%, #c9d6bf66, transparent 70%),
    linear-gradient(180deg, #f8f2e6 0%, #f3ebdc 55%, #eef0e3 100%);
}
html[data-side="bright"] .medusa-cosmos__canvas { display: none; }
/* Royal columns and gardens frame the page on both sides, fading into the ivory middle. */
html[data-side="bright"] .medusa-cosmos__sky::before,
html[data-side="bright"] .medusa-cosmos__sky::after {
  content: ''; position: absolute; top: 0; bottom: 0; width: min(36vw, 640px); background: center / cover no-repeat;
  opacity: .34; filter: saturate(.75) sepia(.16) brightness(1.08);
}
html[data-side="bright"] .medusa-cosmos__sky::before {
  left: 0; background-image: url(../img/bright/garden-columns.webp);
  -webkit-mask-image: linear-gradient(90deg, #000 25%, transparent); mask-image: linear-gradient(90deg, #000 25%, transparent);
}
html[data-side="bright"] .medusa-cosmos__sky::after {
  right: 0; background-image: url(../img/bright/garden-palace.webp);
  -webkit-mask-image: linear-gradient(270deg, #000 25%, transparent); mask-image: linear-gradient(270deg, #000 25%, transparent);
}

/* ---------- hero: Medusa before the curse ----------
   img/medusa-natural.webp sits in the same frame as img/medusa-gaze.webp, so it takes the same place and
   size; js/medusa-hero.js animates it with the same gaze (canvas .medusa-artifact__canvas--bright). */
.medusa-artifact__bright, .medusa-artifact .medusa-artifact__canvas--bright { display: none; }
html[data-side="bright"] .medusa-artifact--gaze canvas:not(.medusa-artifact__canvas--bright),
html[data-side="bright"] .medusa-artifact--gaze .medusa-artifact__fallback { display: none; }
html[data-side="bright"] .medusa-artifact__bright {
  display: block; position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; transition: opacity .7s;
  -webkit-mask-image: linear-gradient(#000 80%, transparent); mask-image: linear-gradient(#000 80%, transparent);
}
html[data-side="bright"] .medusa-artifact .medusa-artifact__canvas--bright { display: block; opacity: 0; }
html[data-side="bright"] .medusa-artifact.is-ready-bright .medusa-artifact__canvas--bright { opacity: 1; }
html[data-side="bright"] .medusa-artifact.is-ready-bright .medusa-artifact__bright { opacity: 0; }

/* ---------- lines and marks drawn as fills ---------- */
html[data-side="bright"] :is(.medusa-page, .medusa-menu-theme) .hamburger__line { background-color: var(--b-ink); }
/* The "sent" badge stays red glass with white text on the bright side too (gen-bright would turn its red into a pastel). */
html[data-side="bright"] .medusa-final__status.is-sent { color: #fff; border-color: #ff9fb466; background: linear-gradient(135deg, #e3264fd9, #9b1236e6); }
html[data-side="bright"] .medusa-final__sent-icon { background: #ffffff26; box-shadow: inset 0 0 0 1px #ffffff59, 0 0 18px #ffffff40; }
/* The menu button is just its two lines, as on the dark side: the glass of .hamburger__base belongs to the open menu panel only. */
html[data-side="bright"] :is(.medusa-page, .medusa-menu-theme) .mxd-nav__hamburger .hamburger__base { background: none; border: 0; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
html[data-side="bright"] .medusa-skip { background: var(--b-ink); color: var(--b-ivory); }

/* ---------- faceted hexagons (carousel arrows, back to top): ivory facets, rose and sage light ---------- */
html[data-side="bright"] :is(.hx-icon .hx-w, .hx .w):nth-child(6n+1) :is(.hx-base, .base) { fill: #fbf6ec; }
html[data-side="bright"] :is(.hx-icon .hx-w, .hx .w):nth-child(6n+2) :is(.hx-base, .base) { fill: #f2e8d7; }
html[data-side="bright"] :is(.hx-icon .hx-w, .hx .w):nth-child(6n+3) :is(.hx-base, .base) { fill: #e9dcc5; }
html[data-side="bright"] :is(.hx-icon .hx-w, .hx .w):nth-child(6n+4) :is(.hx-base, .base) { fill: #e2d3b8; }
html[data-side="bright"] :is(.hx-icon .hx-w, .hx .w):nth-child(6n+5) :is(.hx-base, .base) { fill: #ece1cd; }
html[data-side="bright"] :is(.hx-icon .hx-w, .hx .w):nth-child(6n+6) :is(.hx-base, .base) { fill: #f6efe2; }
html[data-side="bright"] :is(.hx-icon .hx-w, .hx .w):nth-child(3n+1) :is(.hx-lit, .lit) { fill: #efc9d0; }
html[data-side="bright"] :is(.hx-icon .hx-w, .hx .w):nth-child(3n+2) :is(.hx-lit, .lit) { fill: #c9dcbd; }
html[data-side="bright"] :is(.hx-icon .hx-w, .hx .w):nth-child(3n+3) :is(.hx-lit, .lit) { fill: #e3cfa6; }
html[data-side="bright"] :is(.hx .base, .hx-icon .hx-base) { stroke: #a8874f; }
html[data-side="bright"] .hx-icon, html[data-side="bright"] .hx .chev path { color: var(--b-ink); fill: var(--b-ink); }
html[data-side="bright"] .hx-icon__chev { filter: none; }
html[data-side="bright"] .hx { filter: drop-shadow(0 6px 14px #5c462c33); }
/* WhatsApp hexagon above it: ivory with the gold edge, ink glyph; sage light on hover (overrides the generated colours). */
html[data-side="bright"] .hexwa__hex { filter: drop-shadow(0 6px 14px #5c462c33); }
html[data-side="bright"] :is(.hexwa__btn:hover, .hexwa__btn:focus-visible, .hexwa.is-open) .hexwa__hex { filter: drop-shadow(0 6px 14px #5c462c33) drop-shadow(0 0 10px #c9dcbdcc); }
html[data-side="bright"] .hexwa__btn:focus-visible .hexwa__hex { outline-color: #a8874f; }
html[data-side="bright"] .hexwa__shape polygon { fill: #fbf6ec; stroke: #a8874f; stroke-opacity: .7; }
html[data-side="bright"] .hexwa__icon { fill: var(--b-ink); filter: none; }
html[data-side="bright"] :is(.hexwa__btn:hover, .hexwa.is-open) .hexwa__icon { fill: #5f8a45; }
html[data-side="bright"] .hexwa .tip { color: var(--b-ink); background: #fbf6ecf0; border-color: #a8874f80; }
html[data-side="bright"] .hexwa .tip b { color: #8a6a2e; }
/* Its chat panel: ivory paper, gold header and send button, sage-free round bubbles (only the --wa-* colours change). */
html[data-side="bright"] .hexwa { --wa-accent: #a8874f; --wa-on-accent: #fffdf8; --wa-head: linear-gradient(135deg, #a8874f, #c2a46c); --wa-bg: #fbf6ec; --wa-in: #fffdf8; --wa-ink: var(--b-ink); --wa-muted: var(--b-muted); --wa-line: #a8874f4d; --wa-ring: #a8874f33; --wa-link: #7a5c24; }
html[data-side="bright"] .hexwa__panel { box-shadow: 0 24px 60px #5c462c2e, 0 4px 14px #5c462c14; }
html[data-side="bright"] .hexwa__glyph { fill: #5f8a45; }
html[data-side="bright"] .hexwa__online { background: #25d366; box-shadow: 0 0 0 2px #a8874f; }
html[data-side="bright"] .hexwa__avatar { box-shadow: 0 0 0 2px #ffffffb3; }
html[data-side="bright"] .hexwa__send:is(:hover, :focus-visible) { background: #8a6a2e; filter: none; }

/* Phones: the garden stays a faint backdrop so the text keeps its contrast. */
@media (max-width: 767px) {
  html[data-side="bright"] .medusa-cosmos__sky::before, html[data-side="bright"] .medusa-cosmos__sky::after { width: 55vw; opacity: .2; }
}

/* ---------- section 2 (Ideas to Impact): frosted glass over the garden, a white wave under the dome ---------- */
.medusa-impact__wave { display: none; }
html[data-side="bright"] .medusa-impact { background: transparent; }
/* The glass sits on a layer of its own, so its top and bottom can melt into the page. */
html[data-side="bright"] .medusa-impact::before {
  content: ''; position: absolute; inset: 0; z-index: -2; pointer-events: none;
  background: linear-gradient(180deg, #fbf7ef33 0%, #f6f0e42e 55%, #f6f0e440 100%);
  -webkit-backdrop-filter: blur(9px); backdrop-filter: blur(9px);
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 9%, #000 88%, transparent 100%); mask-image: linear-gradient(180deg, transparent 0, #000 9%, #000 88%, transparent 100%);
}
html[data-side="bright"] .medusa-impact__arc { border-color: #ffffffcc; box-shadow: 0 -2px 30px #ffffff99, inset 0 4px 50px #ffffffb3; }
html[data-side="bright"] .medusa-impact__arc::before { background: radial-gradient(ellipse, #ffffffb3, #fff8f033 50%, transparent 72%); }
html[data-side="bright"] .medusa-impact__wave { display: block; position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; filter: blur(14px); pointer-events: none; }
.medusa-impact__wave path { transform-origin: 50% 50%; transform-box: view-box; }
html[data-side="bright"] .medusa-impact__wave-a { opacity: .9; animation: impact-wave-a 14s ease-in-out infinite alternate; }
html[data-side="bright"] .medusa-impact__wave-b { opacity: .55; animation: impact-wave-b 19s ease-in-out infinite alternate; }
@keyframes impact-wave-a { from { transform: rotate(-1.4deg); } to { transform: rotate(1.4deg); } }
@keyframes impact-wave-b { from { transform: rotate(1.8deg) scale(.995); } to { transform: rotate(-1.8deg) scale(1.005); } }
/* The stones in pale rose: the crystals turn from violet to pink, the dark rocks to dusty rose. */
html[data-side="bright"] .medusa-impact__render { filter: sepia(1) saturate(2.2) hue-rotate(300deg) brightness(1.22) contrast(.92) drop-shadow(0 0 .3px var(--impact-line)); }
html[data-side="bright"] .medusa-impact__fallback span { filter: sepia(1) saturate(2.2) hue-rotate(300deg) brightness(1.22) contrast(.92) drop-shadow(0 0 .3px var(--impact-line)); }
@media (prefers-reduced-motion: reduce) { html[data-side="bright"] .medusa-impact__wave path { animation: none; } }

/* One soft grey for every line of the section: orbits, timeline, dome, nodes and pills. */
html[data-side="bright"] .medusa-impact { --impact-line: #5f584f; }
html[data-side="bright"] .medusa-impact__stage::before { background: color-mix(in srgb, var(--impact-line) 55%, transparent); }
html[data-side="bright"] .medusa-impact__node { background: var(--impact-line); box-shadow: 0 0 0 4px color-mix(in srgb, var(--impact-line) 14%, transparent); }
html[data-side="bright"] .medusa-impact__arc { border-color: color-mix(in srgb, var(--impact-line) 45%, transparent); }
html[data-side="bright"] .medusa-impact__label span { background: color-mix(in srgb, var(--impact-line) 55%, transparent); }
html[data-side="bright"] .medusa-impact__tags li, html[data-side="bright"] .medusa-impact__motion { border-color: color-mix(in srgb, var(--impact-line) 45%, transparent); }
html[data-side="bright"] .medusa-impact__number, html[data-side="bright"] .medusa-impact__phase { color: #6b645b; }

/* ---------- section 3 (What We Create): the cave becomes a garden (js/voyage-cave.js setSide);
   the stones of each world turn rose like the ones in section 2. ---------- */
html[data-side="bright"] .medusa-voyage__stone > * { filter: sepia(1) saturate(2.2) hue-rotate(300deg) brightness(1.22) contrast(.92); }

/* ---------- section 4 (Selected Works): the cards' night cover becomes Luxara's light: the screenshots
   are warmed and their dark areas lifted towards parchment (screen blend), with a fine gold dust
   instead of stars (css/selected-works.css). ---------- */
html[data-side="bright"] .medusa-works__visual img { filter: sepia(.28) saturate(.75) contrast(.96); }
html[data-side="bright"] .medusa-works__visual::before { mix-blend-mode: screen; opacity: .55; background: radial-gradient(ellipse 90% 70% at 85% 0%, #f6ead2, transparent 70%), linear-gradient(160deg, #e9dcc0 0%, #dccaa4 55%, #cfba8f 100%); }
html[data-side="bright"] .medusa-works__visual::after {
  background:
    radial-gradient(1.2px 1.2px at 18px 26px, #b8975acc 50%, transparent 52%),
    radial-gradient(1px 1px at 132px 74px, #c9a76a99 50%, transparent 52%),
    radial-gradient(1.6px 1.6px at 204px 158px, #b8975aa6 50%, transparent 52%),
    radial-gradient(1px 1px at 66px 190px, #9fb59a99 50%, transparent 52%),
    radial-gradient(1px 1px at 176px 12px, #b8975a80 50%, transparent 52%),
    radial-gradient(1.3px 1.3px at 96px 128px, #c9a76a99 50%, transparent 52%),
    radial-gradient(ellipse 70% 50% at 20% 25%, #f6dcc633, transparent 70%),
    linear-gradient(180deg, transparent 42%, #f7f3eceb 100%);
  background-size: 230px 230px, 230px 230px, 230px 230px, 230px 230px, 230px 230px, 230px 230px, 100% 100%, 100% 100%;
}
html[data-side="bright"] .medusa-works__visual:hover::before, html[data-side="bright"] .medusa-works__visual:focus-visible::before { opacity: .35; }