/* Team Caro · Mi Plan Ambient V3
   Desktop-only atmospheric layer. Presentation only. */

@media (min-width: 960px) {
  /* The portal keeps the warm neutral base, but gains depth in the side gutters. */
  body {
    background:
      radial-gradient(900px 520px at 12% 12%, color-mix(in srgb, var(--bronze) 10%, transparent), transparent 64%),
      radial-gradient(760px 500px at 92% 28%, color-mix(in srgb, var(--text) 4%, transparent), transparent 68%),
      linear-gradient(180deg, color-mix(in srgb, var(--ground) 96%, #fff 4%) 0%, var(--ground) 46%, color-mix(in srgb, var(--ground) 92%, #cdbb9e 8%) 100%);
    background-attachment: fixed;
  }

  #portal {
    position: relative;
    isolation: isolate;
    min-height: 100vh;
    background: transparent;
  }

  /* Blurred editorial imagery lives behind the content, never on top of it. */
  #portal::before {
    content: '';
    position: fixed;
    z-index: -2;
    inset: 52px 0 0;
    pointer-events: none;
    background:
      linear-gradient(90deg,
        color-mix(in srgb, var(--ground) 93%, transparent) 0%,
        color-mix(in srgb, var(--ground) 72%, transparent) 15%,
        color-mix(in srgb, var(--ground) 96%, transparent) 33%,
        color-mix(in srgb, var(--ground) 97%, transparent) 67%,
        color-mix(in srgb, var(--ground) 74%, transparent) 85%,
        color-mix(in srgb, var(--ground) 94%, transparent) 100%),
      url('/assets/plan/training-hero.webp') left 8% top 10% / 44vw 68vh no-repeat,
      url('/assets/plan/nutrition-hero.webp') right 5% top 38% / 40vw 64vh no-repeat;
    filter: blur(58px) saturate(.72) contrast(.92);
    opacity: .20;
    transform: scale(1.05);
  }

  /* Soft architectural grain/lines: visible only if you look for them. */
  #portal::after {
    content: '';
    position: fixed;
    z-index: -1;
    inset: 52px 0 0;
    pointer-events: none;
    opacity: .55;
    background:
      linear-gradient(90deg,
        transparent calc(50% - 621px),
        color-mix(in srgb, var(--text) 4%, transparent) calc(50% - 620px),
        transparent calc(50% - 619px),
        transparent calc(50% + 619px),
        color-mix(in srgb, var(--text) 4%, transparent) calc(50% + 620px),
        transparent calc(50% + 621px)),
      radial-gradient(circle at 20% 30%, color-mix(in srgb, var(--bronze) 7%, transparent) 0 1px, transparent 1.2px) 0 0 / 19px 19px;
    mask-image: linear-gradient(180deg, rgba(0,0,0,.9), rgba(0,0,0,.18) 70%, transparent 100%);
  }

  /* Let the Mi Plan breakout feel like a magazine spread floating over the ambience. */
  #portal .ptabpanel[data-tab='plan'] {
    padding-bottom: 46px;
  }

  #portal .ptabpanel[data-tab='plan'] > .grid {
    position: relative;
  }

  #portal .ptabpanel[data-tab='plan'] > .grid::before {
    content: '';
    position: absolute;
    z-index: -1;
    left: -46px;
    right: -46px;
    top: 250px;
    bottom: -34px;
    border-radius: 38px;
    background: linear-gradient(180deg,
      color-mix(in srgb, var(--surface) 72%, transparent),
      color-mix(in srgb, var(--surface) 34%, transparent));
    border: 1px solid color-mix(in srgb, var(--text) 5%, transparent);
    box-shadow: 0 50px 110px -78px rgba(40, 30, 18, .52);
    backdrop-filter: blur(2px);
  }
}

@media (min-width: 1400px) {
  #portal::before { opacity: .24; }
  #portal .ptabpanel[data-tab='plan'] > .grid::before {
    left: -68px;
    right: -68px;
  }
}

@media (max-width: 959px) {
  #portal::before,
  #portal::after,
  #portal .ptabpanel[data-tab='plan'] > .grid::before {
    content: none !important;
  }
}