/*
  ══════════════════════════════════════════════════════════
  CURATED CONNECTIONS — CINEMATIC ATMOSPHERE SYSTEM
  Surrounds the centered mobile canvas on larger screens.
  Zero impact on app layout. Pure environmental world-building.
  Only activates at ≥ 520px — the app canvas itself is never touched.
  ══════════════════════════════════════════════════════════
*/

/* ── ONLY on screens wider than the mobile canvas ── */
@media (min-width: 520px) {

  html {
    background: #03080502; /* near-black, slightly warmer than pure black */
  }

  body {
    background: transparent;
    overflow-x: hidden;
  }

  /* ── ATMOSPHERIC BASE LAYER ── */
  /* Fixed behind everything. The warmth of a distant fire. */
  .cc-atmosphere {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
  }

  /* Primary ambient — firelight warmth, bottom-left origin */
  .cc-atm-glow-1 {
    position: absolute;
    width: 60vw;
    height: 60vh;
    bottom: -10%;
    left: -5%;
    background: radial-gradient(
      ellipse at 30% 70%,
      rgba(180, 90, 20, 0.09)  0%,
      rgba(140, 60, 10, 0.055) 35%,
      rgba(100, 40,  5, 0.02)  60%,
      transparent              80%
    );
    animation: atmBreath1 9s ease-in-out infinite;
  }

  /* Secondary ambient — cool moonlight, top-right, very subtle */
  .cc-atm-glow-2 {
    position: absolute;
    width: 50vw;
    height: 50vh;
    top: -5%;
    right: -5%;
    background: radial-gradient(
      ellipse at 70% 20%,
      rgba(60, 80, 120, 0.06)  0%,
      rgba(40, 55,  90, 0.03)  40%,
      transparent              70%
    );
    animation: atmBreath2 12s ease-in-out infinite;
  }

  /* Tertiary — deep purple whisper, center-right */
  .cc-atm-glow-3 {
    position: absolute;
    width: 40vw;
    height: 40vh;
    top: 35%;
    right: 5%;
    background: radial-gradient(
      ellipse at 60% 50%,
      rgba(80, 40, 110, 0.045) 0%,
      rgba(50, 25,  75, 0.02)  45%,
      transparent              70%
    );
    animation: atmBreath3 15s ease-in-out infinite;
  }

  /* Vignette — darkens the far edges, draws eye to center */
  .cc-atm-vignette {
    position: absolute;
    inset: 0;
    background: radial-gradient(
      ellipse 65% 75% at 50% 50%,
      transparent                   40%,
      rgba(2,  5, 3,  0.18)         65%,
      rgba(1,  3, 2,  0.45)         80%,
      rgba(0,  2, 1,  0.72)        100%
    );
  }

  /* Canvas for drifting particles — injected by atmosphere.js */
  #cc-particles {
    position: absolute;
    inset: 0;
    opacity: 0.55;
  }

  /* ── BREATHING ANIMATIONS ── */
  /* Slow, gentle — like a fire that breathes */

  @keyframes atmBreath1 {
    0%   { transform: scale(1)    translateX(0)     translateY(0);     opacity: 1;    }
    33%  { transform: scale(1.08) translateX(2%)    translateY(-3%);   opacity: 0.85; }
    66%  { transform: scale(0.96) translateX(-2%)   translateY(2%);    opacity: 0.95; }
    100% { transform: scale(1)    translateX(0)     translateY(0);     opacity: 1;    }
  }

  @keyframes atmBreath2 {
    0%   { transform: scale(1)    translateX(0)     translateY(0);     opacity: 1;    }
    40%  { transform: scale(1.06) translateX(-3%)   translateY(4%);    opacity: 0.75; }
    80%  { transform: scale(0.94) translateX(2%)    translateY(-2%);   opacity: 0.9;  }
    100% { transform: scale(1)    translateX(0)     translateY(0);     opacity: 1;    }
  }

  @keyframes atmBreath3 {
    0%   { transform: scale(1)    translateX(0)     translateY(0);     opacity: 1;    }
    50%  { transform: scale(1.12) translateX(-4%)   translateY(-3%);   opacity: 0.7;  }
    100% { transform: scale(1)    translateX(0)     translateY(0);     opacity: 1;    }
  }

  /* ── SIDE PANELS — flanking the app canvas ── */
  /* Very subtle texture in the space beside the app */
  .cc-atm-left-panel,
  .cc-atm-right-panel {
    position: fixed;
    top: 0;
    bottom: 0;
    width: calc((100vw - 430px) / 2);
    pointer-events: none;
    z-index: 0;
  }
  .cc-atm-left-panel  { left: 0; }
  .cc-atm-right-panel { right: 0; }

  /* Faint grain texture on the side panels */
  .cc-atm-left-panel::before,
  .cc-atm-right-panel::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.035'/%3E%3C/svg%3E");
    background-size: 180px;
    opacity: 0.6;
  }

  /* Thin amber edge-glow on the inside edges of the side panels */
  .cc-atm-left-panel::after {
    content: '';
    position: absolute;
    top: 0; bottom: 0; right: 0;
    width: 1px;
    background: linear-gradient(
      to bottom,
      transparent,
      rgba(180, 100, 30, 0.06) 30%,
      rgba(180, 100, 30, 0.09) 50%,
      rgba(180, 100, 30, 0.06) 70%,
      transparent
    );
  }
  .cc-atm-right-panel::after {
    content: '';
    position: absolute;
    top: 0; bottom: 0; left: 0;
    width: 1px;
    background: linear-gradient(
      to bottom,
      transparent,
      rgba(180, 100, 30, 0.06) 30%,
      rgba(180, 100, 30, 0.09) 50%,
      rgba(180, 100, 30, 0.06) 70%,
      transparent
    );
  }

}

/* ── MOBILE: atmosphere off ── */
@media (max-width: 519px) {
  .cc-atmosphere, .cc-atm-left-panel, .cc-atm-right-panel, #cc-particles { display: none; }
}

/*
  ══════════════════════════════════════════════════════════
  TABLET CINEMATIC ENVIRONMENT — 768px+
  Wider content stage. Soft edge blending. No sparkles.
  Bokeh · dust · embers · depth fog · warmth bleed.
  Late-night porch. Lantern-lit cabin. Candlelit reflection.
  ══════════════════════════════════════════════════════════
*/
@media (min-width: 768px) {

  /* App stays at 430px — the atmosphere frames it */

  .cc-atm-left-panel, .cc-atm-right-panel {
    width: calc((100vw - 660px) / 2);
  }

  /* ── EDGE DISSOLVE — no hard line ── */
  #cc-edge-fade-left {
    position: fixed; top: 0; bottom: 0;
    left: calc((100vw - 660px) / 2);
    width: 36px; z-index: 12; pointer-events: none;
    background: linear-gradient(to right, rgba(2,5,8,0.72) 0%, transparent 100%);
  }
  #cc-edge-fade-right {
    position: fixed; top: 0; bottom: 0;
    right: calc((100vw - 660px) / 2);
    width: 36px; z-index: 12; pointer-events: none;
    background: linear-gradient(to left, rgba(2,5,8,0.72) 0%, transparent 100%);
  }

  /* ── CONTAINER WARMTH BLEED ── */
  /* Sized to zoomed visual footprint: 430px × 1.22 ≈ 524px */
  #cc-frame-glow {
    position: fixed; top: 0; bottom: 0;
    left: calc((100vw - 660px) / 2);
    width: 660px; z-index: 3; pointer-events: none;
    box-shadow:
      -30px 0  60px  8px rgba(195,115,38,0.09),
       30px 0  60px  8px rgba(195,115,38,0.09),
      -65px 0 120px 22px rgba(165,82,22,0.055),
       65px 0 120px 22px rgba(165,82,22,0.055),
     -110px 0 220px 40px rgba(130,58,15,0.028),
      110px 0 220px 40px rgba(130,58,15,0.028);
  }

  /* ── DEEPER AMBIENT GLOWS ── */
  .cc-atm-glow-1 {
    width: 55vw; height: 65vh; bottom: -12%; left: -8%;
    background: radial-gradient(ellipse at 22% 78%,
      rgba(195,100,25,0.13) 0%, rgba(155,68,14,0.07) 30%,
      rgba(115,42,8,0.028) 55%, transparent 78%);
  }
  .cc-atm-glow-2 {
    width: 48vw; height: 52vh; top: -6%; right: -6%;
    background: radial-gradient(ellipse at 78% 18%,
      rgba(55,75,128,0.09) 0%, rgba(38,55,98,0.045) 40%, transparent 68%);
  }
  .cc-atm-glow-3 {
    width: 50vw; height: 48vh; bottom: -8%; right: 5%;
    background: radial-gradient(ellipse at 58% 88%,
      rgba(38,48,108,0.08) 0%, rgba(24,30,78,0.038) 50%, transparent 75%);
    animation: atmBreath2 19s ease-in-out infinite;
    animation-delay: -7s;
  }

  /* ── DEEPER VIGNETTE ── */
  .cc-atm-vignette {
    background: radial-gradient(ellipse 52% 66% at 50% 50%,
      transparent 32%, rgba(2,4,10,0.28) 56%,
      rgba(1,2,8,0.62) 74%, rgba(0,1,6,0.88) 100%);
  }

  /* Fog and fairy lights canvases */
  #cc-fog {
    position: fixed; inset: 0; z-index: 2; pointer-events: none;
  }
  #cc-fairy-lights {
    position: fixed; inset: 0; z-index: 6; pointer-events: none;
  }
  #cc-particles { opacity: 1; z-index: 7; }

  .cc-atm-left-panel::after, .cc-atm-right-panel::after {
    background: linear-gradient(to bottom,
      transparent, rgba(185,105,32,0.10) 22%,
      rgba(185,105,32,0.15) 50%, rgba(185,105,32,0.10) 78%, transparent);
  }
}

/* ── LARGE TABLET / LANDSCAPE ── */
@media (min-width: 1024px) {
  .cc-atm-left-panel, .cc-atm-right-panel { width: calc((100vw - 660px) / 2); }
  #cc-frame-glow { left: calc((100vw - 660px) / 2); width: 660px; }
  #cc-edge-fade-left  { left:  calc((100vw - 660px) / 2); }
  #cc-edge-fade-right { right: calc((100vw - 660px) / 2); }
}