/* ==========================================================================
   Nafpliotis Agency — Coming Soon
   Figma canvas : 1440 × 1048 px (desktop)  |  393 × 852 px (mobile)
   Font         : DM Sans (placeholder for Aeonik Pro)
   Font-size    : cqw units (container-query width) → scale with container
   Positions    : % of container width/height — derived from Figma px values
   Breakpoints  : ≥ 641px desktop/tablet  |  ≤ 640px mobile
   ========================================================================== */

/* --------------------------------------------------------------------------
   Reset
   -------------------------------------------------------------------------- */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 100%;
  overflow: hidden;          /* no scroll on any axis */
  background: #f5f2ee;
}

body {
  display: flex;
  justify-content: center;  /* center the 1440px container on wide screens */
  font-family: 'DM Sans', sans-serif;
  font-weight: 400;
}

/* --------------------------------------------------------------------------
   Page container
   height: 100vh  → always fills the screen exactly, no scroll
   max-width: 1440px → caps at Figma canvas width on very wide screens
   container-type enables cqw units for font-size scaling inside
   -------------------------------------------------------------------------- */
.page {
  width: 100%;
  max-width: 1440px;
  height: 100vh;
  position: relative;
  overflow: hidden;
  background: #f5f2ee;
  container-type: inline-size;
}

/* --------------------------------------------------------------------------
   Watermark — "COMING SOON"
   Figma: 210.732px font at 1440px → 14.63cqw
          tracking: -4.2146px → -0.293cqw
          line-height: 1.2, rgba(0,0,0,0.1), uppercase
          top: removed by design (starts at top of frame)
   -------------------------------------------------------------------------- */
.watermark {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  font-size: clamp(40px, 14.63cqw, 211px);
  color: rgba(0, 0, 0, 0.1);
  text-transform: uppercase;
  letter-spacing: -0.293cqw;
  line-height: 1.2;
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
}

/* --------------------------------------------------------------------------
   Divider line
   Sits exactly at the bottom edge of the watermark text:
     watermark font-size × line-height = 14.63cqw × 1.2 = 17.556cqw
   Using cqw keeps it locked to the text size at any container width.
   -------------------------------------------------------------------------- */
.divider {
  position: absolute;
  top: 17.556cqw;
  left: 0;
  right: 0;
  height: 1px;
  background: rgba(0, 0, 0, 0.18);
}

/* --------------------------------------------------------------------------
   Social section
   Figma: caption top 28.15% (295px on 1048px canvas)
          icons   top 33.97% (356px)
          font-size: 17px → 1.18cqw  |  line-height 1.1  |  rgba(0,0,0,0.5)
   User-adjusted: margin-top 78px, margin-bottom 140px, caption mb 23px
   -------------------------------------------------------------------------- */
.social {
  position: absolute;
  top: 28.15%;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  white-space: nowrap;
  margin-top: 78px;
  margin-bottom: 140px;
}

.social-caption {
  font-size: clamp(12px, 1.18cqw, 17px);
  color: rgba(0, 0, 0, 0.5);
  line-height: 1.1;
  margin-bottom: 23px;
}

.social-icons {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
}

.social-icon {
  color: #000;
  text-decoration: none;
  display: flex;
  align-items: center;
}

.social-icon svg {
  width: clamp(22px, 2.08cqw, 30px);
  height: clamp(22px, 2.08cqw, 30px);
}

/* --------------------------------------------------------------------------
   Construction text
   Figma absolute positions (px → % of 1440px container width):
     "This website"  top 50.38%  left 17px   →  1.18%
     "is under"      top 50%     left 645px   → 44.79%
     "construction." top 50.38%  left 1179px  → 81.875%
   font-size: 44px → 3.056cqw  |  tracking: -0.88px → -0.061cqw  |  lh: 0.9
   -------------------------------------------------------------------------- */
.construction-text {
  position: absolute;
  top: 50.38%;
  left: 0;
  right: 0;
}

.construction-text span {
  position: absolute;
  top: 0;
  font-size: clamp(18px, 3.056cqw, 44px);
  color: #000;
  letter-spacing: -0.061cqw;
  line-height: 0.9;
  white-space: nowrap;
}

/* "This website" — 17px / 1440px = 1.18% */
.construction-text span:nth-child(1) {
  left: 1.18%;
}

/* "is under" — 645px / 1440px = 44.79% */
.construction-text span:nth-child(2) {
  left: 44.79%;
}

/* "construction." — 1179px / 1440px = 81.875%
   Intentionally runs to/past the right edge (as in Figma). */
.construction-text span:nth-child(3) {
  left: 81.875%;
}

/* Fully visible on desktop */
.construction-text .faded {
  opacity: 1;
}

/* --------------------------------------------------------------------------
   Gallery — desktop flex row
   Figma positions (all % of 1440 × 1048 container):
     top:    56.39%  (591px / 1048)
     bottom: 11.93%  (125px / 1048)  → gallery height = 31.68% of container
     left:    0.76%  ( 11px / 1440)
     right:   0.76%
     gap:     1.18%  ( 17px / 1440)

   Photo heights as % of gallery container:
     Short (p1,p3,p5): 17.18% of page / 31.68% of page = 54.2% of gallery
     Tall  (p2,p4):    100% of gallery
   -------------------------------------------------------------------------- */
.gallery {
  position: absolute;
  top: 56.39%;
  bottom: 11.93%;
  left: 0.76%;
  right: 0.76%;
  display: flex;
  align-items: flex-start;
  gap: 1.18%;
}

.photo {
  flex: 1 1 0;
  min-width: 0;
  overflow: hidden;
}

.photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Desktop: SHORT | TALL | SHORT | TALL | SHORT */
.p1 { height: 54.2%; }
.p2 { height: 100%; }
.p3 { height: 54.2%; }
.p4 { height: 100%; }
.p5 { height: 54.2%; }


/* ==========================================================================
   ANIMATIONS
   Reveal sequence (total ≈ 2.4s):
     0.0s  watermark fades in
     0.5s  divider draws left → right
     0.9s  social caption + icons fade up
     1.1s  "This website" fades up
     1.3s  "is under" fades up
     1.5s  "construction." fades up
     1.4s–2.0s  photos stagger in (bottom → top with slight rise)
   ========================================================================== */

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Used for elements that also have translateY in their static transform */
@keyframes fadeInSlideUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Preserves translateX(-50%) centering while adding a Y rise */
@keyframes fadeInSlideUpCenter {
  from { opacity: 0; transform: translateX(-50%) translateY(20px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* Divider grows left → right */
@keyframes dividerExpand {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

/* --- Watermark: simple fade (has translateX(-50%), no Y movement needed) --- */
.watermark {
  animation: fadeIn 1.4s cubic-bezier(0.4, 0, 0.2, 1) both;
}

/* --- Divider: draw across --- */
.divider {
  transform-origin: left center;
  animation: dividerExpand 1s cubic-bezier(0.77, 0, 0.175, 1) 0.5s both;
}

/* --- Social section: fade + rise (translateX(-50%) preserved) --- */
.social {
  animation: fadeInSlideUpCenter 0.9s cubic-bezier(0.4, 0, 0.2, 1) 0.9s both;
}

/* --- Construction words: staggered --- */
.construction-text span:nth-child(1) {
  animation: fadeInSlideUp 0.9s cubic-bezier(0.4, 0, 0.2, 1) 1.1s both;
}
.construction-text span:nth-child(2) {
  animation: fadeInSlideUp 0.9s cubic-bezier(0.4, 0, 0.2, 1) 1.3s both;
}
.construction-text span:nth-child(3) {
  animation: fadeInSlideUp 0.9s cubic-bezier(0.4, 0, 0.2, 1) 1.5s both;
}

/* --- Gallery photos: staggered left → right --- */
.p1 { animation: fadeInSlideUp 0.9s cubic-bezier(0.4, 0, 0.2, 1) 1.4s both; }
.p2 { animation: fadeInSlideUp 0.9s cubic-bezier(0.4, 0, 0.2, 1) 1.55s both; }
.p3 { animation: fadeInSlideUp 0.9s cubic-bezier(0.4, 0, 0.2, 1) 1.7s both; }
.p4 { animation: fadeInSlideUp 0.9s cubic-bezier(0.4, 0, 0.2, 1) 1.85s both; }
.p5 { animation: fadeInSlideUp 0.9s cubic-bezier(0.4, 0, 0.2, 1) 2.0s both; }

/* --- Accessibility: respect reduced-motion preference --- */
@media (prefers-reduced-motion: reduce) {
  .watermark,
  .divider,
  .social,
  .construction-text span,
  .p1, .p2, .p3, .p4, .p5 {
    animation: none;
  }
}


/* ==========================================================================
   MOBILE  ≤ 640px
   Figma canvas: 393 × 852 px
   Container: aspect-ratio 393/852, full width
   All % values below are relative to 393 × 852 px.
   cqw values relative to 393px container width.
   ========================================================================== */
@media (max-width: 640px) {

  /* Mobile container — full width, full screen height, no scroll */
  .page {
    max-width: none;
    height: 100svh; /* safe-area-aware viewport height on iOS/Android */
  }

  /* Watermark
     Figma: 55.73px at 393px → 14.18cqw
            tracking: -1.1146px → -0.284cqw
            color: #dcdad6
            top: 1.53% of 852px = 13px */
  .watermark {
    top: 1.53%;
    font-size: clamp(36px, 14.18cqw, 56px);
    color: #dcdad6;
    letter-spacing: -0.284cqw;
  }

  /* Divider — Figma: 95px / 852px = 11.15% */
  .divider {
    top: 11.15%;
  }

  /* Social section — Figma: top 26.88% */
  .social {
    top: 26.88%;
    margin-top: 0;
    margin-bottom: 0;
  }

  .social-caption {
    font-size: 3.82cqw; /* 15px / 393px */
    margin-bottom: 10px;
  }

  .social-icon svg {
    width: 6.6cqw;  /* 26px / 393px */
    height: 6.6cqw;
  }

  /* Construction text — single flex row, left-aligned
     Figma: top 47.42% of 852px
     "construction." at 33% opacity (teaser effect)
     Reset absolute spans back to a flex row. */
  .construction-text {
    top: 47.42%;
    display: flex;
    justify-content: center;
    align-items: baseline;
    gap: 0.45em;
    padding: 0 2.8%;
  }

  .construction-text span {
    position: static;
    font-size: clamp(16px, 6.1cqw, 24px); /* 24px / 393px = 6.1cqw */
    letter-spacing: -0.122cqw;            /* -0.48px / 393px */
    line-height: 1;
  }

  /* "construction." fades on mobile */
  .construction-text .faded {
    opacity: 0.33;
  }

  /* Gallery — 3-column CSS Grid
     Figma positions (% of 393 × 852 canvas):
       top:    51.64%  left: 2.8%,  right: 3.31%
       bottom:  5.75%
       col gaps: ~2%

       col 1 | col 2 (tall) | col 3
       [p1]  |    [p2]      | [p3]
       [p4]  |    [p2]      | [p5]

     Row heights (fr): row1 = 46fr (19.84% of page), row2 = 51fr (21.71%) */
  .gallery {
    top: 51.64%;
    bottom: 5.75%;
    left: 2.8%;
    right: 3.31%;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: 46fr 51fr;
    column-gap: 2%;
    row-gap: 2%;
    align-items: stretch;
  }

  .photo {
    flex: none;
    height: auto;
  }

  .p1 { grid-column: 1; grid-row: 1;        height: auto; }
  .p2 { grid-column: 2; grid-row: 1 / span 2; height: 100%; }
  .p3 { grid-column: 3; grid-row: 1;        height: auto; }
  .p4 { grid-column: 1; grid-row: 2;        height: auto; }
  .p5 { grid-column: 3; grid-row: 2;        height: auto; }

  .photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}