/* The full-viewport hero (components/hero.js): the header floats over it, the
   words sit at the bottom beside the subject rather than over it. The img
   takes a focal point per breakpoint (--hero-pos, --hero-pos-m) and
   --hero-shift widens it past the far edge (only rock gets cropped) so the
   subject moves away from the words. */

.hero {
  position: relative;
  min-height: max(100svh, 640px);
  display: grid;
  align-items: end;
  padding: calc(var(--header-h) + var(--xl)) 0 clamp(3rem, 8vh, 6rem);
  overflow: hidden;
  color: var(--white);
}

.hero-photo, .hero picture {
  position: absolute;
  inset: 0;
}

.hero-photo { overflow: hidden; }   /* the photograph's box (--hero-shift overflows it, as it did .hero) */

.hero-img {
  position: absolute;
  top: 0;
  left: 0;
  width: calc(100% * var(--hero-shift, 1));
  height: 100%;
  object-fit: cover;
  object-position: var(--hero-pos, 50% 50%);
}

@media (max-width: 900px) {
  .hero-img { width: 100%; }
}

@media (max-width: 700px) {
  .hero-img { object-position: var(--hero-pos-m, 50% 50%); }
}

/* Two scrims: the bottom one for the words, and a side one that darkens the
   text side of the photograph (left, or right with .text-right) */
.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--scrim);
}

.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(to right, rgba(13, 23, 32, 0.72) 0%, rgba(13, 23, 32, 0.42) 30%, rgba(13, 23, 32, 0) 52%);
}

.hero.text-right::before {
  background: linear-gradient(to left, rgba(13, 23, 32, 0.72) 0%, rgba(13, 23, 32, 0.45) 32%, rgba(13, 23, 32, 0) 58%);
}

@media (max-width: 900px) {
  .hero::before { background: none; }
}

.hero-inner {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 0.52fr) minmax(0, 0.48fr);
  gap: var(--lg);
  max-width: 1640px;   /* the hero is full-bleed, so its words may outgrow the page wrap on wide screens */
}

.hero-text { grid-column: 1; }
.hero.text-right .hero-inner { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); }
.hero.text-right .hero-text { grid-column: 2; }

@media (max-width: 900px) {
  .hero-inner { grid-template-columns: minmax(0, 1fr); }   /* minmax(0): the words can never widen the hero past the phone */
  .hero-text, .hero.text-right .hero-text { grid-column: 1; }
}

.hero-text .kicker { color: var(--white); opacity: 0.85; }
/* Sized from the copy column so the longest line ("Aquatic Superpowers", 9.65em in
   Noto Sans Light) always fits on two lines, and grows with the screen: phones
   and tablets from the full width (capped so the 900px hand-off to the
   two-column layout is smooth), desktops from the 52% column, up to 4.75rem
   on very wide screens (the 1640px hero wrap) */
.hero-text h1 { color: var(--white); font-size: min(calc((100vw - 3rem) / 9.8), 2.75rem); max-width: 10.5em; }   /* 10.5em: two lines, never one, at tablet widths */
@media (min-width: 901px) {
  .hero-text h1 { font-size: min(calc((100vw - 5rem) * 0.052), 4.75rem); }
}
.hero-text .lede { font-size: clamp(1.05rem, 0.85rem + 0.55vw, 1.55rem); }
.hero-text .lede { color: var(--white); opacity: 0.9; }

/* Buttons on the photograph */
.hero .button.secondary { border-color: rgba(255, 255, 255, 0.7); color: var(--white); }
.hero .button.secondary:hover { background: var(--white); color: var(--ink); border-color: var(--white); }

/* The photographer's credit, bottom right */
.hero-credit {
  position: absolute;
  right: var(--page-inset);
  bottom: 1rem;
  z-index: 2;
  color: var(--white);
  opacity: 0.7;
}

.hero-credit:hover { opacity: 1; color: var(--white); text-decoration: none; }

/* Phones: the two hero buttons share one row (each its own row only when the
   labels cannot fit side by side), and Call drops the number */
@media (max-width: 700px) {
  .hero .concierge .button { flex: 1 1 0; white-space: nowrap; }
  .hero .call-number { display: none; }
}

/* First load: the photograph settles, the words rise in sequence */
.hero-img { animation: hero-settle 2.6s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
.hero-text > * { animation: hero-rise 1s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
.hero-text > :nth-child(1) { animation-delay: 0.15s; }
.hero-text > :nth-child(2) { animation-delay: 0.35s; }
.hero-text > :nth-child(3) { animation-delay: 0.55s; }
.hero-text > :nth-child(4) { animation-delay: 0.75s; }

@keyframes hero-settle { from { transform: scale(1.05); } to { transform: scale(1); } }
@keyframes hero-rise { from { opacity: 0; transform: translateY(1rem); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .hero-img, .hero-text > * { animation: none; }
}