/* Daydream case study — scoped styles for the embedded .dd2-embed
   section on project.html?id=88rising-cd. Selectors here only ever
   match inside .dd2-embed, so this file is a harmless no-op include
   on every other project page. */

  /* ============================================================
     Daydream — v2 experiment. Layout/info-card/motion language
     borrowed from natalieliu.com/projects (floating info card next
     to an oversized title, one big media piece at a time, soft
     drifting blurred-bokeh backdrop, gentle fade+scale+blur reveal)
     — reskinned with Daydream's own gold accent and built entirely
     out of the 6 supplied gallery videos. Font stays Poppins only,
     matching the rest of the site (no separate display face this
     round). Scoped under .dd2-embed so it's inert elsewhere.
     ============================================================ */

  .dd2-embed {
    --gold: #d9a412;
    background: var(--bg);
    position: relative;
    isolation: isolate;
    width: 100vw;
    margin-left: calc(-50vw + 50%);
    font-family: 'Poppins', -apple-system, "Helvetica Neue", Arial, sans-serif;
    color: var(--fg);
    overflow: hidden;
  }

  /* ---- soft drifting bokeh backdrop, sampled from the deck's own
     palette (gold / rose / periwinkle) — fixed so it never seams
     between sections, slowly drifting for a living, dreamy feel ---- */
  .dd2-embed::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    opacity: 0.5;
    background:
      radial-gradient(38vw 38vw at 12% 18%, rgba(217,164,18,0.35), transparent 70%),
      radial-gradient(34vw 34vw at 85% 12%, rgba(199,120,150,0.30), transparent 70%),
      radial-gradient(42vw 42vw at 78% 70%, rgba(120,150,210,0.28), transparent 70%),
      radial-gradient(30vw 30vw at 15% 82%, rgba(217,164,18,0.22), transparent 70%);
    filter: blur(40px);
    animation: dd2-drift 26s ease-in-out infinite alternate;
  }
  :root:not([data-theme="light"]) .dd2-embed::before { opacity: 0.28; }
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .dd2-embed::before { opacity: 0.28; }
  }
  @keyframes dd2-drift {
    from { transform: translate3d(0,0,0) scale(1); }
    to   { transform: translate3d(-2%, 2%, 0) scale(1.08); }
  }
  @media (prefers-reduced-motion: reduce) {
    .dd2-embed::before { animation: none; }
  }

  .dd2-section {
    position: relative;
    max-width: 1500px;
    margin: 0 auto;
    padding: 90px 8vw;
  }

  /* ---- reveal: fade + gentle scale + blur-to-sharp, matching the
     reference's soft focus-pull feel — reversible + debounced, same
     mechanism proven on the Garlica embed ---- */
  .dd2-embed [data-reveal] {
    opacity: 0;
    transform: scale(0.97) translateY(14px);
    filter: blur(6px);
    transition: opacity 0.7s ease, transform 0.7s ease, filter 0.7s ease;
  }
  .dd2-embed [data-reveal].in-view { opacity: 1; transform: scale(1) translateY(0); filter: blur(0); }
  @media (prefers-reduced-motion: reduce) {
    .dd2-embed [data-reveal] { transition: opacity 0.3s ease; transform: none; filter: none; }
  }

  /* ================= HERO PIECE (Daydream logo film) ================= */
  .dd2-hero-frame {
    position: relative;
    max-width: 640px;
    margin: 0 auto;
    aspect-ratio: 3/4;
    border-radius: 28px;
    overflow: hidden;
    box-shadow: 0 40px 80px -30px rgba(0,0,0,0.35);
  }
  .dd2-hero-frame video,
  .dd2-hero-frame img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .dd2-hero-caption {
    text-align: center;
    margin-top: 22px;
    font-size: 13px;
    color: var(--muted);
    letter-spacing: 0.02em;
  }

  /* ---- interaction badge — small circular affordance centered on
     each media, echoing the reference's minimal cursor cue ---- */
  .dd2-badge {
    position: absolute;
    left: 50%; top: 50%;
    transform: translate(-50%, -50%);
    width: 40px; height: 40px;
    border-radius: 50%;
    background: rgba(255,255,255,0.85);
    display: flex; align-items: center; justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
  }
  .dd2-media-frame:hover .dd2-badge { opacity: 1; }
  .dd2-badge svg { width: 16px; height: 16px; }

  /* ================= GALLERY: one artist piece at a time ================= */
  .dd2-gallery-item {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 70px;
    align-items: center;
    padding: 60px 0;
  }
  .dd2-gallery-item:nth-child(even) { direction: rtl; }
  .dd2-gallery-item:nth-child(even) > * { direction: ltr; }
  .dd2-media-frame {
    position: relative;
    aspect-ratio: 4/5;
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 30px 60px -25px rgba(0,0,0,0.3);
    cursor: pointer;
  }
  .dd2-media-frame video { width: 100%; height: 100%; object-fit: cover; display: block; }
  .dd2-gallery-text .index {
    font-size: 13px;
    color: var(--gold);
    font-weight: 600;
    letter-spacing: 0.06em;
    margin-bottom: 12px;
  }
  .dd2-gallery-text h3 {
    font-size: clamp(30px, 3.4vw, 46px);
    font-weight: 700;
    letter-spacing: -0.02em;
    margin: 0 0 14px;
  }
  .dd2-gallery-text p {
    font-size: 15px;
    line-height: 1.7;
    color: var(--muted);
    max-width: 42ch;
  }
  @media (max-width: 900px) {
    .dd2-gallery-item,
    .dd2-gallery-item:nth-child(even) {
      grid-template-columns: 1fr;
      direction: ltr;
      gap: 26px;
      padding: 36px 0;
    }
    .dd2-media-frame { aspect-ratio: 3/4; max-width: 420px; margin: 0 auto; width: 100%; }
    .dd2-gallery-text { text-align: center; }
    .dd2-gallery-text p { margin-left: auto; margin-right: auto; }
  }

  /* ================= CLOSING NOTE ================= */
  .dd2-closing {
    text-align: center;
    padding-top: 20px;
    padding-bottom: 110px;
  }
  .dd2-closing p {
    font-size: 13px;
    color: var(--muted);
    letter-spacing: 0.02em;
  }