/* =========================================================
   ZENITH BARBERSHOP
   ========================================================= */

:root {
  --black: #0F0F0F;
  --ink: #1C1C1C;
  --paper: #E9E8E5;
  --paper-2: #EDECE8;
  --white: #FFFFFF;
  --grey: #8C8C8C;
  --grey-2: #B9B9B9;
  --line-dark: #343434;
  --line-light: rgba(28, 28, 28, .2);
  --green: #8FD19E;

  --head: "Krona One", "Arial Black", sans-serif;
  --body: "Montserrat", "Helvetica Neue", Arial, sans-serif;

  --gutter: 5.4vw;
  --ease: cubic-bezier(.25, 1, .5, 1);
}

/* ---------- base ---------- */

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--black);
  color: var(--paper);
  font: 500 16px/1.6 var(--body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
h1, h2, h3, p { margin: 0; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
::selection { background: var(--paper); color: var(--black); }
:focus-visible { outline: 1px solid currentColor; outline-offset: 4px; }

.container { max-width: 1680px; margin: 0 auto; padding: 0 var(--gutter); }

.label {
  font: 500 12px/1.4 var(--body);
  letter-spacing: .32em;
  text-transform: uppercase;
}
.label--strong { font-weight: 600; }
.h2 {
  font: 400 clamp(34px, 4.9vw, 88px)/1.05 var(--head);
  text-transform: uppercase;
}

/* ---------- buttons ---------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  height: 58px;
  padding: 0 40px;
  border: 1px solid transparent;
  font: 600 12px/1 var(--body);
  letter-spacing: .32em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: background-color .3s, color .3s, border-color .3s;
}
.btn--light { background: var(--paper); color: var(--black); }
.btn--light:hover { background: var(--white); }
.btn--outline { border-color: #5A5A5A; color: var(--paper); padding: 0 34px; }
.btn--outline:hover { border-color: var(--paper); }
.btn--black { background: var(--black); color: var(--paper); }
.btn--black:hover { background: #2A2A2A; }
.btn--block { width: 100%; }
.btn .arr { display: inline-block; margin-left: .5em; letter-spacing: 0; transition: transform .45s var(--ease); }
.btn:hover .arr { transform: translateX(6px); }

/* ---------- status ---------- */

.status { display: inline-flex; align-items: center; gap: 14px; font-size: 17px; color: var(--paper); }
.dot {
  position: relative;
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 0 8px rgba(143, 209, 158, .1);
  flex: none;
}
.dot::after {
  content: "";
  position: absolute; inset: 0;
  border-radius: 50%;
  background: var(--green);
  animation: ping 2.8s cubic-bezier(.2, .6, .35, 1) infinite;
}
@keyframes ping {
  0% { transform: scale(1); opacity: .55; }
  70%, 100% { transform: scale(3.4); opacity: 0; }
}
.is-closed .dot { background: var(--grey); box-shadow: 0 0 0 8px rgba(140, 140, 140, .12); }
.is-closed .dot::after { content: none; }

/* =========================================================
   HERO
   ========================================================= */

.hero {
  position: relative;
  display: flex; flex-direction: column;
  height: 100vh; height: 100svh;
  min-height: 680px;
  overflow: hidden;
  background:
    radial-gradient(ellipse 70% 60% at 50% 76%, #161616 0%, var(--black) 70%);
}
.hero__logo {
  position: absolute; left: 50%; top: clamp(28px, 4.4vh, 44px); z-index: 2;
  transform: translateX(-50%);
  color: var(--paper);
}
.hero__logo svg { display: block; width: clamp(120px, 9.2vw, 180px); aspect-ratio: 648.473 / 194.659; fill: currentColor; }

.hero__sky { position: relative; flex: 1; min-height: 0; }
.dial { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.dial__orbits circle { fill: none; stroke: rgba(255, 255, 255, .045); stroke-width: 1.5; }
.dial__rays line { stroke: rgba(255, 255, 255, .035); stroke-width: 1.5; }
.dial__rim { fill: none; stroke: #1E1E1E; stroke-width: 20; }
.dial__ticks line { stroke: #D9D9D9; stroke-width: 2.5; }
.dial__ticks .is-zenith { stroke: var(--white); stroke-width: 2.5; }
.dial__labels text {
  fill: #A3A3A3;
  font: 500 22px var(--body);
  text-anchor: middle;
  dominant-baseline: middle;
}
.dial__labels .is-zenith { fill: var(--paper); font-size: 21px; font-weight: 600; letter-spacing: .32em; }
.dial__halo {
  fill: rgba(232, 232, 232, .22);
  transform-box: fill-box; transform-origin: center;
  animation: breathe 4s ease-in-out infinite;
}
@keyframes breathe { 50% { transform: scale(1.45); opacity: .55; } }
.dial__dot { fill: var(--paper); }
.dial__tag rect { fill: var(--paper); }
.dial__tag text { fill: var(--black); font: 600 21px var(--body); letter-spacing: .3em; text-anchor: middle; }
.dial__sun { transition: opacity .6s; }
.dial__sun.is-closed .dial__dot { fill: transparent; stroke: var(--grey-2); stroke-width: 3; }
.dial__sun.is-closed .dial__halo { fill: transparent; }

.hero__bottom {
  position: relative;
  padding: clamp(28px, 3.6vh, 44px) 0 clamp(32px, 5vh, 56px);
}
.hero__bottom::after { /* the horizon */
  content: "";
  position: absolute; left: 0; right: 0; top: 0;
  height: 1px;
  background: rgba(255, 255, 255, .28);
}
.hero__bottom::before { /* faint reflection lines under the horizon */
  content: "";
  position: absolute; inset: 0;
  background: repeating-linear-gradient(to bottom, rgba(255, 255, 255, .035) 0 1px, transparent 1px 15px);
  -webkit-mask-image: linear-gradient(to bottom, #000, transparent 80%);
  mask-image: linear-gradient(to bottom, #000, transparent 80%);
  pointer-events: none;
}
.hero__bottom .container { position: relative; }
.hero__title {
  font: 400 clamp(26px, 3.85vw, 72px)/1.1 var(--head);
  text-transform: uppercase;
  text-align: center;
}
.hero__row {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 24px;
  margin-top: clamp(24px, 3.4vh, 40px);
  font-size: clamp(15px, 1.2vw, 20px);
  line-height: 1.55;
  color: #D6D6D6;
}
.hero__row .btn { height: clamp(52px, 4.3vw, 66px); padding: 0 clamp(40px, 4vw, 64px); }
.hero__right { text-align: right; }

/* =========================================================
   01 · THE NAME
   ========================================================= */

.name { background: var(--paper); color: var(--ink); padding: clamp(80px, 10vw, 160px) 0 clamp(96px, 11vw, 180px); }
.sec-top {
  position: relative;
  display: flex; justify-content: space-between; align-items: center;
  padding-bottom: 28px;
}
.sec-top .label:last-child { color: #6E6E6E; }

.name__head {
  display: flex; justify-content: space-between; align-items: flex-end; gap: 32px;
  position: relative;
  padding: clamp(56px, 6.2vw, 120px) 0 clamp(64px, 6.4vw, 124px);
}
.sec-top::after, .name__head::after, #book .sec-head::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 1px;
  background: var(--line-light);
}
.name__word {
  font: 400 clamp(56px, 11.4vw, 220px)/.8 var(--head);
  text-transform: uppercase;
  color: var(--ink);
  margin-left: -.03em;
}
.name__pron { display: flex; align-items: baseline; gap: 22px; font-size: clamp(18px, 1.6vw, 28px); white-space: nowrap; }
.name__pron .label { font-size: 12px; color: #4A4A4A; }

.name__body {
  display: grid;
  grid-template-columns: minmax(0, 37fr) minmax(0, 63fr);
  padding-top: clamp(36px, 3.6vw, 64px);
}
.name__origin .label { color: #5A5A5A; }
.name__ar {
  margin: 18px 0 14px;
  font: 600 clamp(28px, 2.3vw, 42px)/1.5 "Noto Sans Arabic", "Geeza Pro", sans-serif;
  color: var(--ink);
  text-align: left;
}
.name__gloss { font-size: clamp(15px, 1.1vw, 18px); color: #555; }

.name__lead { font-size: clamp(24px, 2.85vw, 52px); line-height: 1.32; letter-spacing: -.005em; }
.name__lead span { color: #7A7A7A; }
.name__para { max-width: 46em; margin-top: clamp(28px, 2.8vw, 44px); font-size: clamp(16px, 1.3vw, 22px); line-height: 1.8; color: #3A3A3A; }
.name__sign {
  display: flex; align-items: center; gap: 22px;
  margin-top: clamp(32px, 3.4vw, 52px);
  font: 400 clamp(15px, 1.35vw, 24px)/1 var(--head);
  text-transform: uppercase;
  letter-spacing: .02em;
}
.name__sign svg { width: clamp(36px, 2.4vw, 46px); fill: currentColor; flex: none; overflow: visible; }

/* =========================================================
   02 · BOOK  &  03 · VISIT (dark sections)
   ========================================================= */

.dark-sec { background: var(--black); color: var(--paper); padding: clamp(80px, 8.2vw, 150px) 0; scroll-margin-top: 0; }
#book { padding-bottom: clamp(32px, 3.4vw, 64px); }
.dark-sec--visit { padding-top: clamp(32px, 3.4vw, 64px); padding-bottom: clamp(80px, 8.6vw, 150px); }
.sec-head {
  display: flex; justify-content: space-between; align-items: flex-end; gap: 32px;
}
#book .sec-head { position: relative; padding-bottom: clamp(36px, 3.4vw, 60px); }
#book .sec-head::after { background: var(--line-dark); }
.sec-head .label { color: #9A9A9A; margin-bottom: clamp(18px, 1.8vw, 28px); }
.sec-head__aside { text-align: right; font-size: clamp(15px, 1.3vw, 22px); line-height: 1.8; color: #BDBDBD; }

/* three ways in */
.ways {
  display: grid; grid-template-columns: repeat(3, 1fr);
  margin-top: clamp(40px, 3.5vw, 64px);
  border: 1px solid #3A3A3A;
}
.way {
  display: flex; flex-direction: column;
  min-height: clamp(380px, 32.5vw, 600px);
  padding: clamp(36px, 3.1vw, 58px) clamp(28px, 2.9vw, 56px);
}
.way + .way { border-left: 1px solid #3A3A3A; }
.badge { position: relative; display: block; width: clamp(96px, 7.4vw, 140px); aspect-ratio: 150 / 76; margin-bottom: clamp(24px, 2vw, 38px); }
.badge svg { position: absolute; inset: 0; width: 100%; height: 100%; fill: none; stroke: var(--paper); stroke-width: 1.4; }
.badge span {
  position: absolute; left: 0; right: 0; bottom: 14%;
  font: 400 clamp(14px, 1.2vw, 22px)/1 var(--head);
  text-align: center;
}
.way__title { font: 400 clamp(22px, 2.3vw, 42px)/1.1 var(--head); text-transform: uppercase; }
.way__text { margin-top: clamp(20px, 2.2vw, 36px); max-width: 26em; font-size: clamp(15px, 1.25vw, 21px); line-height: 1.75; color: #BDBDBD; }
.way__text--tight { margin-top: 6px; }
.way__phone { margin-top: clamp(20px, 2.2vw, 36px); font-size: clamp(20px, 1.75vw, 30px); }
.way__foot { display: flex; gap: 14px; align-items: center; margin-top: auto; padding-top: 32px; }
.way__foot .btn { height: clamp(52px, 4vw, 66px); }
.way__foot .status { font-size: clamp(15px, 1.25vw, 20px); }

/* find us */
.status--pill { margin-bottom: 6px; }
.visit {
  display: grid; grid-template-columns: 2fr 1fr;
  margin-top: clamp(40px, 4vw, 70px);
  border: 1px solid #3A3A3A;
}
.map {
  position: relative;
  min-height: clamp(420px, 45vw, 820px);
  overflow: hidden;
  background: #DCDBD7;
}
.map iframe {
  position: absolute; left: 0; top: -160px; /* hides Google's place card; the logo and terms stay visible */
  width: 100%; height: calc(100% + 160px);
  border: 0;
  pointer-events: none;
  filter: grayscale(1) contrast(.92) brightness(1.04);
}
.map__pin { /* centred on the shop: the iframe's centre sits 80px above the box centre */
  position: absolute; left: 50%; top: calc(50% - 80px);
  display: flex; flex-direction: column; align-items: center; gap: 16px;
  transform: translate(-50%, -42px); /* our sun sits over Google's own marker */
  color: var(--black);
  pointer-events: none;
}
.map__pin svg { width: 96px; fill: var(--black); overflow: visible; }
.map__mask { fill: #E4E3E0; }
.map__halo { fill: rgba(15, 15, 15, .14); }
.map__ring {
  fill: none; stroke: var(--black); stroke-width: 1.5;
  transform-box: fill-box; transform-origin: center;
  animation: ring 3s cubic-bezier(.2, .6, .35, 1) infinite;
}
@keyframes ring {
  0% { transform: scale(1); opacity: .6; }
  75%, 100% { transform: scale(2.6); opacity: 0; }
}
.map__tag { white-space: nowrap; padding: 11px 18px; background: var(--black); color: var(--paper); font-weight: 600; font-size: 12px; }
.map__open { position: absolute; right: 24px; bottom: 26px; height: 56px; padding: 0 28px; }

.visit__info { display: flex; flex-direction: column; border-left: 1px solid #3A3A3A; }
.visit__row { padding: clamp(28px, 2.7vw, 48px) clamp(28px, 2.6vw, 48px); border-bottom: 1px solid #3A3A3A; }
.visit__row .label { color: #8A8A8A; font-size: 12px; margin-bottom: 14px; }
.visit__val { font-size: clamp(17px, 1.45vw, 26px); line-height: 1.6; }
.visit__cta { margin-top: auto; padding: clamp(28px, 2.6vw, 48px); }
.visit__cta .btn { height: clamp(56px, 4.2vw, 72px); }

/* =========================================================
   BOOK NOW BAND
   ========================================================= */

.band {
  position: relative;
  display: block;
  padding: clamp(36px, 3.6vw, 64px) 0;
  overflow: hidden;
  background: var(--paper-2);
  color: var(--black);
  transition: background-color .5s var(--ease), color .5s var(--ease);
}
.band:hover { background: var(--black); color: var(--paper); }
.band__track {
  display: flex; width: max-content;
  animation: run 42s linear infinite;
}
.band__group {
  display: flex; align-items: baseline;
  font: 400 clamp(52px, 9vw, 176px)/1 var(--head);
}
.band__item { text-transform: uppercase; white-space: nowrap; }
.band__dome { /* half-discs that travel with the words, sitting on the baseline */
  width: 1.04em; height: .52em;
  margin: 0 .42em;
  border-radius: 999px 999px 0 0;
  background: currentColor;
  flex: none;
}
@keyframes run { to { transform: translate3d(-50%, 0, 0); } }

/* ---------- footer ---------- */

.foot { background: var(--black); color: #9A9A9A; padding: 36px 0 calc(36px + env(safe-area-inset-bottom)); }
.foot__inner { display: flex; align-items: center; gap: 32px; }
.foot__logo { width: 110px; aspect-ratio: 648.473 / 194.659; fill: var(--paper); flex: none; }
.foot__meta { margin-right: auto; font-size: 14px; }
.foot__links { display: flex; gap: 28px; font-size: 11px; }
.foot__links a { display: inline-flex; align-items: center; gap: 10px; transition: color .3s; }
.foot__links svg { width: 18px; height: 18px; fill: currentColor; flex: none; }
.foot__links a:hover { color: var(--paper); }

/* ---------- motion ---------- */

/* text that rises out of its own line */
.rise { display: block; overflow: hidden; padding-top: .08em; margin-top: -.08em; }
.rise > span { display: block; }
.hero__title .rise { display: inline-block; vertical-align: top; }

.js [data-reveal] { opacity: 0; transform: translateY(18px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.js [data-reveal].is-in { opacity: 1; transform: none; }
.ways [data-reveal]:nth-child(2) { transition-delay: .1s; }
.ways [data-reveal]:nth-child(3) { transition-delay: .2s; }

/* section heads: rules draw across, titles rise */
.js .sec-top::after, .js .name__head::after, .js #book .sec-head::after {
  transform: scaleX(0); transform-origin: left;
  transition: transform 1.6s var(--ease) .1s;
}
.js .is-in.sec-top::after, .js .is-in.name__head::after, .js #book .is-in.sec-head::after { transform: none; }
.js [data-anim] .rise > span { transform: translateY(105%); transition: transform 1.1s var(--ease) .1s; }
.js [data-anim].is-in .rise > span { transform: none; }
.js [data-anim] .label, .js .name__pron, .js .sec-head__aside, .js .sec-head .status {
  opacity: 0; transition: opacity 1s var(--ease) .35s;
}
.js [data-anim].is-in .label, .js .is-in .name__pron, .js .is-in .sec-head__aside, .js .is-in .status { opacity: 1; }

/* the sign: arc draws, then the sun comes up over it */
.js .name__sign path { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.2s var(--ease) .5s; }
.js .name__sign circle { opacity: 0; transform: translateY(10px); transition: opacity .8s var(--ease) 1.2s, transform .8s var(--ease) 1.2s; }
.js .is-in .name__sign path { stroke-dashoffset: 0; }
.js .is-in .name__sign circle { opacity: 1; transform: none; }

/* badges draw their dome */
.js .badge path { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.4s var(--ease) .25s; }
.js .badge span { opacity: 0; transition: opacity .8s var(--ease) .8s; }
.js .is-in .badge path { stroke-dashoffset: 0; }
.js .is-in .badge span { opacity: 1; }
.ways .way:nth-child(2) .badge path { transition-delay: .4s; }
.ways .way:nth-child(3) .badge path { transition-delay: .55s; }

/* map pin lands */
.js .map__pin svg { opacity: 0; transform: translateY(-22px); transition: opacity .7s var(--ease) .5s, transform 1s var(--ease) .5s; }
.js .map__tag { opacity: 0; transform: translateY(8px); transition: opacity .7s var(--ease) .95s, transform .9s var(--ease) .95s; }
.js .is-in .map__pin svg, .js .is-in .map__tag { opacity: 1; transform: none; }

/* hero intro */
.js .hero__logo { opacity: 0; transform: translate(-50%, -10px); transition: opacity 1s var(--ease) .1s, transform 1.2s var(--ease) .1s; }
.js .dial__orbits, .js .dial__rays { opacity: 0; transition: opacity 2.4s var(--ease) .2s; }
.js .dial__rim { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 2.2s var(--ease) .3s; }
.js .dial__ticks line, .js .dial__labels text { opacity: 0; transition: opacity .7s var(--ease) calc(.5s + var(--i, 0) * 70ms); }
.js .dial__sun { opacity: 0; transition: opacity .8s var(--ease) .5s; }
.js .dial__tag { opacity: 0; transition: opacity .6s var(--ease); }
.js .hero__bottom::after { transform: scaleX(0); transition: transform 1.8s var(--ease) .3s; }
.js .hero__title .rise > span { transform: translateY(105%); transition: transform 1.2s var(--ease) .8s; }
.js .hero__title .rise + .rise > span { transition-delay: .92s; }
.js .hero__row { opacity: 0; transform: translateY(14px); transition: opacity 1s var(--ease) 1.25s, transform 1.1s var(--ease) 1.25s; }

.is-loaded .hero__logo { opacity: 1; transform: translateX(-50%); }
.is-loaded .dial__orbits, .is-loaded .dial__rays,
.is-loaded .dial__ticks line, .is-loaded .dial__labels text, .is-loaded .dial__sun { opacity: 1; }
.is-loaded .dial__rim { stroke-dashoffset: 0; }
.is-loaded .hero__bottom::after { transform: none; }
.is-loaded .hero__title .rise > span { transform: none; }
.is-loaded .hero__row { opacity: 1; transform: none; }
.is-risen .dial__tag { opacity: 1; }

/* the photo settles into the dome */
.js .dial image { opacity: 0; transform: scale(1.08); transform-box: fill-box; transform-origin: 50% 100%; transition: opacity 1.6s var(--ease), transform 3s var(--ease); }
.is-ready .dial image { opacity: 1; transform: none; }

/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 960px) {
  .ways { grid-template-columns: 1fr; }
  .way { min-height: 0; }
  .way + .way { border-left: 0; border-top: 1px solid #3A3A3A; }
  .way__foot { padding-top: 40px; }
  .visit { grid-template-columns: 1fr; }
  .visit__info { border-left: 0; border-top: 1px solid #3A3A3A; }
  .name__body { grid-template-columns: 1fr; gap: 48px; }
}

@media (max-width: 720px) {
  :root { --gutter: 20px; }
  .hero { height: auto; min-height: 100svh; }
  .hero__sky { flex: none; height: 62vw; margin-top: 120px; }
  .dial__labels text { font-size: 44px; }
  .dial__labels .is-zenith { font-size: 38px; }
  .dial__labels .is-minor { display: none; }
  .dial__tag text { font-size: 38px; }
  .hero__bottom { flex: 1; display: flex; flex-direction: column; justify-content: center; }
  .hero__title { font-size: clamp(24px, 7.4vw, 40px); }
  .hero__row { grid-template-columns: 1fr; text-align: center; gap: 18px; }
  .hero__row .btn { order: -1; width: 100%; }
  .hero__right { text-align: center; }

  .name__head { flex-direction: column; align-items: flex-start; gap: 22px; }
  .name__word { font-size: 17vw; }
  .sec-head { flex-direction: column; align-items: flex-start; gap: 20px; }
  .sec-head__aside { text-align: left; }
  .way__foot { flex-wrap: wrap; }
  .way__foot .btn { flex: 1; padding: 0 20px; }
  .map { min-height: 420px; }
  .map__open { left: 16px; right: 16px; bottom: 44px; }
  .band__group { font-size: 15vw; }
  .band__track { animation-duration: 30s; }
  .foot__inner { flex-direction: column; align-items: flex-start; gap: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .001ms !important; transition-delay: 0s !important; animation: none !important; }
}