/* Final portrait-quality and hero-composition pass for the Styling Easter Egg. */

/* Keep the refreshed portrait assets crisp and predictable inside their feature panels. */
html[data-style-experiment] .work-profile-image-wrap {
  width: min(100%, 720px);
  margin-inline: auto;
}

html[data-style-experiment] .work-profile-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  image-rendering: auto;
  transform: translateZ(0);
}

html[data-style-experiment] .hero-copy,
html[data-style-experiment] .experiments-hero-copy {
  position: relative;
  z-index: 1;
}

/* Clouded keeps its atmospheric portrait, but it remains supporting scenery. */
html[data-style-experiment="clouded"] .hero::after,
html[data-style-experiment="clouded"] .experiments-hero::after {
  max-width: 610px;
}

/* Graffiti loses the portrait in the hero. The wall keeps its paint, stickers and noise. */
html[data-style-experiment="graffiti"] .hero::before,
html[data-style-experiment="graffiti"] .experiments-hero::before {
  inset: 8% -5% auto auto;
  width: min(40vw, 520px);
  aspect-ratio: 1.12;
  background:
    linear-gradient(19deg, transparent 0 30%, rgba(255, 111, 22, 0.96) 31% 43%, transparent 44% 100%),
    radial-gradient(circle at 24% 30%, #e5166f 0 15%, transparent 16%),
    radial-gradient(circle at 73% 68%, #08a9cf 0 19%, transparent 20%),
    repeating-linear-gradient(104deg, #090b12 0 13px, #fff7ea 14px 23px, #e5166f 24px 31px, #08a9cf 32px 43px);
  border: 6px solid var(--line);
  box-shadow: 16px 16px 0 var(--paper-deep), -12px -12px 0 var(--mineral);
  opacity: 0.2;
  transform: rotate(4deg);
}

html[data-style-experiment="graffiti"] .hero h1,
html[data-style-experiment="graffiti"] .experiments-hero h1 {
  max-width: 900px;
}

/* Faceted keeps the angular field, but the portrait now belongs to the profile panel. */
html[data-style-experiment="faceted"] .hero::after,
html[data-style-experiment="faceted"] .experiments-hero::after {
  content: none;
}

html[data-style-experiment="faceted"] .hero::before,
html[data-style-experiment="faceted"] .experiments-hero::before {
  right: -2%;
  top: 5%;
  width: min(44vw, 610px);
  opacity: 0.24;
}

html[data-style-experiment="faceted"] .hero h1,
html[data-style-experiment="faceted"] .experiments-hero h1 {
  max-width: 900px;
}

/* Flat Cartoon swaps the hero portrait for a simple illustrated shape system. */
html[data-style-experiment="cartoon"] .hero::after,
html[data-style-experiment="cartoon"] .experiments-hero::after {
  right: 2%;
  top: 9%;
  width: min(36vw, 470px);
  aspect-ratio: 1;
  background:
    radial-gradient(circle at 38% 34%, var(--paper-light) 0 11%, transparent 12%),
    radial-gradient(circle at 67% 62%, var(--mineral) 0 13%, transparent 14%),
    linear-gradient(145deg, var(--paper-deep), var(--paper-light));
  border: 5px solid var(--line);
  border-radius: 48% 52% 44% 56% / 54% 42% 58% 46%;
  box-shadow: 13px 13px 0 var(--mineral);
  opacity: 0.24;
  transform: rotate(5deg);
}

html[data-style-experiment="cartoon"] .hero h1,
html[data-style-experiment="cartoon"] .experiments-hero h1 {
  max-width: 920px;
}

@media (min-width: 901px) {
  html[data-style-experiment="graffiti"] .hero,
  html[data-style-experiment="faceted"] .hero,
  html[data-style-experiment="cartoon"] .hero {
    gap: clamp(44px, 6vw, 92px);
  }
}

@media (max-width: 900px) {
  html[data-style-experiment="graffiti"] .hero::before,
  html[data-style-experiment="graffiti"] .experiments-hero::before {
    width: min(46vw, 220px);
    right: -18vw;
    top: 12%;
    opacity: 0.15;
    border-width: 4px;
    box-shadow: 8px 8px 0 var(--paper-deep), -6px -6px 0 var(--mineral);
  }

  html[data-style-experiment="faceted"] .hero::before,
  html[data-style-experiment="faceted"] .experiments-hero::before {
    width: min(53vw, 250px);
    right: -19vw;
    top: 10%;
    opacity: 0.13;
  }

  html[data-style-experiment="cartoon"] .hero::after,
  html[data-style-experiment="cartoon"] .experiments-hero::after {
    width: min(45vw, 215px);
    right: -16vw;
    top: 12%;
    opacity: 0.16;
    box-shadow: 8px 8px 0 var(--mineral);
  }
}

@media (max-width: 700px) {
  html[data-style-experiment="graffiti"] .hero h1,
  html[data-style-experiment="graffiti"] .experiments-hero h1,
  html[data-style-experiment="faceted"] .hero h1,
  html[data-style-experiment="faceted"] .experiments-hero h1,
  html[data-style-experiment="cartoon"] .hero h1,
  html[data-style-experiment="cartoon"] .experiments-hero h1 {
    max-width: 100%;
  }

  html[data-style-experiment="graffiti"] .hero-lede,
  html[data-style-experiment="graffiti"] .experiments-hero-lede,
  html[data-style-experiment="faceted"] .hero-lede,
  html[data-style-experiment="faceted"] .experiments-hero-lede,
  html[data-style-experiment="cartoon"] .hero-lede,
  html[data-style-experiment="cartoon"] .experiments-hero-lede {
    max-width: 100%;
  }

  html[data-style-experiment] .work-profile-image-wrap {
    width: 100%;
  }
}