/* ==========================================================================
   The Island at West Bay: "Days in the Life" digital brochure
   Shared styles for every page. Page-specific layout lives in css/<page>.css.

   Breakpoints
     desktop  >= 1000px
     tablet   <=  999px   (every row stacks to a single column)
     mobile   <=  749px
   ========================================================================== */


/* --------------------------------------------------------------------------
   Fonts
   -------------------------------------------------------------------------- */

@font-face {
  font-family: "Poppins";
  src: url("fonts/poppins-thin.0ce3507b5428.ttf") format("truetype");
  font-weight: 100;
  font-display: swap;
}

@font-face {
  font-family: "Poppins";
  src: url("fonts/poppins-extralight.6e27f8a21f1d.ttf") format("truetype");
  font-weight: 200;
  font-display: swap;
}

@font-face {
  font-family: "Poppins";
  src: url("fonts/poppins-light.86947748b665.ttf") format("truetype");
  font-weight: 300;
  font-display: swap;
}

@font-face {
  font-family: "Poppins";
  src: url("fonts/poppins-regular.3d16ee7ec945.ttf") format("truetype");
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Poppins";
  src: url("fonts/poppins-medium.0cb3daa88d4c.ttf") format("truetype");
  font-weight: 500;
  font-display: swap;
}

@font-face {
  font-family: "Poppins";
  src: url("fonts/poppins-bold.60d08e13910d.ttf") format("truetype");
  font-weight: 700;
  font-display: swap;
}


/* --------------------------------------------------------------------------
   Design tokens
   -------------------------------------------------------------------------- */

:root {
  --beige: rgb(227, 222, 209);
  --forest: rgb(34, 49, 30);
  --forest-75: rgba(34, 49, 30, 0.75);
  --shade: rgba(0, 0, 0, 0.2);          /* header bar, prev/next, scroll button */
  --img-overlay: rgba(0, 0, 0, 0.3);    /* default tint over background photos */
  --container: 1024px;
  --bar-h: 57px;
}


/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */

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

html,
body {
  margin: 0;
  padding: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: "Poppins", Arial, Helvetica, sans-serif;
  font-weight: 100;
  font-size: 16px;
  line-height: 1.5;
  color: #000;
  background: #fff;
  overflow-x: hidden;
  overflow-wrap: break-word;
}

h1, h2, h3, h4, p {
  margin: 0;
  font-weight: inherit;
}

main h1, main h2, main h3, main h4, main p {
  white-space: pre-wrap;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

a {
  color: inherit;
}

body.index-open {
  overflow: hidden;
}

[hidden] {
  display: none !important;     /* also applies to inline SVG icons */
}


/* --------------------------------------------------------------------------
   Layout building blocks: section > row > column
   -------------------------------------------------------------------------- */

.block {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.block > .row {
  position: relative;
  z-index: 1;
  flex: 1 0 auto;
  display: grid;
  width: 100%;
}

.block.contained > .row {
  max-width: var(--container);
  margin: 0 auto;
}

.col {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 25px;
}

.col.v-top    { justify-content: flex-start; }
.col.v-middle { justify-content: center; }
.col.v-bottom { justify-content: flex-end; }

.col > * {
  position: relative;
  z-index: 1;
}

/* Low-specificity defaults, so each page's own classes always win. */
:where(.block .col) > .txt {
  width: 100%;
}

:where(.block .col) > img {
  width: 100%;
  max-width: 100%;
  align-self: var(--ha, flex-start);
}

:where(.block .col) > .btn {
  align-self: var(--ha, flex-start);
}


/* --------------------------------------------------------------------------
   Background photos (optional tint overlay, optional parallax)
   -------------------------------------------------------------------------- */

.bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: 50% 50%;
}

.bg.overlay::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--ov, var(--img-overlay));
}

.bg.parallax {
  bottom: auto;                 /* height and offset are set by script.js */
  background-position: 50% 0;
  will-change: transform;
}


/* --------------------------------------------------------------------------
   Background videos with a still-image fallback
   The still (background-image on .video-bg) shows first. The video only fades
   in once YouTube reports it is playing, so if it is blocked, fails or can't
   autoplay, the still simply stays.
   -------------------------------------------------------------------------- */

.video-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  background: #000 50% 50% / cover no-repeat;
  container-type: size;         /* lets the iframe cover its own section */
}

.video-bg iframe {
  position: absolute;
  top: 50%;
  left: 50%;
  width: max(100cqw, 177.78cqh);   /* 16:9, cropped to cover */
  height: max(100cqh, 56.25cqw);
  transform: translate(-50%, -50%);
  border: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.8s ease;
}

.video-bg.playing iframe {
  opacity: 1;
}


/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */

.btn {
  display: inline-block;
  align-self: flex-start;
  padding: 12px 20px;
  border: 1px solid #fff;
  background: rgba(255, 255, 255, 0);
  color: #fff;
  font: 400 1rem/1em Arial, Helvetica, sans-serif;
  letter-spacing: 0.05em;
  text-decoration: none;
  margin-bottom: 0.55em;
  transition: all 0.3s ease 0s;
}

.btn:hover {
  background: rgba(125, 125, 125, 1);
}


/* --------------------------------------------------------------------------
   Scroll-in animations (play once as each element enters the screen)
   -------------------------------------------------------------------------- */

@keyframes fadeIn {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}

@keyframes flyIn {
  0%   { opacity: 0; transform-origin: 50% 50%; transform: scale(2, 2); filter: blur(2px); }
  100% { opacity: 1; transform-origin: 50% 50%; transform: scale(1, 1); filter: blur(0); }
}

@keyframes fadeInDown {
  0%   { opacity: 0; transform: translateY(-20px); }
  100% { opacity: 1; transform: translateY(0); }
}

@keyframes fadeInUp {
  0%   { opacity: 0; transform: translateY(20px); }
  100% { opacity: 1; transform: translateY(0); }
}

@keyframes fadeInLeft {
  0%   { opacity: 0; transform: translateX(-20px); }
  100% { opacity: 1; transform: translateX(0); }
}

@keyframes fadeInRight {
  0%   { opacity: 0; transform: translateX(20px); }
  100% { opacity: 1; transform: translateX(0); }
}

.js [data-anim] {
  opacity: 0;
}

.js [data-anim].in {
  opacity: 1;
  animation-fill-mode: backwards;
  animation-timing-function: cubic-bezier(0.35, 0, 0.25, 1);
  animation-duration: 700ms;
}

.js [data-anim="fadeIn"].in      { animation-name: fadeIn; animation-duration: 1400ms; }
.js [data-anim="flyIn"].in       { animation-name: flyIn; }
.js [data-anim="fadeInDown"].in  { animation-name: fadeInDown; }
.js [data-anim="fadeInUp"].in    { animation-name: fadeInUp; }
.js [data-anim="fadeInLeft"].in  { animation-name: fadeInLeft; }
.js [data-anim="fadeInRight"].in { animation-name: fadeInRight; }

[data-delay="150"] { animation-delay: 150ms; }
[data-delay="300"] { animation-delay: 300ms; }
[data-delay="450"] { animation-delay: 450ms; }
[data-delay="600"] { animation-delay: 600ms; }

@media (prefers-reduced-motion: reduce) {
  .js [data-anim] {
    opacity: 1 !important;
    animation: none !important;
  }
}


/* --------------------------------------------------------------------------
   Header bar
   -------------------------------------------------------------------------- */

.nav-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--bar-h);
  z-index: 999;
  display: flex;
  align-items: stretch;
  background: var(--shade);
  color: #fff;
  font-size: 16px;
  font-weight: 100;
}

.nav-bar button {
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  color: inherit;
  cursor: pointer;
  font: inherit;
}

.nav-bar .menu-btn,
.nav-bar .volume {
  width: 57px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.nav-bar .volume.is-unused {
  visibility: hidden;           /* page has no background video to mute */
}

.nav-bar .divider {
  width: 1px;
  background: rgba(0, 0, 0, 0.1);
}

.nav-bar .count,
.nav-bar .title {
  display: flex;
  align-items: center;
  line-height: 32px;
  padding: 0 10px;
  white-space: nowrap;
}

.nav-bar .title {
  overflow: hidden;
  text-overflow: ellipsis;
}

.nav-bar .spacer {
  flex: 1;
}

.nav-bar svg {
  fill: #fff;
}


/* --------------------------------------------------------------------------
   Previous / next arrows and scroll-down hint
   -------------------------------------------------------------------------- */

.prev-next {
  position: fixed;
  right: 30px;
  bottom: 60px;
  z-index: 10;
  display: flex;
}

.prev-next a {
  width: 41px;
  height: 41px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--shade);
  color: #fff;
}

.prev-next a[aria-disabled="true"] {
  opacity: 0.5;
  pointer-events: none;
  cursor: default;
}

.prev-next svg {
  fill: currentColor;
}

.scroll-down {
  position: fixed;
  left: 50%;
  bottom: 20px;
  z-index: 10;
  width: 68px;
  height: 68px;
  margin-left: -34px;
  border: 0;
  border-radius: 34px;
  padding: 18px;
  background: var(--shade);
  color: #fff;
  line-height: 32px;
  cursor: pointer;
  transition: opacity 0.3s;
}

.scroll-down svg {
  display: block;
  width: 32px;
  height: 32px;
  fill: currentColor;
}

.scroll-down.hidden {
  opacity: 0;
  pointer-events: none;
}


/* --------------------------------------------------------------------------
   Page index (menu): 4 columns >= 1680px, 3 columns >= 1000px,
   2 columns >= 750px, 1 column below that
   -------------------------------------------------------------------------- */

.page-index {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: none;
  background: #fff;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.page-index.open {
  display: block;
}

.page-index header {
  position: relative;
  height: 57px;
  display: flex;
  justify-content: center;
  border-bottom: 1px solid rgba(0, 0, 0, 0.12);
}

.page-index .tab {
  height: 56px;
  margin: 0 16px;
  padding: 0 16px;
  border: 0;
  border-bottom: 4px solid #000;
  background: none;
  font: 100 16px/17.6px "Poppins", sans-serif;
  color: rgb(128, 128, 128);
}

.page-index .close {
  position: absolute;
  top: 0;
  right: 0;
  width: 57px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  background: none;
  cursor: pointer;
}

.page-index .grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(auto, 25%));
}

.page-index .tile {
  position: relative;
  display: block;
  width: 100%;
  height: 0;
  padding-bottom: 67%;          /* fixed tile ratio */
  overflow: hidden;
  background: #666;
  text-decoration: none;
}

.page-index .tile img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  transform: scale(1.05);
  transition: transform 0.6s ease-in-out;
}

.page-index .tile::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(rgba(0, 0, 0, 0) 180px, rgba(0, 0, 0, 0.8) 100%);
  opacity: 0;
  transition: opacity 0.3s;
}

.page-index .tile:hover::after,
.page-index .tile:focus-visible::after {
  opacity: 1;
}

.page-index .tile .label {
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 1;
  padding: 10px;
}

.page-index .tile span {
  display: inline-block;
  padding: 5px;
  font: 700 15px/22.5px "Poppins", sans-serif;
  color: #fff;
}

.page-index .tile[aria-current] span {
  padding: 5px 10px;
  background: rgba(0, 0, 0, 0.6);
  border-radius: 16px;
}

@media (max-width: 1679px) {
  .page-index .grid { grid-template-columns: repeat(3, minmax(auto, 33.333%)); }
}


/* ==========================================================================
   Tablet
   ========================================================================== */

@media (max-width: 999px) {
  .block > .row {
    grid-template-columns: minmax(0, 1fr);
    column-gap: 0;
  }

  .block.contained > .row {
    max-width: none;
  }

  .col {
    padding: 50px 6.5vw;
  }

  .scroll-down {
    display: none;
  }

  .page-index .grid {
    grid-template-columns: repeat(2, minmax(auto, 50%));
  }
}


/* ==========================================================================
   Mobile
   ========================================================================== */

@media (max-width: 749px) {
  .col {
    padding: 25px 6.667vw;
  }

  .nav-bar .menu-btn {
    width: 38px;
  }

  .nav-bar .title {
    display: none;
  }

  .page-index .grid {
    grid-template-columns: minmax(auto, 100%);
  }
}