/* SAMOPROPERTIES — boutique landing system.
   Scoped to .samo so the admin / LED / chat surfaces keep their Tailwind look. */

.samo,
.samo *,
.samo *::before,
.samo *::after { box-sizing: border-box; }

.samo {
  background: #F4F2EC;
  color: #141C18;
  font-family: 'DM Sans', system-ui, sans-serif;
  overflow-x: hidden;
}
.samo ::selection { background: #141C18; color: #F4F2EC; }
.samo a { color: #2F6B4A; text-decoration: none; }
.samo a:hover { color: #141C18; }
.samo :where(button) { font: inherit; }

@keyframes samo-rise { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: translateY(0); } }
@keyframes samo-wipe { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes samo-bar { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes samo-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes samo-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.15; } }
@keyframes samo-mediaIn { from { opacity: 0; clip-path: inset(16% 12% 16% 12% round 4px); } to { opacity: 1; clip-path: inset(0% 0% 0% 0% round 4px); } }
@keyframes samo-ruleIn { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* Scroll-driven flourishes only where the browser can actually drive them. */
.samo-progress { display: none; }
@supports (animation-timeline: scroll(root)) {
  .samo-progress {
    display: block;
    position: fixed; top: 0; left: 0; right: 0; height: 2px;
    background: #141C18; transform-origin: 0 50%; z-index: 120;
    animation: samo-bar linear;
    animation-timeline: scroll(root);
  }
}
@supports (animation-timeline: view()) {
  .samo-media {
    animation: samo-mediaIn linear both;
    animation-timeline: view();
    animation-range: entry 2% cover 32%;
  }
  .samo-rule {
    animation: samo-ruleIn 1s cubic-bezier(.16, 1, .3, 1) both;
    animation-timeline: view();
    animation-range: entry 10% entry 90%;
  }
}

.samo-media { position: relative; border-radius: 4px; overflow: hidden; background: #E4E2DA; min-width: 0; }
.samo-media > img { width: 100%; height: 100%; object-fit: cover; display: block; }
.samo-rule { height: 1px; background: #2F6B4A; transform-origin: 0 50%; margin-top: 14px; max-width: 132px; }

/* Reveal-on-scroll, driven by the IntersectionObserver in SamoLanding. */
.samo-reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.9s cubic-bezier(.2, .8, .2, 1), transform 0.9s cubic-bezier(.2, .8, .2, 1);
}
.samo-reveal.is-in { opacity: 1; transform: none; }

/* Hover states (the design's style-hover attributes). */
.samo-cta-light { transition: background 0.35s, color 0.35s, transform 0.35s; }
.samo-cta-light:hover { background: #2F6B4A; color: #F4F2EC; transform: translateY(-2px); }
.samo-cta-ghost { transition: background 0.35s, border-color 0.35s; }
.samo-cta-ghost:hover { background: rgba(242, 241, 236, 0.1); border-color: rgba(242, 241, 236, 0.6); color: #F4F2EC; }
.samo-cta-dark { transition: background 0.35s, transform 0.35s; }
.samo-cta-dark:hover { background: #2F6B4A; transform: translateY(-2px); }
.samo-pillar { transition: border-color 0.4s, transform 0.4s, background 0.4s; }
.samo-pillar:hover { border-color: #141C18; transform: translateY(-3px); background: #fff; }
.samo-tenant { transition: background 0.45s cubic-bezier(.2, .8, .2, 1), padding-left 0.45s cubic-bezier(.2, .8, .2, 1); }
.samo-tenant:hover { background: rgba(242, 241, 236, 0.055); padding-left: clamp(14px, 2.4vw, 36px); }
.samo-underline { transition: color 0.3s, border-color 0.3s; }
.samo-underline:hover { color: #2F6B4A; border-color: #2F6B4A; }
.samo-footlink:hover { color: #2F6B4A; }
.samo-field { transition: border-color 0.3s; }
.samo-field:focus { border-color: #2F6B4A; }

@media (max-width: 780px) {
  .samo [data-tenant-row] {
    grid-template-columns: 1fr auto !important;
    row-gap: 4px;
    min-height: 0 !important;
    padding-top: 20px !important;
    padding-bottom: 20px !important;
  }
  .samo [data-tenant-row] > *:nth-child(1) { grid-column: 1; }
  .samo [data-tenant-row] > *:nth-child(4) { grid-column: 2; grid-row: 1; }
  .samo [data-tenant-row] > *:nth-child(2) { grid-column: 1 / -1; }
  .samo [data-tenant-row] > *:nth-child(3) { grid-column: 1 / -1; }
  .samo [data-hero-stats] { grid-template-columns: repeat(2, 1fr) !important; }
  /* The inline link row cannot fit a phone; swap it for the menu sheet. */
  .samo [data-nav-links] { display: none !important; }
  .samo-menu-btn { display: inline-flex !important; }
  .samo [data-hero-cta] { flex-direction: column; align-items: stretch; }
  .samo [data-hero-cta] > a { justify-content: center; }
  .samo [data-hero-stats] > div:nth-child(2n) { border-right: 0; }
  .samo [data-hero-stats] > div:last-child { border-right: 0; }
  /* iOS zooms any focused field under 16px. */
  .samo textarea.samo-field { font-size: 16px !important; }
  /* Tighter media rhythm so the gallery isn't a long scroll on a phone. */
  .samo [data-media-grid] { grid-auto-rows: 210px !important; }
}

@media (prefers-reduced-motion: reduce) {
  .samo *, .samo *::before, .samo *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Mobile menu sheet. */
.samo-menu-btn {
  display: none;
  align-items: center;
  gap: 10px;
  background: transparent;
  border: 1px solid currentColor;
  border-radius: 100px;
  padding: 10px 17px;
  color: inherit;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  line-height: 1;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  cursor: pointer;
}

.samo-sheet {
  position: fixed;
  inset: 0;
  z-index: 110;
  background: #0C120F;
  color: #F4F2EC;
  display: flex;
  flex-direction: column;
  padding: 22px clamp(20px, 6vw, 40px) 40px;
  animation: samo-sheet-in 0.35s cubic-bezier(.2, .8, .2, 1) both;
}
@keyframes samo-sheet-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }

.samo-sheet-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.samo-sheet-close {
  background: transparent;
  border: 1px solid rgba(242, 241, 236, 0.35);
  border-radius: 100px;
  width: 40px;
  height: 40px;
  color: #F4F2EC;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}
.samo-sheet-nav {
  display: flex;
  flex-direction: column;
  margin-top: auto;
  margin-bottom: auto;
}
.samo-sheet-nav button {
  appearance: none;
  background: transparent;
  border: 0;
  border-bottom: 1px solid rgba(242, 241, 236, 0.12);
  padding: 18px 0;
  text-align: left;
  color: #F4F2EC;
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 500;
  font-size: clamp(30px, 9vw, 44px);
  letter-spacing: -0.035em;
  cursor: pointer;
  display: flex;
  align-items: baseline;
  gap: 14px;
}
.samo-sheet-nav button span {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.16em;
  color: #7FB394;
}
.samo-sheet-foot {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(244, 242, 236, 0.6);
}
.samo-sheet-foot a { color: inherit; }

/* Keep anchored sections clear of the fixed nav. */
.samo section[id] { scroll-margin-top: 76px; }

/* ---- Split-flap gallery -------------------------------------------------
   Airport-board mechanics: the tile splits at the midline, a hinged flap
   carries the OLD top half down and lands showing the NEW bottom half,
   revealing the NEW top half behind it. Faces are shaded through the turn
   so the flap reads as a physical panel catching light. */

.samo-flip { position: absolute; inset: 0; perspective: 1400px; }

.samo-flip-half { position: absolute; left: 0; right: 0; height: 50%; overflow: hidden; }
.samo-flip-top { top: 0; }
.samo-flip-bot { top: 50%; }

/* Each half is a window onto a full-tile-sized image, offset to show its slice. */
.samo-flip img {
  position: absolute;
  left: 0;
  width: 100%;
  height: 200%;
  object-fit: cover;
  display: block;
}
.samo-flip-top img,
.samo-flip-face-front img { top: 0; }
.samo-flip-bot img,
.samo-flip-face-back img { top: -100%; }

/* The seam the flap hinges on. */
.samo-flip-bot::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: rgba(12, 18, 15, 0.32);
  z-index: 2;
}

.samo-flap {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 50%;
  transform-origin: 50% 100%;
  transform-style: preserve-3d;
  z-index: 3;
}
.samo-flap.is-flipping { animation: samo-flap-turn 0.58s cubic-bezier(.42, .02, .18, 1) var(--flap-delay, 0ms) forwards; }
@keyframes samo-flap-turn { from { transform: rotateX(0deg); } to { transform: rotateX(-180deg); } }

.samo-flip-face {
  position: absolute;
  inset: 0;
  overflow: hidden;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.samo-flip-face-back { transform: rotateX(180deg); }

/* Light falling off the panel as it turns over. */
.samo-flip-face::after {
  content: '';
  position: absolute;
  inset: 0;
  background: #0C120F;
  opacity: 0;
  pointer-events: none;
}
.samo-flap.is-flipping .samo-flip-face-front::after { animation: samo-flap-shade-out 0.58s cubic-bezier(.42, .02, .18, 1) var(--flap-delay, 0ms) forwards; }
.samo-flap.is-flipping .samo-flip-face-back::after { animation: samo-flap-shade-in 0.58s cubic-bezier(.42, .02, .18, 1) var(--flap-delay, 0ms) forwards; }
@keyframes samo-flap-shade-out { from { opacity: 0; } to { opacity: 0.58; } }
@keyframes samo-flap-shade-in { from { opacity: 0.62; } to { opacity: 0; } }


/* Hero still. The photo is 1.81:1, so `cover` crops it hard and differently at
   each shape: on a phone the full height is kept and only ~25% of the width
   survives, while on a desktop about 75% of the width does. The horizontal
   focus is therefore set per breakpoint, chosen so the lit shopfront signage
   lands right of centre — clear of the dark left side of the hero scrim. */
.samo-hero-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 38% 50%;
  display: block;
}
@media (max-width: 780px) {
  .samo-hero-img { object-position: 50% 50%; }
}