/*
 * create.css — Creative strategy page
 * Inherits tokens + nav + reset from style.css
 *
 * Concept: Instant camera / Polaroid photo developing.
 * A physical Polaroid frame sits on the dark background.
 * The photo area starts milky-blank, then the image slowly
 * materializes — like watching an Instax develop in your hand.
 */


/* ================================================================
   HERO
   ================================================================ */
.cr-hero {
  position: relative;
  padding-top: var(--nav-h);
  min-height: 100vh;
  display: flex;
  align-items: center;
  overflow: hidden;
}

.cr-hero > .pw {
  width: 100%;
  text-align: center;
  position: relative;
  z-index: 2;
}


/* ── Label ── */
.cr-label {
  font-family: var(--ui);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-muted);
  display: block;
  margin-bottom: 48px;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity var(--duration) var(--ease) 0.1s, transform var(--duration) var(--ease) 0.1s;
}

.loaded .cr-label {
  opacity: 1;
  transform: translateY(0);
}


/* ================================================================
   CAMERA — small instant camera sitting above the photo
   ================================================================ */
.cr-polaroid {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity 0.8s var(--ease) 0.2s,
    transform 0.8s var(--ease) 0.2s;
}

.loaded .cr-polaroid {
  opacity: 1;
  transform: translateY(0);
}

.cr-camera {
  position: relative;
  z-index: 3;
}

.cr-camera__body {
  width: 180px;
  height: 100px;
  background: linear-gradient(180deg, #2a2825 0%, #1e1c1a 100%);
  border-radius: 10px 10px 4px 4px;
  position: relative;
  box-shadow:
    0 2px 12px rgba(0,0,0,0.4),
    inset 0 1px 0 rgba(255,255,255,0.06);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Lens */
.cr-camera__lens {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 35%,
    #3a3a44 0%,
    #1a1a22 50%,
    #0a0a10 100%
  );
  border: 3px solid #333;
  box-shadow:
    0 0 0 2px rgba(201,169,110,0.15),
    inset 0 0 8px rgba(0,0,0,0.6);
  position: relative;
}

/* Lens highlight */
.cr-camera__lens::after {
  content: '';
  position: absolute;
  top: 6px;
  left: 8px;
  width: 8px;
  height: 5px;
  background: rgba(255,255,255,0.15);
  border-radius: 50%;
  transform: rotate(-20deg);
}

/* Flash */
.cr-camera__flash {
  position: absolute;
  top: 12px;
  right: 24px;
  width: 18px;
  height: 14px;
  border-radius: 3px;
  background: linear-gradient(180deg, #555 0%, #3a3a3a 100%);
  border: 1px solid rgba(255,255,255,0.08);
}

/* Camera brand */
.cr-camera__brand {
  position: absolute;
  bottom: 10px;
  left: 24px;
  font-family: var(--display);
  font-size: 11px;
  color: rgba(201,169,110,0.35);
  letter-spacing: 0.02em;
}

/* Slot where photo ejects */
.cr-camera__slot {
  position: absolute;
  bottom: -2px;
  left: 50%;
  transform: translateX(-50%);
  width: 70%;
  height: 4px;
  background: #111;
  border-radius: 0 0 2px 2px;
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.5);
}

/* ================================================================
   POLAROID FRAME — ejects from camera
   ================================================================ */
.cr-polaroid__frame {
  position: relative;
  z-index: 2;
  margin-top: -2px; /* tucks under camera slot */
}

/* Photo starts hidden, appears after flash */
.cr-polaroid__frame {
  opacity: 0;
  transform: scale(0.95);
  transition: opacity 0.8s var(--ease), transform 0.8s var(--ease);
}

.cr-polaroid.flashed .cr-polaroid__frame {
  opacity: 1;
  transform: scale(1) rotate(0deg);
  animation: photoTilt 1.2s var(--ease) 1.5s both;
}

@keyframes photoTilt {
  0%   { transform: scale(1) rotate(0deg); }
  100% { transform: scale(1) rotate(-2deg); }
}

/* ── Camera flash burst ── */
.cr-camera__burst {
  position: absolute;
  inset: -200px;
  z-index: 20;
  pointer-events: none;
  background: radial-gradient(circle at 50% 50%, rgba(255,255,255,0.95), rgba(255,255,255,0.5) 30%, transparent 65%);
  opacity: 0;
}

.cr-camera__burst.fire {
  animation: flashBurst 0.5s ease-out forwards;
}

@keyframes flashBurst {
  0%   { opacity: 0; transform: scale(0.8); }
  10%  { opacity: 1; transform: scale(1); }
  40%  { opacity: 0.7; transform: scale(1.1); }
  100% { opacity: 0; transform: scale(1.2); }
}

/* The outer frame — aged Polaroid, dark yellowed */
.cr-polaroid__frame {
  background: #2a2620;
  padding: 20px 20px 8px;
  border-radius: 2px;
  box-shadow:
    0 2px 8px rgba(0,0,0,0.3),
    0 12px 40px rgba(0,0,0,0.25),
    inset 0 0 20px rgba(0,0,0,0.3);
}

/* The photo area — dark rectangle where the image develops */
.cr-polaroid__photo {
  background: var(--bg);
  position: relative;
  padding: 48px 56px;
  overflow: hidden;
}

/* Milky overlay — starts opaque (like a fresh Instax), fades to reveal */
.cr-polaroid__milky {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background: linear-gradient(
    165deg,
    #3d362c 0%,
    #443c30 25%,
    #38312a 50%,
    #403929 75%,
    #3a3328 100%
  );
  opacity: 1;
}

.loaded .cr-polaroid__milky {
  animation: milkyFade 5s cubic-bezier(0.22, 1, 0.36, 1) 2s both;
}

@keyframes milkyFade {
  0%   { opacity: 1; }
  20%  { opacity: 0.85; }
  40%  { opacity: 0.55; }
  60%  { opacity: 0.25; }
  80%  { opacity: 0.08; }
  100% { opacity: 0; }
}

/* Bottom tab */
.cr-polaroid__tab {
  padding: 14px 0 10px;
  text-align: center;
}

.cr-polaroid__brand {
  font-family: var(--display);
  font-size: 14px;
  font-weight: 400;
  color: rgba(201,169,110,0.25);
  letter-spacing: 0.02em;
}


/* ================================================================
   HEADLINE — develops inside the photo area
   ================================================================ */
.cr-hl {
  font-family: var(--display);
  font-size: clamp(40px, 6vw, 90px);
  font-weight: 400;
  line-height: 0.95;
  letter-spacing: -0.03em;
  color: var(--text);
  position: relative;
  display: block;
  cursor: default;
  margin: 0;
  z-index: 2;
  text-align: left;
}

.cr-hl__line {
  display: block;
}

.cr-hl__line--italic {
  font-style: italic;
}

/* ── Text develops as milky clears ── */
.cr-part {
  display: inline-block;
  opacity: 0;
  filter: blur(4px) brightness(0.4);
}

.loaded .cr-part {
  animation: photoDevelop 4s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.loaded .cr-part--1   { animation-delay: 2.5s; }
.loaded .cr-part--2   { animation-delay: 2.5s; }
.loaded .cr-part--you { animation-delay: 2.5s; }

.cr-part--you {
  color: var(--champagne);
}

@keyframes photoDevelop {
  0% {
    opacity: 0;
    filter: blur(4px) brightness(0.4);
  }
  30% {
    opacity: 0.3;
    filter: blur(2px) brightness(0.6);
  }
  60% {
    opacity: 0.7;
    filter: blur(0.5px) brightness(0.85);
  }
  100% {
    opacity: 1;
    filter: blur(0) brightness(1);
  }
}


/* ================================================================
   SUBTITLE + CTA
   ================================================================ */
.cr-sub {
  font-family: var(--editorial);
  font-size: 20px;
  font-weight: 400;
  line-height: 1.6;
  color: var(--silver);
  max-width: 600px;
  margin: 48px auto 0;
  opacity: 0;
  transform: translateY(12px);
}

.cr-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 56px;
  opacity: 0;
  transform: translateY(12px);
}

.loaded .cr-sub {
  animation: fadeUp 1.5s var(--ease) 3.5s both;
}

.loaded .cr-actions {
  animation: fadeUp 1.5s var(--ease) 4s both;
}

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}


/* ── Thin divider at bottom of hero ── */
.cr-hero::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: var(--pad);
  right: var(--pad);
  height: 1px;
  background: var(--border);
}








/* ================================================================
   SPRINT BOARD — sequential highlight animation
   ================================================================ */
.cr-work .ps-board__day {
  transition: border-color 0.5s var(--ease), background 0.5s var(--ease), transform 0.5s var(--ease), box-shadow 0.5s var(--ease);
}

.cr-work .ps-board__day.cr-active {
  border-color: rgba(201,169,110,0.5);
  background: rgba(201,169,110,0.06);
  transform: scale(1.04);
  box-shadow: 0 0 30px rgba(201,169,110,0.1), 0 0 60px rgba(201,169,110,0.04);
}

.cr-work .ps-board__day.cr-active .ps-board__num {
  color: var(--champagne);
}

.cr-work .ps-board__day.cr-active .ps-board__task {
  color: var(--champagne);
}

.cr-work .ps-board__day.cr-done {
  border-color: rgba(201,169,110,0.3);
  background: rgba(201,169,110,0.04);
}

.cr-work .ps-board__day.cr-done .ps-board__num {
  color: var(--champagne);
  opacity: 0.6;
}

.cr-work .ps-board__day.cr-done .ps-board__task {
  color: var(--champagne);
  opacity: 0.7;
}


/* Override golden divider on testimonials */
.cr-hero ~ .pc2 {
  border-top: 1px solid var(--border);
}


/* ================================================================
   TOV EXAMPLES — large image cards
   ================================================================ */
/* Two-column vertically scrollable — same as pose. work page */
.cr-tov-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-top: 48px;
}

.cr-tov-col__label {
  font-family: var(--ui);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--text-muted);
  display: block;
  margin-bottom: 12px;
}

.cr-tov-col__scroll {
  border: 1px solid var(--border);
  overflow: hidden;
  max-height: 500px;
  overflow-y: auto;
}

.cr-tov-col__scroll img {
  width: 100%;
  display: block;
}

.cr-tov-col__scroll::-webkit-scrollbar {
  width: 4px;
}

.cr-tov-col__scroll::-webkit-scrollbar-track {
  background: transparent;
}

.cr-tov-col__scroll::-webkit-scrollbar-thumb {
  background: var(--border);
}

.cr-tov-col__scroll {
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
}

@media (max-width: 640px) {
  .cr-tov-grid {
    grid-template-columns: 1fr;
  }
  .cr-tov-col__scroll {
    max-height: 360px;
  }
}


/* ================================================================
   WORK EXAMPLES SECTION
   ================================================================ */
.cr-work {
  padding: 100px 0 120px;
  border-top: 1px solid var(--border);
}

.cr-work__label {
  font-family: var(--ui);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--champagne);
  opacity: 0.6;
  display: block;
  margin-bottom: 16px;
}

.cr-work__heading {
  font-family: var(--display);
  font-size: clamp(32px, 4vw, 56px);
  font-weight: 400;
  color: var(--text);
  margin-bottom: 0;
}

.cr-work__heading em {
  font-style: italic;
  color: var(--champagne);
}


/* ================================================================
   POLAROID COLLAGE — scattered instant photos
   ================================================================ */
.cr-collage {
  columns: 3;
  column-gap: 16px;
  padding: 60px 0 80px;
}

.cr-collage__photo {
  break-inside: avoid;
  margin-bottom: 16px;
  transition: transform 0.4s var(--ease);
}

.cr-collage__photo:hover {
  z-index: 2;
  transform: scale(1.03) rotate(0deg) !important;
}

/* Scattered tilts */
.cr-collage__photo--1  { transform: rotate(-2deg); }
.cr-collage__photo--2  { transform: rotate(1.5deg); }
.cr-collage__photo--3  { transform: rotate(-1deg); }
.cr-collage__photo--4  { transform: rotate(2deg); }
.cr-collage__photo--5  { transform: rotate(-1.5deg); }
.cr-collage__photo--6  { transform: rotate(1deg); }
.cr-collage__photo--7  { transform: rotate(-2.5deg); }
.cr-collage__photo--8  { transform: rotate(2deg); }
.cr-collage__photo--9  { transform: rotate(-1deg); }
.cr-collage__photo--10 { transform: rotate(1.5deg); }
.cr-collage__photo--11 { transform: rotate(-2deg); }
.cr-collage__photo--12 { transform: rotate(1deg); }
.cr-collage__photo--13 { transform: rotate(-1.5deg); }
.cr-collage__photo--14 { transform: rotate(2.5deg); }
.cr-collage__photo--15 { transform: rotate(-1deg); }
.cr-collage__photo--16 { transform: rotate(2deg); }
.cr-collage__photo--17 { transform: rotate(-1.5deg); }
.cr-collage__photo--18 { transform: rotate(1deg); }
.cr-collage__photo--19 { transform: rotate(-2deg); }
.cr-collage__photo--20 { transform: rotate(1.5deg); }
.cr-collage__photo--21 { transform: rotate(-1deg); }

/* The Polaroid frame — aged dark style */
.cr-collage__frame {
  background: #2a2620;
  padding: 8px 8px 28px;
  border-radius: 2px;
  box-shadow:
    0 4px 16px rgba(0,0,0,0.35),
    0 1px 4px rgba(0,0,0,0.2),
    inset 0 0 12px rgba(0,0,0,0.2);
  overflow: hidden;
}

.cr-collage__frame img {
  width: 100%;
  display: block;
  border-radius: 1px;
  filter: contrast(1.05) saturate(0.9);
  transition: filter 0.4s var(--ease);
}

.cr-collage__photo:hover .cr-collage__frame img {
  filter: contrast(1) saturate(1);
}


/* ================================================================
   VISION BOARD — deliverables between sprint phases
   ================================================================ */
/* ================================================================
   SPRINT — studio lights effect
   ================================================================ */

/* Remove film strip reels */
.cr-hero ~ .ps .ps-week::before {
  display: none;
}

.cr-hero ~ .ps .ps-week {
  padding-left: 0;
}





/* ================================================================
   REEL DIVIDER — horizontal film strip between sprint phases
   ================================================================ */
.cr-reel-divider {
  padding: 60px 0;
}

.cr-reel-divider__strip {
  display: flex;
  align-items: center;
  gap: 0;
  height: 28px;
}

/* Sprocket holes — repeating pattern on top and bottom rows */
.cr-reel-divider__holes {
  flex: 0 0 auto;
  width: 100%;
  height: 10px;
  background: repeating-linear-gradient(
    to right,
    transparent 0px,
    transparent 8px,
    rgba(201,169,110,0.3) 8px,
    rgba(201,169,110,0.3) 18px,
    transparent 18px,
    transparent 26px
  );
}

/* Center line */
.cr-reel-divider__line {
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  background: rgba(201,169,110,0.2);
}

.cr-reel-divider__strip {
  position: relative;
  flex-direction: column;
  justify-content: space-between;
  border-top: 1px solid rgba(201,169,110,0.15);
  border-bottom: 1px solid rgba(201,169,110,0.15);
  opacity: 0.6;
}


/* ================================================================
   RESPONSIVE
   ================================================================ */
@media (max-width: 1024px) {
  .cr-collage {
    columns: 2;
    column-gap: 12px;
  }
}

@media (max-width: 640px) {
  .cr-hl {
    font-size: clamp(28px, 8vw, 48px);
  }
  .cr-polaroid__photo {
    padding: 28px 24px;
  }
  .cr-collage {
    columns: 1;
    padding: 40px 0 60px;
  }
  .cr-collage__frame {
    padding: 6px 6px 20px;
  }
  .cr-sub {
    font-size: 17px;
    margin-top: 36px;
  }
}