/* ==========================================================================
   Ducksolve — Phone Mockup Hero Stage
   Two overlapping iPhone-style devices floating over a soft ambient canvas.
   Front phone: homepage UI. Back phone: work/portfolio screen.
   ========================================================================== */


/* -------------------------------------------------------------------------- */
/* Stage container                                                            */
/* -------------------------------------------------------------------------- */
.phone-stage {
  position: relative;
  width: 100%;
  height: 560px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
}

@media (min-width: 768px) {
  .phone-stage { height: 640px; }
}


/* -------------------------------------------------------------------------- */
/* Ambient background blobs                                                   */
/* -------------------------------------------------------------------------- */
.phone-blob {
  position: absolute;
  border-radius: 999px;
  filter: blur(60px);
  pointer-events: none;
  z-index: 0;
}

.phone-blob--red {
  width: 320px;
  height: 320px;
  background: radial-gradient(circle, rgba(196, 92, 84, .22) 0%, transparent 70%);
  top: -8%;
  left: 5%;
  animation: blobDrift1 10s ease-in-out infinite;
}

.phone-blob--lime {
  width: 260px;
  height: 260px;
  background: radial-gradient(circle, rgba(190, 212, 150, .28) 0%, transparent 70%);
  bottom: 0%;
  right: 4%;
  animation: blobDrift2 13s ease-in-out infinite;
}

.phone-blob--yellow {
  width: 180px;
  height: 180px;
  background: radial-gradient(circle, rgba(246, 211, 101, .22) 0%, transparent 70%);
  bottom: 18%;
  left: 15%;
  animation: blobDrift3 11s ease-in-out infinite;
}

@keyframes blobDrift1 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50%       { transform: translate(16px, -20px) scale(1.08); }
}
@keyframes blobDrift2 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50%       { transform: translate(-14px, 16px) scale(1.1); }
}
@keyframes blobDrift3 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  40%       { transform: translate(10px, -12px) scale(.92); }
}


/* -------------------------------------------------------------------------- */
/* Floating dot grid                                                          */
/* -------------------------------------------------------------------------- */
.phone-dots {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(30,30,30,.1) 1px, transparent 1px);
  background-size: 20px 20px;
  mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, black 30%, transparent 100%);
  -webkit-mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, black 30%, transparent 100%);
  pointer-events: none;
  z-index: 0;
}


/* -------------------------------------------------------------------------- */
/* Phone frame (shared)                                                       */
/* -------------------------------------------------------------------------- */
.phone-mockup {
  position: absolute;
  z-index: 2;
  will-change: transform;
}

/* Front phone — centre-left, upright */
.phone-mockup--front {
  left: 50%;
  top: 50%;
  transform: translate(-58%, -50%);
  z-index: 3;
  animation: phoneFront 8s ease-in-out infinite;
}

/* Back phone — centre-right, slight rotate */
.phone-mockup--back {
  left: 50%;
  top: 50%;
  transform: translate(-10%, -46%) rotate(5deg);
  z-index: 2;
  animation: phoneBack 10s ease-in-out infinite;
}

@keyframes phoneFront {
  0%, 100% { transform: translate(-58%, -50%) translateY(0px); }
  50%       { transform: translate(-58%, -50%) translateY(-14px); }
}

@keyframes phoneBack {
  0%, 100% { transform: translate(-10%, -46%) rotate(5deg) translateY(0px); }
  50%       { transform: translate(-10%, -46%) rotate(5deg) translateY(-8px); }
}

/* -------------------------------------------------------------------------- */
/* Layer Separation Hover — desktop only                                      */
/* Front phone lifts up + right, back phone sinks down + left.               */
/* Enhanced shadows add depth during the separation.                          */
/* -------------------------------------------------------------------------- */
@media (hover: hover) and (pointer: fine) {
  .phone-mockup {
    transition:
      transform  .5s cubic-bezier(.22, 1, .36, 1),
      filter     .5s cubic-bezier(.22, 1, .36, 1);
  }

  .phone-frame {
    transition: box-shadow .5s cubic-bezier(.22, 1, .36, 1);
  }

  /* Front phone → up + right, subtle counter-rotate */
  .phone-stage:hover .phone-mockup--front {
    animation-play-state: paused;
    transform: translate(-40%, -56%) rotate(-2deg) scale(1.02);
  }

  /* Back phone → down + left, more rotation for depth */
  .phone-stage:hover .phone-mockup--back {
    animation-play-state: paused;
    transform: translate(-30%, -38%) rotate(8deg) scale(0.98);
  }

  /* Elevated shadows during separation — front phone pops forward */
  .phone-stage:hover .phone-mockup--front .phone-frame {
    box-shadow:
      0 0 0 1px rgba(255, 255, 255, .9) inset,
      0 4px 8px rgba(0, 0, 0, .08),
      0 28px 70px -8px rgba(0, 0, 0, .28),
      0 60px 120px -20px rgba(0, 0, 0, .18);
  }

  /* Softened shadow on back phone — pushed further into the bg */
  .phone-stage:hover .phone-mockup--back .phone-frame {
    box-shadow:
      0 0 0 1px rgba(255, 255, 255, .9) inset,
      0 2px 4px rgba(0, 0, 0, .04),
      0 14px 40px -10px rgba(0, 0, 0, .16),
      0 40px 80px -20px rgba(0, 0, 0, .10);
  }
}

@media (max-width: 640px) {
  .phone-mockup--front  { transform: translate(-52%, -50%); }
  .phone-mockup--back   { transform: translate(4%, -46%) rotate(5deg); }

  @keyframes phoneFront {
    0%, 100% { transform: translate(-52%, -50%) translateY(0px); }
    50%       { transform: translate(-52%, -50%) translateY(-10px); }
  }
  @keyframes phoneBack {
    0%, 100% { transform: translate(4%, -46%) rotate(5deg) translateY(0px); }
    50%       { transform: translate(4%, -46%) rotate(5deg) translateY(-6px); }
  }
}


/* -------------------------------------------------------------------------- */
/* Phone frame chrome                                                         */
/* -------------------------------------------------------------------------- */
.phone-frame {
  width: 220px;
  height: 440px;
  border-radius: 38px;
  background: #ffffff;
  border: 1.5px solid rgba(0, 0, 0, .09);
  box-shadow:
    0 0 0 1px rgba(255,255,255,.9) inset,
    0 2px 4px rgba(0,0,0,.06),
    0 20px 60px -10px rgba(0,0,0,.22),
    0 50px 100px -20px rgba(0,0,0,.15);
  overflow: hidden;
  position: relative;
  flex-shrink: 0;
}

@media (min-width: 768px) {
  .phone-frame {
    width: 248px;
    height: 496px;
  }
}

/* Dynamic island / notch */
.phone-notch {
  position: absolute;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  width: 72px;
  height: 22px;
  background: #1E1E1E;
  border-radius: 999px;
  z-index: 10;
}


/* -------------------------------------------------------------------------- */
/* Phone screen base                                                          */
/* -------------------------------------------------------------------------- */
.phone-screen {
  position: absolute;
  inset: 0;
  border-radius: 37px;
  overflow: hidden;
  font-family: 'Poppins', sans-serif;
  display: flex;
  flex-direction: column;
}

.phone-screen--home {
  background: #FAFAFA;
}

.phone-screen--work {
  background: #FAFAFA;
}


/* -------------------------------------------------------------------------- */
/* Status bar (shared)                                                        */
/* -------------------------------------------------------------------------- */
.pscreen-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 42px 18px 6px;
  flex-shrink: 0;
}

.pscreen-time {
  font-size: 9px;
  font-weight: 700;
  color: #1E1E1E;
  letter-spacing: .02em;
}

.pscreen-icons {
  display: flex;
  align-items: center;
  gap: 4px;
}


/* -------------------------------------------------------------------------- */
/* HOME screen — nav bar                                                      */
/* -------------------------------------------------------------------------- */
.pscreen-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 18px 8px;
  flex-shrink: 0;
}

.pscreen-logo {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 9px;
  font-weight: 800;
  color: #1E1E1E;
  letter-spacing: .02em;
}

.pscreen-hamburger {
  display: flex;
  flex-direction: column;
  gap: 2.5px;
}

.pscreen-hamburger span {
  display: block;
  width: 14px;
  height: 1.5px;
  background: #1E1E1E;
  border-radius: 2px;
}


/* -------------------------------------------------------------------------- */
/* HOME screen — hero text block                                              */
/* -------------------------------------------------------------------------- */
.pscreen-hero {
  padding: 10px 18px 8px;
  flex-shrink: 0;
  position: relative;
}

.pscreen-hero-eyebrow {
  font-size: 7px;
  font-weight: 600;
  color: #C45C54;
  text-transform: uppercase;
  letter-spacing: .12em;
  margin-bottom: 5px;
}

.pscreen-hero-h1 {
  font-size: 14.5px;
  font-weight: 900;
  color: #1E1E1E;
  line-height: 1.18;
  letter-spacing: -.02em;
  margin-bottom: 7px;
}

.pscreen-hero-h1 span {
  color: #C45C54;
}

.pscreen-hero-sub {
  font-size: 6.5px;
  color: #555;
  line-height: 1.55;
  margin-bottom: 10px;
  max-width: 130px;
}

.pscreen-hero-cta {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: #C45C54;
  color: #fff;
  font-size: 6px;
  font-weight: 800;
  padding: 5px 10px;
  border-radius: 999px;
  letter-spacing: .06em;
  box-shadow: 0 4px 14px rgba(196, 92, 84, .4);
}


/* -------------------------------------------------------------------------- */
/* HOME screen — lime dot accent                                              */
/* -------------------------------------------------------------------------- */
.pscreen-dot-accent {
  margin: 0 18px 8px;
  width: 44px;
  height: 44px;
  background-image: radial-gradient(circle, rgba(190,212,150,.8) 1.5px, transparent 1.5px);
  background-size: 7px 7px;
  border-radius: 8px;
  flex-shrink: 0;
  align-self: flex-end;
  margin-right: 18px;
  margin-top: -14px;
}


/* -------------------------------------------------------------------------- */
/* HOME screen — services chips                                               */
/* -------------------------------------------------------------------------- */
.pscreen-services-label {
  font-size: 6.5px;
  font-weight: 800;
  color: #aaa;
  text-transform: uppercase;
  letter-spacing: .1em;
  padding: 4px 18px 5px;
  flex-shrink: 0;
}

.pscreen-services-row {
  display: flex;
  gap: 5px;
  padding: 0 18px;
  flex-shrink: 0;
  flex-wrap: wrap;
}

.pscreen-service-chip {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 5.5px;
  font-weight: 800;
  padding: 3px 7px;
  border-radius: 999px;
  letter-spacing: .06em;
}

.pscreen-service-chip--red  { background: #C45C54; color: #fff; }
.pscreen-service-chip--dark { background: #1E1E1E; color: #fff; }
.pscreen-service-chip--lime { background: #BED496; color: #1E1E1E; }


/* -------------------------------------------------------------------------- */
/* HOME screen — pagination dots                                              */
/* -------------------------------------------------------------------------- */
.pscreen-dots-row {
  display: flex;
  gap: 4px;
  align-items: center;
  padding: 8px 18px 0;
  flex-shrink: 0;
}

.pscreen-page-dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #ddd;
}

.pscreen-page-dot--active {
  width: 10px;
  border-radius: 999px;
  background: #C45C54;
}


/* -------------------------------------------------------------------------- */
/* WORK screen — section label                                                */
/* -------------------------------------------------------------------------- */
.pscreen-section-label {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 7.5px;
  font-weight: 800;
  color: #1E1E1E;
  text-transform: uppercase;
  letter-spacing: .08em;
  padding: 6px 16px 8px;
  flex-shrink: 0;
}

.pscreen-section-label span {
  font-size: 6px;
  color: #C45C54;
  font-weight: 700;
  letter-spacing: .04em;
}


/* -------------------------------------------------------------------------- */
/* WORK screen — work list                                                    */
/* -------------------------------------------------------------------------- */
.pscreen-work-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 0 16px;
  flex-shrink: 0;
}

.pscreen-work-item {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #fff;
  border-radius: 10px;
  padding: 6px 8px;
  box-shadow: 0 1px 6px rgba(0,0,0,.06);
}

.pscreen-work-num {
  font-size: 8px;
  font-weight: 800;
  color: #eee;
  width: 14px;
  flex-shrink: 0;
}

.pscreen-work-img {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  flex-shrink: 0;
}

.pscreen-work-img--1 { background: linear-gradient(135deg, #C45C54, #e87b72); }
.pscreen-work-img--2 { background: linear-gradient(135deg, #BED496, #a0c86a); }
.pscreen-work-img--3 { background: linear-gradient(135deg, #F6D365, #e8b84b); }
.pscreen-work-img--4 { background: linear-gradient(135deg, #1E1E1E, #3a3a3a); }

.pscreen-work-info {
  flex: 1;
  min-width: 0;
}

.pscreen-work-title {
  font-size: 7px;
  font-weight: 700;
  color: #1E1E1E;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pscreen-work-sub {
  font-size: 6px;
  color: #aaa;
  margin-top: 1px;
}


/* -------------------------------------------------------------------------- */
/* WORK screen — CTA card                                                     */
/* -------------------------------------------------------------------------- */
.pscreen-cta-card {
  margin: 8px 16px 12px;
  background: #C45C54;
  border-radius: 14px;
  padding: 12px 14px;
  flex-shrink: 0;
}

.pscreen-cta-label {
  font-size: 10px;
  font-weight: 900;
  color: #fff;
  line-height: 1.25;
  letter-spacing: -.01em;
  margin-bottom: 5px;
}

.pscreen-cta-sub {
  font-size: 6px;
  color: rgba(255,255,255,.75);
  margin-bottom: 8px;
  line-height: 1.5;
}

.pscreen-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  background: #fff;
  color: #C45C54;
  font-size: 6px;
  font-weight: 800;
  padding: 4px 10px;
  border-radius: 999px;
  letter-spacing: .06em;
}


/* -------------------------------------------------------------------------- */
/* Reduced motion                                                             */
/* -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .phone-mockup--front,
  .phone-mockup--back,
  .phone-blob { animation: none; }

  .phone-mockup { transition: none; }
  .phone-frame  { transition: none; }

  .phone-stage:hover .phone-mockup--front { transform: translate(-58%, -50%); }
  .phone-stage:hover .phone-mockup--back  { transform: translate(-10%, -46%) rotate(5deg); }
}