/* The Egg Is NEAR: the reveal film's pastel dunes, aurora sky and iridescent
   silver-and-pink shell. The hero frames a still from the film in an egg that cracks;
   each step's number is an egg that cracks a little further. */
body.egg-theme { --paper: #f6f0f5; --ink: #2a2135; --muted: #675d73; --line: #e3d6e2; --accent: #c92f86; background: radial-gradient(55% 520px at 12% 0%, rgba(104, 226, 205, .30), transparent 70%), radial-gradient(45% 480px at 92% 2%, rgba(240, 111, 192, .24), transparent 70%), linear-gradient(180deg, #eef2fa 0, #f6f0f5 820px) no-repeat, #f6f0f5; color: var(--ink); }
.egg-theme .portfolio-footer { --line: #e3d6e2; }
.campaign-egg { --campaign-accent: #c92f86; --egg-pink: #f06fc0; --egg-teal: #58dcc8; --egg-lilac: #b9a7f5; --egg-shell: conic-gradient(from 200deg at 50% 45%, #eef1f6, #f8bde3, #c9b8fb, #a8f1e4, #eef1f6, #f8bde3, #eef1f6); }

/* Hero */
.campaign-egg .egg-hero { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(30px, 5vw, 90px); align-items: center; padding: 26px 0 50px; }
.egg-hero-copy { min-width: 0; }
.campaign-egg .campaign-hero-meta > span:first-child { color: var(--accent); }
.campaign-egg .egg-hero h1 { max-width: 10ch; margin: 0 0 26px; font-size: clamp(54px, 7.4vw, 118px); font-weight: 600; letter-spacing: -.055em; line-height: .92; background: linear-gradient(100deg, #2a2135 0%, #2a2135 30%, #7a52e0 45%, #d6409c 55%, #2a2135 70%, #2a2135 100%); background-size: 250% 100%; background-position: 100% 0; -webkit-background-clip: text; background-clip: text; color: transparent; animation: egg-sheen 9s ease-in-out infinite; }
.campaign-egg .egg-hero .campaign-summary { max-width: 44ch; color: var(--muted); font-size: clamp(18px, 1.6vw, 21px); }
.egg-hero-art { display: grid; justify-items: center; gap: 14px; margin: 0; }
.egg-shell { position: relative; width: min(100%, 400px); aspect-ratio: 4 / 5; padding: 9px; border-radius: 50% 50% 50% 50% / 58% 58% 42% 42%; isolation: isolate; box-shadow: 0 50px 90px -40px rgba(201, 47, 134, .55), 0 20px 50px -30px rgba(88, 220, 200, .6); }
.egg-shell::before { content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: var(--egg-shell); animation: egg-iridesce 10s linear infinite; }
.egg-shell-inner { position: relative; overflow: hidden; height: 100%; border-radius: inherit; background: #f4dbe9; }
.egg-shell-inner img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 51% 56%; transform: scale(1.45); transform-origin: 51% 56%; }
.egg-shell-inner::after { content: ''; position: absolute; inset: 0; border-radius: inherit; background: radial-gradient(40% 30% at 30% 18%, rgba(255, 255, 255, .55), transparent 70%); pointer-events: none; }
.egg-crack { position: absolute; z-index: 1; left: 0; top: 40%; width: 100%; height: 9%; overflow: visible; pointer-events: none; }
.egg-crack path { fill: none; stroke: #fff; stroke-width: 2.4; stroke-linejoin: round; vector-effect: non-scaling-stroke; stroke-dasharray: 400; stroke-dashoffset: 400; filter: drop-shadow(0 0 6px rgba(240, 111, 192, .9)); animation: egg-crack 1.6s ease-out 1s forwards; }
.egg-hero-art figcaption { color: var(--muted); font-size: 13px; }

/* Brief */
.campaign-egg .campaign-facts { gap: 16px; padding: 0 0 30px; border-top: 0; }
.campaign-egg .campaign-facts > div { padding: 18px 20px; border: 1px solid rgba(255, 255, 255, .9); border-radius: 22px; background: rgba(255, 255, 255, .55); box-shadow: 0 10px 30px -22px rgba(122, 82, 224, .5); }
.campaign-egg .campaign-facts dt { color: var(--accent); }
.campaign-egg .campaign-format-list li { border: 0; background: linear-gradient(#fff, #fff) padding-box, linear-gradient(100deg, var(--egg-teal), var(--egg-lilac), var(--egg-pink)) border-box; border: 1px solid transparent; }
.campaign-egg .campaign-story { padding-top: 40px; border-top: 1px solid var(--line); }
.campaign-egg .campaign-story h2, .campaign-egg .campaign-sequence-heading h2 { font-size: clamp(30px, 3.4vw, 48px); font-weight: 600; letter-spacing: -.045em; line-height: 1.05; }

/* Reveal film */
.campaign-egg .campaign-single-feature { padding: 44px 0 56px; }
.campaign-egg .campaign-feature-caption h2 { font-size: clamp(28px, 2.8vw, 38px); font-weight: 600; letter-spacing: -.04em; }

/* Steps: each egg cracks a little further */
.campaign-egg .campaign-chapter-head { grid-template-columns: 52px minmax(0, 1fr); }
.campaign-egg .campaign-chapter-body { margin-left: 68px; }
.campaign-egg .campaign-chapter-number { position: relative; display: grid; place-items: end center; width: 34px; height: 42px; padding: 0 0 7px; border-radius: 50% 50% 50% 50% / 58% 58% 42% 42%; background: var(--egg-shell); box-shadow: inset 0 -6px 12px rgba(201, 47, 134, .18), 0 8px 18px -10px rgba(201, 47, 134, .6); color: var(--ink); font-size: 11px; font-weight: 600; }
.campaign-egg .campaign-chapter-number::after { content: ''; position: absolute; left: 3px; right: 3px; top: 40%; height: 8px; opacity: 0; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 8' preserveAspectRatio='none'%3E%3Cpath d='M0 4 L5 1 L9 6 L14 1.5 L18 6.5 L23 2 L28 5' fill='none' stroke='%23ffffff' stroke-width='1.6' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% 100% no-repeat; }
.campaign-egg .campaign-step-2 .campaign-chapter-number::after { opacity: 1; }
.campaign-egg .campaign-step-3 .campaign-chapter-number, .campaign-egg .campaign-step-4 .campaign-chapter-number { clip-path: polygon(0 46%, 14% 36%, 28% 48%, 43% 35%, 57% 47%, 72% 34%, 86% 46%, 100% 38%, 100% 100%, 0 100%); }
.campaign-egg .campaign-chapter-heading h3 { font-weight: 600; }
.campaign-egg .campaign-earned-label { color: var(--accent); }
.campaign-egg .campaign-chapter-nav a > span { color: var(--accent); }

/* Visual thread and related work sit on soft cards */
.campaign-egg .campaign-visual-thread, .campaign-egg .campaign-related { border-bottom-color: var(--line); }

@keyframes egg-sheen { 0%, 100% { background-position: 100% 0; } 50% { background-position: 0 0; } }
@keyframes egg-iridesce { to { filter: hue-rotate(360deg); } }
@keyframes egg-crack { to { stroke-dashoffset: 0; } }

@media (max-width: 840px) {
  .campaign-egg .egg-hero { grid-template-columns: minmax(0, 1fr); gap: 34px; }
  .egg-shell { width: min(78%, 340px); }
}
@media (max-width: 760px) {
  .campaign-egg .egg-hero { padding-top: 14px; }
  .campaign-egg .egg-hero h1 { font-size: clamp(50px, 15vw, 80px); }
  .campaign-egg .campaign-chapter-head { grid-template-columns: 44px minmax(0, 1fr); }
  .campaign-egg .campaign-chapter-body { margin-left: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .campaign-egg .egg-hero h1, .egg-shell::before { animation: none; }
  .egg-crack path { animation: none; stroke-dashoffset: 0; }
}