/* ==========================================================================
   CDI Mauritius — Coming Soon
   Centre de Documentation sur l'Islam
   ========================================================================== */

:root{
  /* brand palette, sampled from the CDI logo */
  --navy-900:#061a33;
  --navy-800:#0a2a50;
  --navy-700:#0e3a6b;
  --navy-600:#14508f;
  --gold:#c9a227;
  --gold-200:#e8cd7e;
  --gold-100:#f3e3b6;
  --paper:#f4efe5;

  --ink-0:#ffffff;
  --ink-1:rgba(255,255,255,.86);
  --ink-2:rgba(255,255,255,.66);
  --ink-3:rgba(255,255,255,.44);

  --cell:clamp(88px, 12.5vw, 190px);
  --gap:clamp(3px, .5vw, 7px);

  --sans:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --serif:"Cormorant Garamond",Georgia,"Times New Roman",serif;

  --ease:cubic-bezier(.22,.8,.26,1);
}

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

html,body{height:100%}

body{
  margin:0;
  font-family:var(--sans);
  color:var(--ink-1);
  background:var(--navy-900);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* ==========================================================================
   1. The patchwork
   ========================================================================== */

.mosaic{
  position:fixed;
  inset:-7%;
  width:114%;
  height:114%;
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(var(--cell),1fr));
  grid-auto-rows:var(--cell);
  gap:var(--gap);
  overflow:hidden;
  z-index:0;
  background:var(--navy-900);
  animation:drift 96s var(--ease) infinite alternate;
  will-change:transform;
}

@keyframes drift{
  from{transform:translate3d(-14px,-10px,0) scale(1.02)}
  to  {transform:translate3d(14px,10px,0)   scale(1.05)}
}

.tile{
  position:relative;
  overflow:hidden;
  border-radius:2px;
  background:var(--navy-800);
  opacity:0;
  transform:scale(.82);
  animation:tile-in .9s var(--ease) forwards;
  animation-delay:var(--in,0ms);
}

@keyframes tile-in{
  to{opacity:1;transform:scale(1)}
}

/* two stacked layers per cell; JS cross-fades between them */
.tile img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  opacity:0;
  transition:opacity 1.7s var(--ease);
  animation:kenburns var(--kb,26s) ease-in-out infinite alternate;
  animation-delay:var(--kbd,0s);
  will-change:transform,opacity;
}

.tile img.is-on{opacity:1}

@keyframes kenburns{
  from{transform:scale(1.02) translate3d(0,0,0)}
  to  {transform:scale(1.16) translate3d(var(--kx,-2%),var(--ky,2%),0)}
}

/* every few tiles reads a touch warmer / brighter, so the wall isn't flat */
.tile:nth-child(4n+1) img{filter:saturate(1.06) contrast(1.02)}
.tile:nth-child(6n+3) img{filter:sepia(.16) saturate(1.1) brightness(1.04)}
.tile:nth-child(7n+5) img{filter:brightness(.9) saturate(.92)}

/* ==========================================================================
   2. Overlays — scrim, geometry, vignette
   ========================================================================== */

.scrim,.pattern,.vignette{
  position:fixed;
  inset:0;
  z-index:1;
  pointer-events:none;
}

.scrim{
  background:
    radial-gradient(ellipse 70% 58% at 50% 48%,
      rgba(6,26,51,.82) 0%,
      rgba(6,26,51,.68) 38%,
      rgba(8,34,64,.34) 68%,
      rgba(6,26,51,.20) 100%),
    linear-gradient(180deg,
      rgba(6,26,51,.72) 0%,
      rgba(10,42,80,.10) 34%,
      rgba(10,42,80,.10) 62%,
      rgba(6,26,51,.78) 100%);
}

/* a very slow warm sweep, so the background never looks like a static image */
.scrim::after{
  content:"";
  position:absolute;
  inset:-40%;
  background:conic-gradient(from 0deg at 50% 50%,
    rgba(201,162,39,0) 0deg,
    rgba(201,162,39,.10) 70deg,
    rgba(20,80,143,.14) 160deg,
    rgba(201,162,39,0) 260deg,
    rgba(201,162,39,0) 360deg);
  animation:sweep 70s linear infinite;
  mix-blend-mode:screen;
  opacity:.75;
}

@keyframes sweep{to{transform:rotate(360deg)}}

/* eight-point star lattice, echoing the arabesque in the CDI mark */
.pattern{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='84' height='84' viewBox='0 0 84 84'%3E%3Cg fill='none' stroke='%23e8cd7e' stroke-width='1'%3E%3Crect x='21' y='21' width='42' height='42'/%3E%3Crect x='21' y='21' width='42' height='42' transform='rotate(45 42 42)'/%3E%3Ccircle cx='42' cy='42' r='29.7'/%3E%3Cpath d='M0 42h9M75 42h9M42 0v9M42 75v9'/%3E%3C/g%3E%3C/svg%3E");
  background-size:84px 84px;
  opacity:.07;
  animation:lattice 120s linear infinite;
}

@keyframes lattice{to{background-position:84px 84px}}

.vignette{
  background:radial-gradient(ellipse 92% 84% at 50% 50%,
    transparent 46%, rgba(3,14,28,.30) 80%, rgba(3,14,28,.62) 100%);
  box-shadow:inset 0 0 160px 20px rgba(3,14,28,.42);
}

/* ==========================================================================
   3. Stage
   ========================================================================== */

.stage{
  position:relative;
  z-index:2;
  min-height:100svh;
  display:grid;
  place-items:center;
  padding:clamp(24px,4vw,44px) clamp(18px,5vw,40px);
}

/* only ever shown on phones - see the mobile block */
.scrollcue{display:none}

.card{
  width:100%;
  max-width:760px;
  text-align:center;
  padding:clamp(24px,3.4vw,36px) clamp(20px,4vw,48px) clamp(20px,2.8vw,30px);
  border-radius:22px;
  background:
    radial-gradient(120% 130% at 50% 0%, rgba(14,44,82,.80), rgba(5,18,36,.86));
  border:2px solid rgba(232,205,126,.70);
  box-shadow:
    0 50px 130px -30px rgba(2,10,22,.92),
    0 0 90px -20px rgba(4,16,34,.9),
    inset 0 1px 0 rgba(255,255,255,.09);
  backdrop-filter:blur(16px) saturate(1.1);
  -webkit-backdrop-filter:blur(16px) saturate(1.1);
}

/* staggered entrance for everything inside the card */
.card > *{
  opacity:0;
  transform:translateY(16px);
  animation:rise .9s var(--ease) forwards;
}
.card > .brand   {animation-delay:.15s}
.card > .kicker  {animation-delay:.30s}
.card > .headline{animation-delay:.42s}
.card > .lead    {animation-delay:.54s}
.card > .lead--fr{animation-delay:.62s}
.card > .pillars {animation-delay:.74s}
.card > .countdown{animation-delay:.82s}
.card > .notify  {animation-delay:.90s}
.card > .foot    {animation-delay:1.0s}

@keyframes rise{to{opacity:1;transform:none}}

/* ==========================================================================
   4. Brand
   ========================================================================== */

.brand{margin:0 0 clamp(15px,2.4vw,21px)}

.brand__logo{
  display:block;
  width:clamp(200px,29vw,272px);
  height:auto;
  margin:0 auto;
  filter:drop-shadow(0 6px 22px rgba(0,0,0,.5));
}

.brand__rule{
  display:block;
  width:132px;
  height:1px;
  margin:clamp(12px,1.7vw,16px) auto clamp(8px,1.2vw,10px);
  background:linear-gradient(90deg,transparent,var(--gold-200),transparent);
  position:relative;
}
/* small lozenge on the rule */
.brand__rule::after{
  content:"";
  position:absolute;
  left:50%;top:50%;
  width:7px;height:7px;
  transform:translate(-50%,-50%) rotate(45deg);
  background:var(--gold-200);
  box-shadow:0 0 12px rgba(232,205,126,.6);
}

.brand__place{
  margin:0;
  font-size:.7rem;
  font-weight:500;
  letter-spacing:.42em;
  text-transform:uppercase;
  color:var(--ink-3);
  padding-left:.42em;
}

/* ==========================================================================
   5. Copy
   ========================================================================== */

.kicker{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:.85em;
  margin:0 0 clamp(11px,1.7vw,15px);
  font-size:clamp(.62rem,1.5vw,.73rem);
  font-weight:600;
  letter-spacing:.3em;
  text-transform:uppercase;
  color:var(--gold-200);
}
.kicker i{font-style:normal;opacity:.5}
.kicker span{position:relative}
/* soft pulsing dot before the first word */
.kicker span:first-child::before{
  content:"";
  display:inline-block;
  width:6px;height:6px;
  margin-right:.75em;
  border-radius:50%;
  background:var(--gold-200);
  vertical-align:middle;
  animation:pulse 2.6s ease-in-out infinite;
}
@keyframes pulse{
  0%,100%{opacity:1;box-shadow:0 0 0 0 rgba(232,205,126,.55)}
  50%    {opacity:.6;box-shadow:0 0 0 7px rgba(232,205,126,0)}
}

.headline{
  margin:0 0 clamp(14px,2.1vw,18px);
  font-family:var(--serif);
  font-weight:600;
  font-size:clamp(2.1rem,5.8vw,3.8rem);
  line-height:1.04;
  letter-spacing:-.012em;
  color:var(--ink-0);
  text-shadow:0 2px 30px rgba(0,0,0,.45);
}

.headline em{
  display:block;
  font-style:italic;
  font-weight:500;
  background:linear-gradient(100deg,var(--gold-100),var(--gold-200) 40%,var(--gold) 75%,var(--gold-100));
  background-size:220% 100%;
  -webkit-background-clip:text;
  background-clip:text;
  /* color:transparent; */
  animation:shimmer 9s ease-in-out infinite;
}

@keyframes shimmer{
  0%,100%{background-position:0% 50%}
  50%    {background-position:100% 50%}
}

.lead{
  margin:0 auto clamp(10px,1.6vw,14px);
  max-width:52ch;
  font-size:clamp(.97rem,1.8vw,1.11rem);
  font-weight:300;
  line-height:1.65;
  color:var(--ink-1);
}

.lead--fr{
  font-family:var(--serif);
  font-style:italic;
  font-size:clamp(1.02rem,2vw,1.2rem);
  line-height:1.5;
  color:rgba(232,205,126,.72);
  margin-bottom:clamp(19px,2.7vw,26px);
}

/* ==========================================================================
   6. Pillars
   ========================================================================== */

.pillars{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:clamp(8px,1.4vw,13px);
  margin:0 0 clamp(19px,2.6vw,25px);
  padding:0;
  list-style:none;
}

.pillar{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:.6em;
  padding:clamp(10px,1.5vw,14px) 6px;
  border-radius:13px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.035);
  transition:border-color .45s var(--ease),background .45s var(--ease),transform .45s var(--ease);
}
.pillar:hover{
  border-color:rgba(232,205,126,.34);
  background:rgba(232,205,126,.07);
  transform:translateY(-3px);
}

.pillar svg{
  width:21px;height:21px;
  fill:var(--gold-200);
  opacity:.9;
}

.pillar span{
  display:flex;
  flex-direction:column;
  gap:.25em;
  font-size:clamp(.66rem,1.35vw,.76rem);
  font-weight:500;
  letter-spacing:.06em;
  color:var(--ink-1);
  line-height:1.2;
}
.pillar i{
  font-style:normal;
  font-size:.86em;
  letter-spacing:.03em;
  color:var(--ink-3);
}

/* ==========================================================================
   7. Countdown
   ========================================================================== */

.countdown[hidden]{display:none}

.countdown{
  display:flex;
  justify-content:center;
  gap:clamp(10px,2.4vw,22px);
  margin:0 0 clamp(19px,2.6vw,25px);
}

.unit{
  min-width:clamp(60px,10vw,84px);
  padding:clamp(10px,1.6vw,14px) clamp(6px,1.4vw,12px);
  border-radius:12px;
  border:1px solid rgba(232,205,126,.16);
  background:linear-gradient(180deg,rgba(232,205,126,.08),rgba(232,205,126,.02));
}

.unit b{
  display:block;
  font-family:var(--serif);
  font-weight:600;
  font-size:clamp(1.7rem,4.4vw,2.5rem);
  line-height:1;
  color:var(--gold-100);
  font-variant-numeric:tabular-nums;
}

.unit span{
  display:block;
  margin-top:.5em;
  font-size:.58rem;
  font-weight:500;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--ink-3);
}

/* ==========================================================================
   8. Notify form
   ========================================================================== */

.notify{margin:0 0 clamp(18px,2.4vw,23px)}

.notify__row{
  display:flex;
  gap:8px;
  max-width:470px;
  margin:0 auto;
  padding:6px;
  border-radius:100px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.06);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  transition:border-color .35s var(--ease),box-shadow .35s var(--ease);
}
.notify__row:focus-within{
  border-color:rgba(232,205,126,.5);
  box-shadow:0 0 0 4px rgba(232,205,126,.12);
}

.notify input[type=email]{
  flex:1;
  min-width:0;
  padding:0 4px 0 18px;
  height:46px;
  border:0;
  background:transparent;
  color:var(--ink-0);
  font-family:inherit;
  font-size:.95rem;
}
.notify input[type=email]::placeholder{color:var(--ink-3)}
.notify input[type=email]:focus{outline:none}

.hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;opacity:0}

.notify button{
  display:inline-flex;
  align-items:center;
  gap:.55em;
  height:46px;
  padding:0 22px;
  border:0;
  border-radius:100px;
  background:linear-gradient(135deg,var(--gold-200),var(--gold));
  color:#20180a;
  font-family:inherit;
  font-size:.87rem;
  font-weight:600;
  letter-spacing:.02em;
  white-space:nowrap;
  cursor:pointer;
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),filter .3s var(--ease);
  box-shadow:0 6px 20px -6px rgba(201,162,39,.6);
}
.notify button:hover{transform:translateY(-1px);filter:brightness(1.06);box-shadow:0 10px 26px -6px rgba(201,162,39,.7)}
.notify button:active{transform:translateY(0)}
.notify button:disabled{opacity:.6;cursor:default;transform:none}

.notify button svg{
  width:16px;height:16px;
  fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round;
  transition:transform .3s var(--ease);
}
.notify button:hover svg{transform:translateX(3px)}

.notify__note{
  margin:.95em 0 0;
  font-size:.75rem;
  font-weight:300;
  color:var(--ink-3);
  transition:color .3s var(--ease);
}
.notify__note.is-ok{color:var(--gold-200)}
.notify__note.is-err{color:#ff9c8a}

.notify.is-done .notify__row{opacity:.35;pointer-events:none}

/* ==========================================================================
   9. Footer
   ========================================================================== */

.foot{
  display:flex;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
  gap:.7em;
  padding-top:clamp(13px,1.9vw,18px);
  border-top:1px solid rgba(255,255,255,.08);
  font-size:.78rem;
  color:var(--ink-3);
}

.foot__mail,.foot__link{
  color:var(--ink-2);
  text-decoration:none;
  border:0;
  background:none;
  padding:0;
  font:inherit;
  cursor:pointer;
  border-bottom:1px solid transparent;
  transition:color .3s var(--ease),border-color .3s var(--ease);
}
.foot__mail:hover,.foot__link:hover{
  color:var(--gold-200);
  border-bottom-color:rgba(232,205,126,.45);
}
.foot__sep{opacity:.4}

/* ==========================================================================
   10. Credits
   ========================================================================== */

.credits[hidden]{display:none}

.credits{
  position:fixed;
  inset:0;
  z-index:10;
  display:grid;
  place-items:center;
  padding:clamp(16px,4vw,40px);
  background:rgba(3,12,26,.72);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  animation:fade .3s var(--ease);
}
@keyframes fade{from{opacity:0}to{opacity:1}}

.credits__panel{
  width:100%;
  max-width:620px;
  max-height:80vh;
  overflow-y:auto;
  padding:clamp(20px,3vw,30px);
  border-radius:18px;
  border:1px solid rgba(232,205,126,.2);
  background:linear-gradient(180deg,#0c2a4f,#081d38);
  box-shadow:0 40px 100px -20px rgba(0,0,0,.8);
}

.credits__head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  margin-bottom:.5em;
}

.credits__head h2{
  margin:0;
  font-family:var(--serif);
  font-size:1.6rem;
  font-weight:600;
  color:var(--gold-100);
}

.credits__close{
  width:34px;height:34px;
  border:1px solid rgba(255,255,255,.16);
  border-radius:50%;
  background:transparent;
  color:var(--ink-2);
  font-size:1.3rem;
  line-height:1;
  cursor:pointer;
  transition:background .3s var(--ease),color .3s var(--ease);
}
.credits__close:hover{background:rgba(255,255,255,.1);color:#fff}

.credits__intro{
  margin:0 0 1.3em;
  font-size:.82rem;
  font-weight:300;
  line-height:1.6;
  color:var(--ink-3);
}
.credits__intro code{
  font-size:.92em;
  padding:.15em .45em;
  border-radius:4px;
  background:rgba(255,255,255,.08);
  color:var(--gold-200);
}

.credits__list{
  margin:0;padding:0;
  list-style:none;
  display:grid;
  gap:.7em;
}
.credits__list li{
  font-size:.78rem;
  line-height:1.5;
  padding-bottom:.7em;
  border-bottom:1px solid rgba(255,255,255,.06);
  color:var(--ink-2);
}
.credits__list li:last-child{border-bottom:0}
.credits__list b{color:var(--ink-1);font-weight:500}
.credits__list a{color:var(--gold-200);text-decoration:none}
.credits__list a:hover{text-decoration:underline}
.credits__list em{font-style:normal;color:var(--ink-3)}

/* ==========================================================================
   11. Responsive
   ========================================================================== */

@keyframes cue{
  0%,100%{transform:translate(-50%,0);opacity:.8}
  50%    {transform:translate(-50%,7px);opacity:1}
}

@media (max-width:620px){
  .pillars{grid-template-columns:repeat(2,1fr)}
  .countdown{gap:8px}
  .notify__row{flex-wrap:wrap;border-radius:20px;padding:8px}
  .notify input[type=email]{flex:1 0 100%;padding-left:14px}
  .notify button{flex:1 0 100%;justify-content:center}

  /* A phone screen is not tall enough to show the card AND the patchwork at
     once - the card alone runs past the fold. So instead of thinning the
     panel until the type suffers, hand the patchwork a band of its own at
     the top and let the card begin below it. The mosaic is fixed, so it
     holds still and parallaxes as the card scrolls up over it. */
  .stage{
    --band:36svh;
    align-items:start;
    padding:var(--band) 16px 28px;
  }

  /* the card no longer has to be see-through to show the patchwork, so it
     goes back to being a panel that is comfortable to read */
  .card{
    padding:26px 18px 22px;
    background:radial-gradient(120% 130% at 50% 0%, rgba(14,44,82,.66), rgba(5,18,36,.78));
    backdrop-filter:blur(16px) saturate(1.15);
    -webkit-backdrop-filter:blur(16px) saturate(1.15);
  }

  /* sits in the band, just above the card */
  .scrollcue{
    display:grid;
    place-items:center;
    position:absolute;
    left:50%;
    transform:translateX(-50%);      /* centring must not depend on the
                                        keyframes - reduced motion kills them */
    top:calc(var(--band) - 58px);
    width:44px;                      /* comfortable tap target */
    height:44px;
    border-radius:50%;
    border:1px solid rgba(232,205,126,.45);
    background:rgba(6,26,51,.42);
    backdrop-filter:blur(6px);
    -webkit-backdrop-filter:blur(6px);
    color:var(--gold-200);
    animation:cue 2.4s var(--ease) infinite;
  }
  .scrollcue svg{
    width:20px;height:20px;
    fill:none;stroke:currentColor;stroke-width:2;
    stroke-linecap:round;stroke-linejoin:round;
  }

  /* the scrim is aimed at a centred card; with the card low, keep the top
     light or the band it is meant to reveal just looks like dark navy */
  .scrim{
    background:
      radial-gradient(ellipse 96% 44% at 50% 82%,
        rgba(6,26,51,.78) 0%,
        rgba(6,26,51,.56) 48%,
        rgba(8,34,64,.20) 100%),
      linear-gradient(180deg,
        rgba(6,26,51,.34) 0%,
        rgba(6,26,51,.05) 20%,
        rgba(10,42,80,.08) 48%,
        rgba(6,26,51,.74) 100%);
  }
  /* a 160px inset shadow swallows a 390px-wide screen */
  .vignette{box-shadow:inset 0 0 90px 6px rgba(3,14,28,.34)}

  /* with more photography showing through, the type has to carry its own
     contrast instead of leaning on the panel behind it */
  .headline{
    text-shadow:
      0 1px 2px rgba(3,14,28,.9),
      0 2px 12px rgba(3,14,28,.75),
      0 4px 36px rgba(3,14,28,.5);
  }
  /* gradient-filled text ignores text-shadow, so shadow the rendered glyphs */
  .headline em{
    filter:drop-shadow(0 1px 2px rgba(3,14,28,.85))
           drop-shadow(0 3px 10px rgba(3,14,28,.6));
  }
  .lead{font-size:.94rem;line-height:1.6;color:var(--ink-0)}
  .lead--fr{font-size:1.02rem}
}

/* short phones - shrink the band so the card still reaches the fold */
@media (max-width:620px) and (max-height:700px){
  .stage{--band:24svh}
}

@media (max-width:380px){
  .kicker{font-size:.58rem;letter-spacing:.2em;gap:.5em}
  .unit{min-width:0;flex:1}
}

/* short, wide viewports (landscape phones) */
@media (max-height:640px) and (min-width:700px){
  .pillars,.brand__place{display:none}
  .lead--fr{display:none}
}

/* ==========================================================================
   12. Reduced motion
   ========================================================================== */

@media (prefers-reduced-motion:reduce){
  .mosaic,.scrim::after,.pattern,.headline em,.scrollcue,.kicker span:first-child::before{
    animation:none!important;
  }
  .tile{opacity:1;transform:none;animation:none!important}
  .tile img{animation:none!important;transition-duration:.4s}
  .card > *{opacity:1;transform:none;animation:none!important}
  .pillar:hover,.notify button:hover{transform:none}
}