/* =========================================================
   splitter.css — the front door
   Two entrances into one website. Deliberately sparse: no
   navigation, no scrolling, one decision to make.
   ========================================================= */

.splitter {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  background: var(--black);
  overflow: hidden;
}

/* ---------- Brand lockup across the top ---------- */
.splitter__brand {
  position: relative;
  z-index: 5;
  display: flex;
  justify-content: center;
  padding: clamp(1.25rem, 4vh, 3.5rem) var(--gutter) clamp(1rem, 2.5vh, 2.5rem);
  pointer-events: none;
}
.splitter__brand .logo {
  --mark-size: clamp(2.75rem, 6vw, 4rem);
  --word-size: clamp(.875rem, 1.6vw, 1.125rem);
}
.splitter__brand .logo__mark .e { color: var(--ivory); }
.splitter__brand .logo__mark .s { color: var(--taupe); }
.splitter__brand .logo__name { color: var(--ivory); }
.splitter__brand .logo__strap { color: rgba(247, 245, 242, .5); }

/* ---------- The two doors ---------- */
.splitter__doors {
  flex: 1;
  display: flex;
  min-height: 0;
}
@media (max-width: 800px) {
  .splitter__doors { flex-direction: column; }
}

.door {
  position: relative;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44svh;
  padding: clamp(2rem, 5vw, 4rem);
  overflow: hidden;
  isolation: isolate;
  text-align: center;
  transition: flex-grow .8s var(--ease);
}
.door + .door { border-left: 1px solid rgba(247, 245, 242, .16); }
@media (max-width: 800px) {
  .door + .door { border-left: 0; border-top: 1px solid rgba(247, 245, 242, .16); }
  /* Stacked, the two doors plus the brand and footer must still add up
     to one screen — the front door is a single decision, not a scroll. */
  /* A floor, not a target — the doors are flex children and grow to fill
     whatever the brand and footer leave, so the page lands on exactly one
     screen instead of overshooting it. */
  .door { min-height: 26svh; padding: 1rem 1.5rem; }
  .door__content { gap: .625rem; }

  /* The About button costs vertical space, so the footer pays for it: the
     separator goes, and the two remaining lines sit tight together. */
  .splitter__foot { gap: .875rem; padding-block: .875rem; }
  .splitter__meta {
    font-size: .625rem;
    letter-spacing: .1em;
    gap: .125rem .75rem;
    line-height: 1.5;
  }
  .splitter__meta .dot { display: none; }

}

.door__bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%; height: 100%;
  object-fit: cover;
  transform: scale(1.01);
  transform-origin: center 25%;
  transition: transform 1.6s var(--ease), filter .8s var(--ease);
}

/* Both door photographs are portrait, so covering a landscape-ish panel
   always crops vertically. Bias the frame upward — at every width, not
   just on phones — so the couple's heads are never the part that goes.
   Any portrait photo swapped in later inherits the same protection. */
.door--weddings .door__bg { object-position: center 18%; }
.door--property .door__bg { object-position: center 45%; }
.door__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  transition: background .8s var(--ease);
}
/* The scrims are heavier than they look like they need to be. Both
   photographs have bright areas exactly where the copy sits, and the
   text has to stay readable over whichever image Ellie swaps in later. */
.door--weddings .door__scrim {
  background:
    radial-gradient(ellipse 70% 55% at 50% 52%, rgba(17,17,17,.58) 0%, rgba(17,17,17,0) 100%),
    linear-gradient(180deg, rgba(17,17,17,.42) 0%, rgba(17,17,17,.34) 45%, rgba(17,17,17,.66) 100%);
}
.door--property .door__scrim {
  background:
    radial-gradient(ellipse 70% 55% at 50% 52%, rgba(17,17,17,.60) 0%, rgba(17,17,17,0) 100%),
    linear-gradient(180deg, rgba(17,17,17,.52) 0%, rgba(17,17,17,.44) 45%, rgba(17,17,17,.74) 100%);
}

.door__content {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.25rem;
  max-width: 30ch;
  color: var(--ivory);
}
.door__eyebrow {
  font-size: 0.625rem;
  font-weight: 500;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--taupe);
}
.door__title {
  font-family: var(--font-display);
  font-size: clamp(2.25rem, 5.4vw, 4.25rem);
  font-weight: 400;
  line-height: 1.02;
  letter-spacing: -0.02em;
  color: var(--ivory);
}
.door__desc {
  font-size: clamp(.875rem, 1.1vw, 1rem);
  font-weight: 300;
  line-height: 1.65;
  color: rgba(247, 245, 242, .78);
}

.door__enter {
  display: inline-flex;
  align-items: center;
  gap: .75rem;
  margin-top: .75rem;
  padding-bottom: .5rem;
  font-size: 0.625rem;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ivory);
  border-bottom: 1px solid rgba(247, 245, 242, .4);
  transition: gap .5s var(--ease), border-color .5s var(--ease);
}
.door__enter::after { content: "\2192"; letter-spacing: 0; font-size: .8rem; }

/* Hover: the chosen door opens up and takes more of the screen,
   the other recedes. Pointer-fine only, so touch devices are
   unaffected and both doors stay equal. */
@media (hover: hover) and (pointer: fine) and (min-width: 801px) {
  .splitter__doors:hover .door { flex-grow: .88; }
  .splitter__doors:hover .door:hover { flex-grow: 1.3; }
  .door:hover .door__bg { transform: scale(1.07); }
  .door:hover .door__scrim {
    background:
      radial-gradient(ellipse 70% 55% at 50% 52%, rgba(17,17,17,.46) 0%, rgba(17,17,17,0) 100%),
      linear-gradient(180deg, rgba(17,17,17,.28) 0%, rgba(17,17,17,.22) 45%, rgba(17,17,17,.56) 100%);
  }
  .splitter__doors:hover .door:not(:hover) .door__bg { filter: grayscale(.5) brightness(.72); }
  .door:hover .door__enter { gap: 1.15rem; border-color: var(--taupe); }
}

/* Keyboard users get the same emphasis as a mouse hover */
.door:focus-visible { outline: none; }
.door:focus-visible .door__enter { gap: 1.15rem; border-color: var(--taupe); }
.door:focus-visible .door__scrim {
  background:
    radial-gradient(ellipse 70% 55% at 50% 52%, rgba(17,17,17,.46) 0%, rgba(17,17,17,0) 100%),
    linear-gradient(180deg, rgba(17,17,17,.28) 0%, rgba(17,17,17,.22) 45%, rgba(17,17,17,.56) 100%);
}

/* ---------- Footer strip ---------- */
.splitter__foot {
  position: relative;
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.125rem;
  padding: clamp(1rem, 2.5vh, 2rem) var(--gutter);
  border-top: 1px solid rgba(247, 245, 242, .12);
}

/* Ellie wanted this to read as a third way in, not a footer link, so it
   is a proper button — sat below the doors where it cannot compete with
   the main choice. */
.splitter__about {
  display: inline-flex;
  align-items: center;
  gap: .625rem;
  padding: .8125rem 1.875rem;
  border: 1px solid rgba(189, 166, 149, .55);
  color: var(--ivory);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  transition: background .4s var(--ease), border-color .4s var(--ease),
              color .4s var(--ease), gap .4s var(--ease);
}
.splitter__about::after { content: "\2192"; letter-spacing: 0; font-size: .8rem; }
.splitter__about:hover {
  background: var(--taupe);
  border-color: var(--taupe);
  color: var(--black);
  gap: 1rem;
}
.splitter__about:focus-visible { outline: 2px solid var(--taupe); outline-offset: 3px; }

.splitter__meta {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1.25rem;
  justify-content: center;
  align-items: center;
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(247, 245, 242, .42);
}
.splitter__meta a { transition: color .3s var(--ease); }
.splitter__meta a:hover { color: var(--taupe); }
.splitter__meta .dot { color: rgba(247, 245, 242, .25); }

/* ---------- Stacked-panel crop ----------
   Must come after the base .door__bg rules above: the selectors have equal
   specificity, so source order is what decides the winner. Stacked panels
   are shorter and wider than side-by-side ones, so the vertical crop bites
   harder and the frame needs biasing further up still. */
@media (max-width: 800px) {
  .door--weddings .door__bg { object-position: center 12%; }
  .door--property .door__bg { object-position: center 42%; }
}

/* ---------- Short screens ----------
   On a phone with limited height there is not room for the brand lockup,
   two doors of descriptive copy, and the About button all at once. The
   descriptions are the least load-bearing part — the panel already says
   "Wedding Films" or "Property Media" — so they go, and the entrance
   stays a single screen with one decision on it. */
@media (max-width: 800px) and (max-height: 760px) {
  .door__desc { display: none; }
  .splitter__brand { padding-block: .75rem .625rem; }
  .splitter__brand .logo { --mark-size: 2.25rem; --word-size: .8125rem; }
  .door__title { font-size: clamp(1.875rem, 8vw, 2.5rem); }
  .splitter__about { padding: .6875rem 1.5rem; }
}