/* ==========================================================================
   OIBHOOMI — Coming Soon
   Palette: blue · red · white · black · gold
   Single-screen, non-scrolling layout (mobile-first)
   ========================================================================== */

:root{
  --blue-900:#061729;
  --blue-800:#0A2540;
  --blue-700:#123458;
  --blue-600:#1B4A77;
  --red:#E11D2A;
  --red-soft:#FF4652;
  --gold:#DCB118;
  --gold-soft:#F1D06A;
  --black:#050B12;
  --white:#FFFFFF;
  --mist:rgba(255,255,255,.72);
  --mist-dim:rgba(255,255,255,.52);
  --line:rgba(255,255,255,.12);
  --glass:rgba(255,255,255,.05);

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

  --pad-x:clamp(1.1rem,5vw,4rem);
}

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

html,body{height:100%}

body{
  font-family:var(--font-body);
  color:var(--white);
  background:
    radial-gradient(120% 90% at 50% 0%,var(--blue-700) 0%,var(--blue-800) 42%,var(--blue-900) 74%,var(--black) 100%);
  overflow:hidden;                 /* non-scrollable */
  overscroll-behavior:none;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

/* ---------- decorative background ---------- */
.bg-grid,.bg-glow,.bg-skyline{position:fixed;pointer-events:none;z-index:0}

/* thin brand bar pinned to the very top */
body::before{
  content:"";position:fixed;top:0;left:0;right:0;height:3px;z-index:3;
  background:linear-gradient(90deg,var(--red) 0%,var(--red) 26%,var(--gold) 52%,var(--blue-600) 78%,var(--red) 100%);
}

.bg-grid{
  inset:0;
  background-image:
    linear-gradient(var(--line) 1px,transparent 1px),
    linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:clamp(46px,7vw,86px) clamp(46px,7vw,86px);
  mask-image:radial-gradient(circle at 50% 38%,#000 0%,transparent 72%);
  -webkit-mask-image:radial-gradient(circle at 50% 38%,#000 0%,transparent 72%);
  opacity:.55;
}

.bg-glow{border-radius:50%;filter:blur(70px)}
.bg-glow--gold{
  width:min(58vw,520px);aspect-ratio:1;
  top:-16%;left:50%;transform:translateX(-50%);
  background:radial-gradient(circle,rgba(220,177,24,.30),transparent 68%);
}
.bg-glow--red{
  width:min(52vw,460px);aspect-ratio:1;
  bottom:-22%;right:-14%;
  background:radial-gradient(circle,rgba(225,29,42,.26),transparent 68%);
}

.bg-skyline{left:0;right:0;bottom:0;height:clamp(110px,22vh,230px);opacity:.20}
.bg-skyline svg{width:100%;height:100%;display:block;fill:var(--gold)}

/* ---------- stage ---------- */
.stage{
  position:relative;z-index:1;
  height:100dvh;
  min-height:100vh;               /* fallback for browsers without dvh */
  min-height:100dvh;
  display:flex;flex-direction:column;
  align-items:center;justify-content:center;
  gap:clamp(.45rem,1.9vmin,1.9rem);
  padding:calc(env(safe-area-inset-top) + clamp(.6rem,2.2vmin,2rem)) var(--pad-x)
          calc(env(safe-area-inset-bottom) + clamp(.6rem,2.2vmin,2rem));
  text-align:center;
}

/* ---------- brand ---------- */
.brand{display:flex;align-items:center;gap:clamp(.5rem,1.6vmin,.9rem)}

.brand__mark{
  display:block;flex:none;
  width:clamp(44px,8.6vmin,118px);aspect-ratio:1;
  border:1px solid rgba(220,177,24,.45);
  border-radius:16px;
  overflow:hidden;
  background:var(--blue-900);
  box-shadow:0 10px 30px rgba(0,0,0,.42),inset 0 1px 0 rgba(255,255,255,.12);
}
.brand__mark img{
  width:100%;height:100%;
  object-fit:cover;object-position:center;
  display:block;
}

.brand__text{text-align:left}
.brand__name{
  font-family:var(--font-display);
  font-size:clamp(1.18rem,4.6vmin,2.7rem);
  font-weight:700;line-height:1;
  letter-spacing:.055em;
}
.brand__tagline{
  margin-top:.28em;
  font-size:clamp(.5rem,1.6vmin,.88rem);
  letter-spacing:.3em;text-transform:uppercase;
  color:var(--gold-soft);font-weight:600;
}

/* ---------- hero ---------- */
.hero{display:flex;flex-direction:column;align-items:center;gap:clamp(.35rem,1.3vmin,.85rem);width:100%}

.eyebrow{
  display:inline-flex;align-items:center;gap:.5em;
  padding:.42em 1.05em;
  border:1px solid rgba(225,29,42,.42);border-radius:999px;
  background:rgba(225,29,42,.11);
  font-size:clamp(.5rem,1.55vmin,.82rem);
  letter-spacing:.19em;text-transform:uppercase;font-weight:700;
  color:#FFD9DC;
}
.eyebrow__dot{
  width:.46em;height:.46em;border-radius:50%;
  background:var(--red-soft);
  box-shadow:0 0 0 0 rgba(255,70,82,.65);
  animation:pulse 2s ease-out infinite;
}
@keyframes pulse{
  70%{box-shadow:0 0 0 .62em rgba(255,70,82,0)}
  100%{box-shadow:0 0 0 0 rgba(255,70,82,0)}
}

.hero__title{
  font-family:var(--font-display);
  max-width:100%;
  font-size:clamp(2.1rem,11.6vmin,7rem);
  font-weight:700;line-height:1.12;      /* room for descenders (g, y) */
  letter-spacing:-.015em;
  padding-bottom:.06em;
  overflow:visible;
  background:linear-gradient(180deg,var(--white) 8%,var(--gold-soft) 62%,var(--gold) 100%);
  -webkit-background-clip:text;background-clip:text;
  color:transparent;
  text-shadow:0 14px 40px rgba(0,0,0,.32);
}

.hero__sub{
  position:relative;
  padding-bottom:clamp(.4rem,1.2vmin,.8rem);
  font-size:clamp(.66rem,2.35vmin,1.2rem);
  letter-spacing:.15em;text-transform:uppercase;
  color:var(--mist);font-weight:500;
  max-width:46ch;
}
.hero__sub::after{
  content:"";position:absolute;left:50%;bottom:0;transform:translateX(-50%);
  width:clamp(80px,16vw,140px);height:2px;
  background:linear-gradient(90deg,transparent,var(--red) 22%,var(--gold) 78%,transparent);
}

.hero__para{
  font-size:clamp(.72rem,2.3vmin,1.16rem);
  line-height:1.58;color:var(--mist-dim);
  max-width:56ch;
  text-align:justify;
  text-align-last:center;      /* keeps the short last line centred */
  hyphens:auto;                /* avoids rivers of space on narrow screens */
  -webkit-hyphens:auto;
  text-wrap:pretty;
}

/* ---------- countdown ---------- */
.countdown{display:flex;align-items:flex-start;justify-content:center;gap:clamp(.18rem,1.1vmin,.7rem)}

.cd-unit{
  display:flex;flex-direction:column;align-items:center;gap:.4em;
  min-width:clamp(50px,15vmin,132px);
  padding:clamp(.4rem,1.5vmin,.95rem) clamp(.3rem,1.2vmin,.85rem);
  border:1px solid var(--line);border-radius:14px;
  background:linear-gradient(165deg,var(--glass),rgba(255,255,255,.015));
  backdrop-filter:blur(9px);-webkit-backdrop-filter:blur(9px);
  box-shadow:0 12px 32px rgba(0,0,0,.3),inset 0 1px 0 rgba(255,255,255,.09);
}
.cd-num{
  font-family:var(--font-display);
  font-size:clamp(1.35rem,6.3vmin,3.9rem);
  font-weight:700;line-height:1;
  font-variant-numeric:tabular-nums;
  color:var(--white);
  text-shadow:0 0 22px rgba(220,177,24,.32);
}
.cd-label{
  font-size:clamp(.44rem,1.35vmin,.76rem);
  letter-spacing:.2em;text-transform:uppercase;
  color:var(--gold-soft);font-weight:700;
}
.cd-sep{
  align-self:center;
  font-family:var(--font-display);
  font-size:clamp(1rem,4vmin,2.6rem);
  color:rgba(220,177,24,.45);
  transform:translateY(-.32em);
}

.countdown.is-live .cd-unit{border-color:rgba(220,177,24,.34)}

/* ---------- contact ---------- */
.contact{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:clamp(.32rem,1.5vmin,.6rem);
}
.contact__item{
  display:inline-flex;align-items:center;gap:.5em;
  padding:.48em .9em;
  border:1px solid var(--line);border-radius:999px;
  background:rgba(255,255,255,.045);
  color:var(--mist);text-decoration:none;
  font-size:clamp(.62rem,1.95vmin,.98rem);font-weight:500;
  transition:color .25s,border-color .25s,background .25s,transform .25s;
}
.contact__item svg{width:1.05em;height:1.05em;fill:var(--gold);flex:none;transition:fill .25s}
.contact__item:hover,.contact__item:focus-visible{
  color:var(--white);border-color:rgba(220,177,24,.5);
  background:rgba(220,177,24,.1);transform:translateY(-2px);
}
.contact__item--static{cursor:default}
.contact__item--static:hover{transform:none;color:var(--mist);border-color:var(--line);background:rgba(255,255,255,.045)}

/* ---------- footer ---------- */
.foot{display:flex;flex-direction:column;align-items:center;gap:clamp(.35rem,1.2vmin,.8rem)}

.social{display:flex;flex-wrap:wrap;justify-content:center;gap:clamp(.3rem,1.4vmin,.6rem)}
.social__link{
  display:grid;place-items:center;
  width:clamp(26px,4.8vmin,44px);aspect-ratio:1;
  border:1px solid var(--line);border-radius:50%;
  background:rgba(255,255,255,.045);
  transition:border-color .25s,background .25s,transform .25s;
}
.social__link svg{width:45%;height:45%;fill:var(--mist);transition:fill .25s}
.social__link:hover,.social__link:focus-visible{
  border-color:var(--red);background:rgba(225,29,42,.16);transform:translateY(-2px);
}
.social__link:hover svg,.social__link:focus-visible svg{fill:var(--white)}

.foot__copy{
  font-size:clamp(.52rem,1.5vmin,.82rem);
  letter-spacing:.11em;color:rgba(255,255,255,.34);
}

.foot__credit{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:.25em .6em;
  margin-top:.42em;
  font-size:clamp(.5rem,1.4vmin,.76rem);
  letter-spacing:.15em;text-transform:uppercase;
  color:rgba(255,255,255,.3);font-weight:600;
}
.foot__credit-part{white-space:nowrap}
.foot__credit-pipe{color:inherit;opacity:.6}
.foot__heart{
  font-size:1.05em;
  letter-spacing:0;
  vertical-align:-.04em;
}
.foot__credit a{
  color:inherit;text-decoration:none;
  transition:color .25s;
}
.foot__credit a:hover,.foot__credit a:focus-visible{
  color:rgba(255,255,255,.6);
}

/* ---------- focus ---------- */
a:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:6px}

/* ---------- entrance ---------- */
.brand,.hero,.countdown,.contact,.foot{animation:rise .8s cubic-bezier(.22,1,.36,1) both}
.brand{animation-delay:.05s}
.hero{animation-delay:.16s}
.countdown{animation-delay:.28s}
.contact{animation-delay:.4s}
.foot{animation-delay:.5s}
@keyframes rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}

/* ---------- tight screens: compress, then shed the optional bits ---------- */

/* short-and-narrow phones (e.g. 320x568, 360x640) */
@media (max-width:400px) and (max-height:700px){
  .hero__para{font-size:.7rem;line-height:1.45;max-width:38ch}
  .hero__title{font-size:2rem}
  .brand__mark{width:42px}
  .contact__item{padding:.42em .78em;font-size:.62rem}
  .social__link{width:26px}
}

/* anything genuinely short in portrait */
@media (max-height:620px) and (orientation:portrait){
  .hero__para{line-height:1.42}
  .cd-unit{padding:.38rem .3rem}
}

/* landscape phones — the paragraph is what doesn't fit */
@media (max-height:600px) and (orientation:landscape){
  .hero__para{display:none}
  .bg-skyline{opacity:.12}
}
@media (max-height:460px){
  .brand__tagline,.eyebrow,.foot__copy{display:none}
  .foot__credit{margin-top:0}
  .brand__mark{width:clamp(36px,7vmin,52px)}
}

/* narrow screens: stack the two credits instead of letting the separator dangle */
@media (max-width:440px){
  .foot__credit{flex-direction:column;gap:.3em}
  .foot__credit-pipe{display:none}
}

/* narrowest phones: drop the colons, stack contact chips tighter */
@media (max-width:360px){
  .cd-sep{display:none}
  .countdown{gap:.28rem}
  .cd-unit{min-width:0;flex:1 1 0}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
}