/* =========================================================================
   A+ Dental Care Haven · location gateway
   The connecting layer between the branch sites. It shares the approved A+
   palette and the Fraunces/Inter pairing with the branch builds, but no code:
   neither branch site is modified to accommodate this screen.
   ========================================================================= */

:root {
  --black:      #141013;
  --black-deep: #0E0A0C;
  --charcoal:   #241A1E;
  --burg-900:   #4E161F;
  --burg-700:   #69151F;
  --ivory:      #F2E9E2;
  --cream:      #F8F2EA;
  --taupe:      #AB9173;
  --gold:       #B99459;
  --gold-pale:  #E7D3A6;

  --ivory-70: rgba(242, 233, 226, 0.70);
  --ivory-46: rgba(242, 233, 226, 0.46);
  --gold-38:  rgba(185, 148, 89, 0.38);

  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* One multiplier scales the whole entrance. 1 = first visit, 0.16 = a
     returning patient who has seen it, 0 = reduced motion. Every delay below
     is written as calc(<ms> * var(--t)), so the sequence keeps its shape at
     any speed instead of needing a second set of rules. */
  --t: 1;
  --ease: cubic-bezier(0.33, 0.7, 0.24, 1);
}

* { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  background: var(--black);
  color: var(--ivory);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* the ground tint shifts toward whichever branch is being considered */
body::before {
  content: "";
  position: fixed; inset: 0; z-index: 0;
  background: radial-gradient(120% 90% at 50% 8%, #1D1418 0%, var(--black) 58%, var(--black-deep) 100%);
  transition: background 0.75s ease;
}
body.hot-paranaque::before {
  background: radial-gradient(120% 90% at 26% 8%, #2A1218 0%, #1A1013 56%, var(--black-deep) 100%);
}
body.hot-quezon-city::before {
  background: radial-gradient(120% 90% at 74% 8%, #1C171B 0%, #15100F 56%, var(--black-deep) 100%);
}

/* ------------------------------------------------------- architecture --- */
/* Each location word gets its own half of the screen to live in, and each half
   clips. So one word is cropped at the centre seam and bleeds off its outer
   edge, the two can never overlap into mud, and every branch added later simply
   takes a share of the same row. The words sit in the open band above the
   panels, where there is canvas to be architectural on: underneath them they
   were completely hidden and contributed nothing. */
.arch {
  position: fixed; inset: 0; z-index: 1; pointer-events: none;
  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
}
.arch-half { position: relative; overflow: hidden; }

.arch-word {
  position: absolute;
  top: clamp(52px, 8vh, 118px);
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(96px, 14vw, 220px);
  line-height: 0.82;
  letter-spacing: -0.05em;
  white-space: nowrap;
  color: var(--ivory);
  opacity: 0;
  transition: opacity 0.75s ease, transform 0.9s var(--ease);
}
/* Each word is anchored away from the centre and bleeds off its own outer edge,
   where the half clips it. Anchoring them toward the seam instead put the two
   visible fragments hard against each other, and at narrow widths they read as
   one nonsense word. Bleeding outward leaves a gap in the middle at every width
   and is the more architectural crop anyway. */
.arch-l .arch-word { right: 14%; transform: translateX(-26px); }
.arch-r .arch-word { left: 14%;  transform: translateX(26px); }
/* The middle column has no outer edge of its own, so its word is centred
   and crops evenly on both sides rather than pushing against a neighbour. */
.arch-c .arch-word { left: 50%; transform: translate(-50%, 0) scale(0.96); }

/* revealed quietly once the panels are in place */
.ready .arch-word { opacity: 0.05; transform: translateX(0); }
.ready .arch-c .arch-word { transform: translate(-50%, 0) scale(1); }
/* and the active branch's word steps forward, still far below reading weight */
body.hot-paranaque   .arch-l .arch-word { opacity: 0.13; }
body.hot-quezon-city .arch-c .arch-word { opacity: 0.13; }
body.hot-chino-roces .arch-r .arch-word { opacity: 0.13; }

/* ------------------------------------------------------------- layout --- */
.gate {
  position: relative; z-index: 2;
  min-height: 100vh; min-height: 100dvh;
  display: flex; flex-direction: column;
  padding: clamp(22px, 3.4vw, 40px) clamp(20px, 4vw, 64px) clamp(26px, 4vw, 52px);
}

.gate-head { flex: none; }

.mark { display: inline-flex; align-items: center; gap: 13px; min-height: 44px; }
.mark-img {
  width: 44px; height: 44px; border-radius: 50%; object-fit: cover;
  border: 1px solid var(--gold-38);
}
.mark-name {
  margin: 0;
  font-family: var(--font-body);
  font-size: 14.5px; font-weight: 650; letter-spacing: 0.01em;
  color: var(--ivory);
}

.gate-lede {
  flex: none;
  margin: clamp(38px, 7vh, 86px) 0 clamp(26px, 4.2vh, 48px);
  max-width: 760px;
}

.eyebrow {
  margin: 0 0 18px;
  font-size: 11px; font-weight: 800; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--gold);
}

.gate-title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(38px, 6.2vw, 86px);
  line-height: 1.02;
  letter-spacing: -0.035em;
  color: var(--cream);
}
.gate-title em { font-style: italic; color: var(--gold-pale); }

/* -------------------------------------------------------------- panels --- */
/* auto-fit means two branches sit side by side today and three will divide the
   same row tomorrow, with no change to this file. */
.panels {
  flex: 1 1 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: clamp(14px, 1.6vw, 22px);
  align-content: stretch;
  min-height: 0;
}

.panel {
  position: relative;
  display: block;
  overflow: hidden;
  min-height: clamp(230px, 40vh, 430px);
  border-radius: 3px;
  border: 1px solid rgba(242, 233, 226, 0.12);
  text-decoration: none;
  color: inherit;
  isolation: isolate;
  transition: border-color 0.45s ease, transform 0.55s var(--ease);
}
.panel:hover, .panel:focus-visible { border-color: var(--gold-38); }
.panel:focus-visible { outline: 2px solid var(--gold-pale); outline-offset: 3px; }

/* A chooser panel has to stand for a place. There is no interior, reception,
   storefront or team photograph for any of the three branches, and the only
   images in the library are clinical macro shots, which Daniel ruled out for
   location choosers and which both branch level choosers already dropped.
   Rather than let a photograph of somebody's braces stand for an address, each
   panel is its own lit room: the branch's ground, one directional gold light,
   and the branch's own name doing the work. Nothing is claimed about premises
   nobody has photographed yet. Swap in real photography when it arrives. */
.panel-media {
  position: absolute; inset: 0; z-index: 0;
  background-position: center; background-size: cover;
  transform: scale(1.02);
  transition: transform 1.1s var(--ease), filter 0.6s ease, opacity 0.6s ease;
}
.panel:hover .panel-media,
.panel:focus-visible .panel-media { transform: scale(1.07); }

/* The light itself: a curved luminous sweep through the upper half of the
   room, lifted on hover so the room brightens as you approach it. Curved line
   work, not a radial disc; the whole family speaks this accent language now. */
.panel-media::after {
  content: ""; position: absolute; left: -20%; right: -20%; top: -14%; height: 72%;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 620' fill='none'%3E%3Cpath d='M-120 380C120 90 300 560 560 300S920 40 1180 330 1450 560 1720 210' stroke='rgba(231,211,166,0.22)' stroke-width='100' stroke-linecap='round'/%3E%3Cpath d='M-120 380C120 90 300 560 560 300S920 40 1180 330 1450 560 1720 210' stroke='rgba(240,222,182,0.55)' stroke-width='9' stroke-linecap='round'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
  filter: blur(26px);
  opacity: 0.85; transition: opacity 0.6s ease;
}
.panel:hover .panel-media::after,
.panel:focus-visible .panel-media::after { opacity: 1.3; }

/* Location photographs, graded into each branch's room: warmed, softened,
   and held under the branch scrim so the panel type keeps its contrast. */
.panel .panel-media { background-size: cover; background-position: center 26%; filter: saturate(0.8) sepia(0.08) brightness(0.98); }
.panel[data-branch="paranaque"] .panel-media {
  background-image: linear-gradient(180deg, rgba(111, 31, 40, 0.05) 0%, rgba(78, 22, 31, 0.4) 58%, rgba(40, 10, 15, 0.92) 100%),
                    url('/assets/img/loc/loc-paranaque.jpg');
}
.panel[data-branch="quezon-city"] .panel-media {
  background-image: linear-gradient(180deg, rgba(58, 42, 46, 0.05) 0%, rgba(36, 26, 30, 0.42) 56%, rgba(19, 13, 16, 0.92) 100%),
                    url('/assets/img/loc/loc-quezon-city.jpg');
}
.panel[data-branch="chino-roces"] .panel-media {
  background-image: linear-gradient(180deg, rgba(36, 26, 30, 0.05) 0%, rgba(78, 22, 31, 0.4) 54%, rgba(10, 7, 9, 0.93) 100%),
                    url('/assets/img/loc/loc-chino-roces.jpg');
}
.panel[data-branch="chino-roces"] .panel-media::after { opacity: 0.95; }

.panel-body {
  position: relative; z-index: 1;
  height: 100%;
  display: flex; flex-direction: column; align-items: flex-start;
  justify-content: flex-end;
  gap: 0;
  padding: clamp(22px, 2.6vw, 38px);
}

.panel-city {
  font-size: 10.5px; font-weight: 800; letter-spacing: 0.24em;
  text-transform: uppercase; color: var(--gold-pale);
  margin-bottom: 12px;
}

.panel-name {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(34px, 4.6vw, 68px);
  line-height: 0.98;
  letter-spacing: -0.04em;
  color: var(--cream);
}

.panel-line {
  margin-top: 14px;
  font-size: 13.5px; line-height: 1.5;
  color: var(--ivory-70);
  max-width: 30ch;
}

/* No underline. The 44px tall box that guarantees the touch target put a rule
   far below the words, which read as a stray line rather than a link. The whole
   panel is the link, so the label and its arrow are enough on their own. */
.panel-cta {
  display: inline-flex; align-items: center; gap: 10px;
  min-height: 44px; margin-top: 10px;
  font-size: 13.5px; font-weight: 650; letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gold-pale);
  transition: color 0.3s ease, gap 0.35s var(--ease);
}
.panel-cta b { font-weight: 400; font-size: 1.15em; }
.panel:hover .panel-cta, .panel:focus-visible .panel-cta {
  color: var(--cream); gap: 17px;
}

/* the branch this patient chose last time, noted quietly and never as the only
   way to tell the panels apart */
.panel.remembered .panel-city::after {
  content: " · last visited";
  color: var(--ivory-46); letter-spacing: 0.14em;
}

/* ------------------------------------------------------------ entrance --- */
/* Panels open outward from the centre seam: the same centre out language the
   QC service wheel uses, so the ecosystem moves in one accent. The starting
   clip is written by JavaScript from each panel's position, which is what makes
   a third branch fall into the sequence without new rules. */
.js .panel { clip-path: inset(0 0 0 0); }
.js:not(.ready) .panel { transition: none; }

.js .gate-head .mark,
.js .eyebrow,
.js .gate-title { opacity: 0; transform: translateY(14px); }

.js.ready .gate-head .mark,
.js.ready .eyebrow,
.js.ready .gate-title {
  opacity: 1; transform: translateY(0);
  transition: opacity 0.7s ease var(--d), transform 0.85s var(--ease) var(--d);
}
.js.ready .gate-head .mark { --d: calc(90ms * var(--t)); }
.js.ready .eyebrow         { --d: calc(220ms * var(--t)); }
.js.ready .gate-title      { --d: calc(300ms * var(--t)); }

.js .panel-city,
.js .panel-name,
.js .panel-line,
.js .panel-cta { opacity: 0; transform: translateY(12px); }

.js.ready .panel-city,
.js.ready .panel-name,
.js.ready .panel-line,
.js.ready .panel-cta {
  opacity: 1; transform: translateY(0);
  transition: opacity 0.6s ease var(--d), transform 0.7s var(--ease) var(--d);
}
.js.ready .panel-name { --d: calc(560ms * var(--t)); }
.js.ready .panel-city { --d: calc(700ms * var(--t)); }
.js.ready .panel-line { --d: calc(780ms * var(--t)); }
.js.ready .panel-cta  { --d: calc(840ms * var(--t)); }
/* the address only arrives after the location name, as asked */

/* ------------------------------------------------- entering a location --- */
.enter-ov {
  position: fixed; z-index: 60;
  overflow: hidden;
  border-radius: 3px;
  background-position: center; background-size: cover;
  transition: left 0.6s var(--ease), top 0.6s var(--ease),
              width 0.6s var(--ease), height 0.6s var(--ease),
              border-radius 0.6s var(--ease);
  will-change: left, top, width, height;
}
.enter-ov[data-branch="paranaque"] {
  background-image:
    linear-gradient(176deg, rgba(78,22,31,0.14) 0%, rgba(78,22,31,0.62) 44%, rgba(44,11,17,0.95) 100%),
    url("../img/paranaque.jpg");
}
.enter-ov[data-branch="quezon-city"] {
  background-image:
    linear-gradient(176deg, rgba(20,16,19,0.02) 0%, rgba(20,16,19,0.34) 46%, rgba(12,9,11,0.88) 100%),
    url("../img/quezon-city.jpg");
}
.enter-ov .enter-name {
  position: absolute; left: clamp(22px, 2.6vw, 38px); bottom: clamp(22px, 2.6vw, 38px);
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(34px, 4.6vw, 68px); line-height: 0.98; letter-spacing: -0.04em;
  color: var(--cream);
  transform-origin: left bottom;
  transition: transform 0.6s var(--ease), opacity 0.5s ease 0.25s;
}
.enter-ov.go .enter-name { transform: scale(1.34); opacity: 0; }

.entering .gate { opacity: 0; transition: opacity 0.4s ease; }

/* --------------------------------------------------------- responsive --- */
@media (max-width: 900px) {
  .gate-lede { margin: clamp(30px, 5vh, 52px) 0 clamp(20px, 3vh, 30px); }
  .panel-body { justify-content: flex-end; }
  .panel { min-height: clamp(208px, 30vh, 300px); }
  .panels { gap: 12px; }
}

@media (max-width: 640px) {
  /* The architectural word is a desktop signature. On a 375px screen each half
     is under 190px wide, so both words shrink to four cropped letters sitting
     against each other and read as one nonsense word. There is no width at
     which they are architectural here, so the layer stands down and the panels'
     own photography carries the atmosphere. */
  .arch { display: none; }
  .panel-line { font-size: 13px; }
  .panel-name { overflow-wrap: anywhere; }
  .panel-body { padding: 20px; }
}

/* One long luminous line behind the whole gate, end to end. */
body::after {
  content: ""; position: fixed; z-index: 0; pointer-events: none;
  left: -10%; right: -10%; top: 4%; height: 54%;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 620' fill='none'%3E%3Cpath d='M-120 380C120 90 300 560 560 300S920 40 1180 330 1450 560 1720 210' stroke='rgba(231,211,166,0.22)' stroke-width='100' stroke-linecap='round'/%3E%3Cpath d='M-120 380C120 90 300 560 560 300S920 40 1180 330 1450 560 1720 210' stroke='rgba(240,222,182,0.55)' stroke-width='9' stroke-linecap='round'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
  filter: blur(30px); opacity: 0.55;
}

/* --------------------------------------------------- page transitions --- */
@view-transition { navigation: auto; }

/* ---------------------------------------------------- reduced motion --- */
/* The cinematic separation is skipped entirely and the final selector is what
   loads. Nothing is hidden, nothing waits, and choosing a branch navigates
   straight away with no transition. */
@media (prefers-reduced-motion: reduce) {
  :root { --t: 0; }
  .js .panel,
  .js .gate-head .mark, .js .eyebrow, .js .gate-title,
  .js .panel-city, .js .panel-name, .js .panel-line, .js .panel-cta {
    opacity: 1 !important; transform: none !important; clip-path: none !important;
    transition: none !important;
  }
  .arch-word, .panel-media, body::before { transition: none !important; }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
  .ready .arch-word { transform: none; }
}