/* Iduza — coming soon. The logo's own two colours: gold on cream. */

:root{
  --cream:#fdfbf3;          /* the ground the logo was drawn on */
  --cream-2:#f8f2e4;        /* a half-tone deeper, for the foot */
  --gold:#c7942b;           /* the ink of the mark — art only, 2.6:1 on cream */
  --gold-text:#a2741a;      /* gold that carries LARGE text (4.0:1) */
  --gold-deep:#96690f;      /* gold dark enough to carry small text (4.7:1) */
  --gold-lit:#e7c476;
  --ink:#3a3026;            /* warm brown, never black */
  --ink-soft:#6b5d4c;
  --rule:rgba(199,148,43,.32);

  --display:"Italiana",Georgia,"Times New Roman",serif;
  --logo:"Cinzel",Georgia,serif;
  --ui:"Jost",ui-sans-serif,system-ui,sans-serif;

  --pad:clamp(22px,6vw,64px);
  --band:clamp(64px,11vh,120px);
  --measure:58ch;
}

/* scripts Italiana and Jost do not cover fall back to faces that do */
html[lang="ar"]{
  --display:"Tajawal",ui-sans-serif,system-ui,sans-serif;
  --ui:"Tajawal",ui-sans-serif,system-ui,sans-serif;
  --measure:46ch;
}
html[lang="ru"]{--display:Georgia,"Times New Roman",serif}
html[lang="zh"]{
  --display:Georgia,"Songti SC","SimSun",serif;
  --ui:"Jost","PingFang SC","Microsoft YaHei",ui-sans-serif,sans-serif;
  --measure:34em;
}

*{box-sizing:border-box}

html{-webkit-text-size-adjust:100%}

body{
  margin:0;
  min-height:100svh;
  display:flex;flex-direction:column;
  background:var(--cream);
  color:var(--ink);
  font-family:var(--ui);
  font-weight:400;
  font-size:clamp(15.5px,1.08rem,17.5px);
  line-height:1.75;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

::selection{background:var(--gold);color:var(--cream)}

a{color:inherit;text-decoration:none}

:focus-visible{outline:1px solid var(--gold-deep);outline-offset:4px}

/* the hairline that turns the page into a box ------------------------ */
.frame{
  position:fixed;
  inset:clamp(8px,2.2vw,18px);
  border:1px solid var(--rule);
  pointer-events:none;
  z-index:5;
  animation:frame 1.6s cubic-bezier(.19,1,.22,1) both;
}

@keyframes frame{
  from{opacity:0;transform:scale(1.012)}
  to{opacity:1;transform:none}
}

/* hidden without pushing the page sideways — left:-9999px breaks RTL layout */
.skip,.pot{
  position:absolute;width:1px;height:1px;
  margin:-1px;padding:0;border:0;overflow:hidden;
  clip-path:inset(50%);white-space:nowrap;
}
.skip:focus{
  position:fixed;
  inset-inline-start:clamp(8px,2.2vw,18px);
  top:clamp(8px,2.2vw,18px);
  width:auto;height:auto;margin:0;
  clip-path:none;
  background:var(--gold);color:#241c12;
  padding:10px 16px;z-index:9;
}

/* language — the globe stays in the top right in every direction ------- */
.bar{
  position:absolute;top:0;right:0;
  padding:clamp(12px,3vw,26px) clamp(14px,4vw,40px);
  z-index:6;
}

.globe{
  display:block;
  width:44px;height:44px;
  margin-inline-start:auto;
  appearance:none;background:none;border:0;padding:10px;
  color:var(--gold-deep);
  cursor:pointer;
  transition:color .25s,transform .4s cubic-bezier(.22,.7,.3,1);
}
.globe svg{
  width:100%;height:100%;display:block;
  fill:none;stroke:currentColor;stroke-width:1.1;
  stroke-linecap:round;
}
.globe:hover{color:var(--gold);transform:rotate(-12deg)}

.menu{
  position:absolute;top:calc(100% - 8px);right:clamp(14px,4vw,40px);
  min-width:160px;
  background:var(--cream);
  border:1px solid var(--rule);
  box-shadow:0 14px 34px rgba(58,48,38,.10);
  padding:6px 0;
  max-height:min(62vh,420px);
  overflow-y:auto;
  transform-origin:top right;
  animation:menu .24s cubic-bezier(.19,1,.22,1) both;
}
html[dir="rtl"] .menu{transform-origin:top left}

@keyframes menu{
  from{opacity:0;transform:translateY(-6px) scale(.985)}
  to{opacity:1;transform:none}
}
.menu button{
  display:block;width:100%;
  appearance:none;background:none;border:0;
  font-family:var(--ui);font-size:.95rem;font-weight:400;
  color:var(--ink);
  text-align:start;
  padding:9px 18px;
  cursor:pointer;
  transition:background .2s,color .2s;
}
.menu button[lang="ar"]{font-family:"Tajawal",sans-serif}
.menu button:hover{background:var(--cream-2);color:var(--gold-deep)}
.menu button[aria-current="true"]{color:var(--gold-deep);font-weight:400}
.menu button[aria-current="true"]::after{content:"·";margin-inline-start:.5em}

/* hero ---------------------------------------------------------------- */
main{flex:1;display:flex;flex-direction:column}

.hero{
  position:relative;
  overflow:hidden;   /* the light behind the mark is wider than the page */
  flex:1;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;
  padding:clamp(56px,10vh,104px) var(--pad) clamp(34px,6vh,64px);
}

/* the only thing behind the mark is light — no line art, no lashes */
.glow{
  position:absolute;z-index:-1;
  left:50%;top:30%;
  width:min(132vw,860px);aspect-ratio:1/1;
  transform:translate(-50%,-50%);
  background:radial-gradient(closest-side,rgba(199,148,43,.13),rgba(199,148,43,.05) 46%,rgba(253,251,243,0) 74%);
  pointer-events:none;
  animation:breathe 12s 1.2s ease-in-out infinite;
}

@keyframes breathe{
  0%,100%{transform:translate(-50%,-50%) scale(1);opacity:.85}
  50%    {transform:translate(-50%,-50%) scale(1.09);opacity:1}
}

.mark{
  position:relative;
  width:min(45vw,216px);
  aspect-ratio:1/1;
  margin-bottom:clamp(12px,2.2vh,22px);
}
.mark img{width:100%;height:100%;display:block}

@supports ((mask-image:url(assets/mark.png)) or (-webkit-mask-image:url(assets/mark.png))){
  .mark img{visibility:hidden}
  .mark::before{
    content:"";position:absolute;inset:0;
    -webkit-mask:url(assets/mark.png) center/contain no-repeat;
    mask:url(assets/mark.png) center/contain no-repeat;
    background:linear-gradient(112deg,#a97a18 0%,#c7942b 24%,#e6c375 42%,#c7942b 60%,#9a6c14 100%);
    background-size:300% 100%;
    background-position:68% 0;
    animation:leaf 1.9s cubic-bezier(.22,.7,.3,1) both,
              sheen 11s 3.2s ease-in-out infinite;
  }
}

@keyframes leaf{
  from{background-position:2% 0;opacity:0;transform:scale(.985)}
  35%{opacity:1}
  to{background-position:68% 0;opacity:1;transform:none}
}

/* the light keeps moving across the gold, slowly, forever */
@keyframes sheen{
  0%,100%{background-position:68% 0}
  50%    {background-position:26% 0}
}

.wordmark{
  font-family:var(--logo);
  font-weight:400;
  font-size:clamp(1.8rem,7.6vw,3.15rem);
  line-height:1;
  text-transform:uppercase;
  letter-spacing:.40em;
  text-indent:.40em;
  color:var(--gold-text);
  margin:0 0 clamp(13px,2.2vh,18px);
  animation:settle 1.4s .25s cubic-bezier(.19,1,.22,1) both;
}

/* metal, but every stop measured on cream: 3.1:1 at the lightest (goldscale.py) */
@supports (background-clip:text) or (-webkit-background-clip:text){
  .wordmark span{
    background:linear-gradient(104deg,#8a6210 0%,#a2741a 26%,#b8871f 44%,#a2741a 62%,#8a6210 100%);
    background-size:280% 100%;
    background-position:64% 0;
    -webkit-background-clip:text;background-clip:text;
    color:transparent;
    animation:sheen 11s 3.2s ease-in-out infinite;
  }
}

@keyframes settle{
  from{letter-spacing:.62em;text-indent:.62em;opacity:0}
  to{letter-spacing:.40em;text-indent:.40em;opacity:1}
}

.lede{
  font-family:var(--display);
  font-size:clamp(1.5rem,5.8vw,2.15rem);
  line-height:1.35;
  color:var(--ink);
  max-width:19ch;
  margin:0 auto clamp(18px,3.2vh,26px);
  animation:rise 1s .6s cubic-bezier(.19,1,.22,1) both;
}

html[dir="rtl"] .lede{max-width:22ch;font-weight:300}

.status{
  display:flex;align-items:center;gap:.6em;
  font-size:.85rem;letter-spacing:.14em;color:var(--gold-deep);
  margin:0 0 clamp(26px,4.6vh,38px);
  animation:rise 1s .78s cubic-bezier(.19,1,.22,1) both;
}
html[dir="rtl"] .status{letter-spacing:0}

.dot{
  width:5px;height:5px;border-radius:50%;
  background:var(--gold-deep);
  animation:pulse 3.6s 2s ease-out infinite;
}

@keyframes pulse{
  0%,72%,100%{box-shadow:0 0 0 0 rgba(150,105,15,.34)}
  36%{box-shadow:0 0 0 8px rgba(150,105,15,0)}
}

@keyframes rise{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:none}}

/* signup -------------------------------------------------------------- */
.notify{
  width:min(100%,430px);
  animation:rise 1s .92s cubic-bezier(.19,1,.22,1) both;
}

.label{
  display:block;
  font-size:.95rem;
  color:var(--ink-soft);
  margin-bottom:12px;
  max-height:4em;
  transition:opacity .3s,max-height .5s cubic-bezier(.19,1,.22,1),margin .5s;
}

.field{
  display:flex;flex-direction:column;align-items:center;gap:18px;
  max-height:220px;overflow:hidden;
  transition:opacity .3s,max-height .5s cubic-bezier(.19,1,.22,1);
}

/* the underline grows from the middle instead of just changing colour */
.inp{position:relative;display:block;width:100%}
.inp::after{
  content:"";position:absolute;left:50%;bottom:0;
  width:0;height:1px;background:var(--gold);
  transform:translateX(-50%);
  transition:width .45s cubic-bezier(.19,1,.22,1);
}
.inp:focus-within::after{width:100%}

.field input[type="email"]{
  width:100%;
  appearance:none;
  background:transparent;
  border:0;border-bottom:1px solid var(--rule);
  border-radius:0;
  color:var(--ink);
  font-family:var(--ui);font-size:1.02rem;font-weight:400;
  padding:11px 2px;
  text-align:center;
  transition:border-color .3s;
}
.field input[type="email"]::placeholder{color:#7d6c56;transition:opacity .3s}
.field input[type="email"]:focus::placeholder{opacity:.45}
.field input[type="email"]:focus{outline:none}
.field input[type="email"]:focus-visible{outline:none}

.field button{
  position:relative;overflow:hidden;
  appearance:none;cursor:pointer;
  background:var(--gold);
  border:0;
  border-radius:0;
  color:#241c12;
  font-family:var(--ui);font-size:.86rem;font-weight:400;
  letter-spacing:.16em;text-transform:uppercase;
  padding:14px 38px;min-width:212px;
  transition:color .35s,transform .18s cubic-bezier(.22,.7,.3,1);
}
.field button span{position:relative;z-index:1}
/* the deeper gold wipes across on hover — no colour jump */
.field button::before{
  content:"";position:absolute;inset:0;
  background:var(--gold-deep);
  transform:scaleX(0);transform-origin:left;
  transition:transform .42s cubic-bezier(.19,1,.22,1);
}
html[dir="rtl"] .field button::before{transform-origin:right}
.field button:hover{color:var(--cream)}
.field button:hover::before{transform:scaleX(1)}
.field button:active{transform:translateY(1px)}
html[dir="rtl"] .field button{letter-spacing:0;font-weight:500;text-transform:none}
.field button[disabled]{opacity:.55;cursor:default}

.note{
  min-height:1.4em;
  margin:12px 0 0;
  font-size:.9rem;
  color:var(--gold-deep);
  animation:rise .5s ease-out both;
}
.note:empty{animation:none}
.note.bad{color:#a2412c}

/* the tick draws itself once, only after the address is stored */
.tick{
  display:block;width:34px;height:34px;
  margin:0 auto 10px;
  fill:none;stroke:var(--gold);stroke-width:1.4;
  stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:34;stroke-dashoffset:34;
  opacity:0;
}
.notify.done .tick{
  opacity:1;
  animation:draw .7s .1s cubic-bezier(.62,.05,.3,1) forwards;
}
/* the form folds away and the answer takes its place */
.notify.done .field,
.notify.done .label{
  opacity:0;max-height:0;margin-bottom:0;pointer-events:none;
}
@keyframes draw{to{stroke-dashoffset:0}}

.cue{
  position:absolute;
  bottom:clamp(22px,4.5vh,40px);
  left:50%;transform:translateX(-50%);
  font-size:.78rem;letter-spacing:.16em;
  color:var(--ink-soft);
  padding-bottom:20px;
  transition:color .3s;
}
html[dir="rtl"] .cue{letter-spacing:0}
.cue::after{
  content:"";position:absolute;bottom:0;left:50%;
  width:1px;height:14px;background:var(--rule);
}
.cue:hover{color:var(--gold-deep)}

/* bands --------------------------------------------------------------- */
.band{
  padding:var(--band) var(--pad);
  max-width:calc(var(--measure) + 2 * 64px);
  margin:0 auto;
}
.band + .band{padding-top:0}

.h{
  font-family:var(--display);
  font-weight:400;
  font-size:clamp(1.55rem,5.6vw,2.1rem);
  line-height:1.25;
  color:var(--gold-deep);
  margin:0 0 clamp(18px,3vh,26px);
}
html[dir="rtl"] .h{font-weight:500}

.p{
  max-width:var(--measure);
  margin:0 0 1.15em;
  color:var(--ink);
}
.p:last-child{margin-bottom:0}

.quiet{
  color:var(--ink-soft);
  font-size:.92rem;
  margin-top:clamp(26px,4vh,38px);
}

.list{list-style:none;margin:0;padding:0;border-top:1px solid var(--rule)}
.list li{
  padding:22px 0;border-bottom:1px solid var(--rule);
  display:grid;grid-template-columns:66px 1fr;gap:0 18px;
}
.list .ico{width:66px;height:36px;grid-row:span 2;align-self:center}
.list h3{
  font-family:var(--display);
  font-weight:400;
  font-size:1.22rem;
  line-height:1.2;
  color:var(--ink);
  margin:0 0 6px;
}
html[dir="rtl"] .list h3{font-weight:500;font-size:1.12rem}
.list p{
  margin:0;
  max-width:var(--measure);
  color:var(--ink-soft);
  font-size:.96rem;
}

/* foot ---------------------------------------------------------------- */
.foot{
  border-top:1px solid var(--rule);
  background:var(--cream-2);
  padding:clamp(22px,4.6vh,34px) var(--pad) clamp(26px,5.4vh,40px);
  display:flex;flex-wrap:wrap;justify-content:center;gap:10px 28px;
  font-size:.9rem;
  color:var(--ink-soft);
  text-align:center;
}
.foot a{transition:color .3s}
.foot a:hover{color:var(--gold-deep)}
.copy{color:var(--ink-soft)}

/* wider screens -------------------------------------------------------- */
@media (min-width:640px){
  .field{flex-direction:row;align-items:stretch;gap:14px}
  .inp{flex:1}
  .field input[type="email"]{text-align:start;height:100%}
  .label{text-align:start}
  .field button{flex:none;min-width:188px}
  .band{max-width:760px}
}

@media (min-width:1024px){
  .mark{width:268px}
  .band{padding-inline:0;max-width:680px}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none !important;transition:none !important}
  .mark::before{background-position:68% 0;opacity:1}
  .notify.done .tick{stroke-dashoffset:0;opacity:1}   /* still says yes, just without drawing */
}