/* ============================================================
   dpanosian.com — LAPIS
   Deep lapis lazuli ground with pyrite specks; the name foil-
   stamped in pale gold. See assets/fonts/README.txt for moving
   the webfonts in-house.
   ============================================================ */
/* ============================================================
   48 — LAPIS  ·  lapis & pyrite
   Lapis lazuli is not a flat blue: it carries flecks of pyrite, which
   is why it has been ground into pigment for altarpieces for six
   centuries. The ground here is specked rather than ruled, and the
   blue keeps a little violet in it so it never reads as corporate.

   The foil is a seven-stop ramp: deep trough, two mid tones, a
   narrow peak, and back down. Metal reads as metal only when the
   highlight is narrow and the shoulders are wide.
   ============================================================ */
:root{
  --bg:#040a18; --bg-2:#0b1530; --bg-3:#01030b;
  --fg:#dedbd0; --mute:#4c5776;
  --line:rgb(214 197 157 / .15);
  --accent:#d6c59d; --on-accent:#040a18;
  --sheen:#dce6ff;
  --surface:#f2f0e6; --on-surface:#0a1128;
  --g-d:#66542c; --g-m:#9c8550; --g-l:#dbc79c; --g-peak:#f8eed3;
  --mesh-op:.42; --silk-op:.5;
}
:root[data-scheme="light"]{
  --bg:#e7eaf4; --bg-2:#f3f5fa; --bg-3:#d6dcec;
  --fg:#111a3a; --mute:#848cab;
  --line:rgb(17 26 58 / .14);
  --accent:#7e6a33; --on-accent:#f8f6ef;
  --sheen:#111a3a;
  --surface:#0a1128; --on-surface:#f2f0e6;
  --g-d:#5f4d24; --g-m:#8c7539; --g-l:#c1aa72; --g-peak:#efe0bb;
  --mesh-op:.55; --silk-op:.8;
}
body{font-family:"Inter",system-ui,sans-serif}

/* lacquer depth: a lit core and a darker rim, never a flat fill */
body::before{
  content:""; position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(92vmax 66vmax at 50% 36%, var(--bg-2) 0%, transparent 44%),
    radial-gradient(155vmax 125vmax at 50% 118%, var(--bg-3) 0%, transparent 60%);
}

.silk{position:fixed; inset:-20%; z-index:0; pointer-events:none; opacity:var(--silk-op)}
.silk span{position:absolute; inset:0}
.silk span:nth-child(1){
  background:linear-gradient(126deg,
    transparent 20%, rgb(from var(--accent) r g b / .07) 38%,
    rgb(from var(--accent) r g b / .13) 50%,
    rgb(from var(--accent) r g b / .07) 62%, transparent 80%);
  animation:drape 38s ease-in-out infinite;
}
.silk span:nth-child(2){
  background:linear-gradient(54deg,
    transparent 24%, rgb(from var(--sheen) r g b / .05) 46%,
    rgb(from var(--sheen) r g b / .09) 54%, transparent 78%);
  animation:drape 52s ease-in-out infinite reverse;
}
@keyframes drape{0%,100%{transform:translate(-6%,-3%) scale(1.05)}50%{transform:translate(6%,4%) scale(1.12)}}

.mesh{
  position:fixed; inset:0; z-index:0; pointer-events:none; opacity:var(--mesh-op);
  /* pyrite: two dot fields at different scales and offsets, so the
     specks never fall into a visible grid */
  background-image:
    radial-gradient(rgb(from var(--accent) r g b / .16) .7px, transparent .8px),
    radial-gradient(rgb(from var(--accent) r g b / .1) .5px, transparent .6px);
  background-size:73px 61px, 37px 43px;
  background-position:0 0, 19px 11px;
}
.edge{
  position:fixed; inset:clamp(.8rem,2.6vw,2rem); z-index:1; pointer-events:none;
  border:1px solid var(--line);
  box-shadow:inset 0 0 0 4px rgb(from var(--bg) r g b / .55), inset 0 0 0 5px var(--line);
}

.name{
  margin:0; text-align:center; position:relative;
  font-family:"Cormorant Garamond",Georgia,serif;
  font-size:clamp(2.1rem,9.4vw,7rem); font-weight:400;
  letter-spacing:.015em; line-height:1.08;
  background:linear-gradient(102deg,
    var(--g-d) 8%, var(--g-m) 26%, var(--g-l) 40%,
    var(--g-peak) 48%, var(--g-l) 56%, var(--g-m) 72%, var(--g-d) 90%);
  background-size:320% 100%;
  -webkit-background-clip:text; background-clip:text; color:transparent;
  filter:drop-shadow(0 1px 0 rgb(0 0 0 / .4));
  animation:foil 16s ease-in-out infinite;
}
@keyframes foil{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
html[lang="hy"] .name{font-family:"Noto Sans Armenian",sans-serif; font-size:clamp(1.85rem,7.6vw,5.4rem)}
html[lang="fa"] .name{font-family:"Vazirmatn",sans-serif; font-size:clamp(1.85rem,7.6vw,5.4rem); line-height:1.42}
.name .ch{display:inline-block; opacity:0; transition:opacity 2s var(--ease)}
.ready .name .ch{opacity:1}

.engrave{
  width:min(86vw,44rem); margin-inline:auto;
  padding:clamp(.7rem,2.4vh,1.1rem) 0;
  border-block:1px solid var(--line);
  overflow:hidden;
  /* The band scrolls by translating a flex row to the left. Under
     dir="rtl" that row would lay itself out right-to-left, the two
     copies would swap places, and the loop would walk the content
     off screen instead of round. Each term keeps its own bidi
     context below, so Persian still shapes correctly. */
  direction:ltr;
}
.engrave .run{
  display:flex; white-space:nowrap; width:max-content;
  font-size:.62rem; letter-spacing:.4em; text-transform:uppercase;
  color:var(--mute); will-change:transform;
}
.engrave .run i{
  font-style:normal; unicode-bidi:isolate;
  letter-spacing:.14em; text-transform:none;
  transition:color 1.2s var(--ease);
}
.engrave .run i.on{color:var(--accent)}

.label{
  text-align:center; margin-top:.9rem;
  font-size:.56rem; letter-spacing:.4em; text-transform:uppercase; color:var(--mute);
}
html[lang="fa"] .label,html[lang="hy"] .label{letter-spacing:.08em; text-transform:none; font-size:.66rem}

.cta{
  position:relative;
  font-family:"Cormorant Garamond",Georgia,serif;
  font-size:clamp(1.05rem,2.5vw,1.4rem); font-weight:400; letter-spacing:.05em;
  color:var(--fg); padding-bottom:.32rem;
  transition:color .9s var(--ease);
}
html[lang="hy"] .cta{font-family:"Noto Sans Armenian",sans-serif; font-size:clamp(1rem,2.3vw,1.25rem)}
html[lang="fa"] .cta{font-family:"Vazirmatn",sans-serif; font-size:clamp(1rem,2.3vw,1.25rem)}
.cta::after{
  content:""; position:absolute; inset-inline:0; bottom:0; height:1px;
  background:linear-gradient(90deg,transparent,var(--accent) 15%,var(--accent) 85%,transparent);
  transform:scaleX(0); transform-origin:center;
  transition:transform 1.1s var(--ease);
}
.ready .cta::after{transform:scaleX(1)}
.cta:hover{color:var(--accent)}
.cta:hover::after{transform:scaleX(1.14)}

/* the address, revealed under the button when there is no form */
.hint{
  font-family:"Inter",system-ui,sans-serif;
  font-size:.6rem; letter-spacing:.18em; color:var(--mute);
}

/* The form rises over the page like a sheet of paper laid on the
   lacquer — same gesture as the band, drawn the other way. */
.sheet{
  position:fixed; inset:0; z-index:40;
  background:var(--surface); color:var(--on-surface);
  display:grid; place-items:center; padding:var(--gutter);
  clip-path:inset(0 0 100% 0);
  transition:clip-path 1.1s var(--ease);
}
:root[data-contact="open"] .sheet{clip-path:inset(0 0 0 0)}
.sheet .dpform h2{
  font-family:"Cormorant Garamond",Georgia,serif; font-weight:400;
  font-size:clamp(1.7rem,4.6vw,2.6rem);
}
html[lang="hy"] .sheet .dpform h2{font-family:"Noto Sans Armenian",sans-serif}
html[lang="fa"] .sheet .dpform h2{font-family:"Vazirmatn",sans-serif}
.sheet .send{
  background:var(--accent); color:var(--on-accent); border-radius:0;
  letter-spacing:.2em; text-transform:uppercase; font-size:.66rem; padding:.8rem 2rem;
}
html[lang="fa"] .sheet .send{letter-spacing:0; text-transform:none; font-size:.82rem}

/* the social row sits at the same weight as the year and the
   address: a line of small caps, never a row of coloured badges */
.social a{font-size:.62rem; letter-spacing:.2em}


/* ============================================================
   SELF-HOSTED FONTS — uncomment once the .woff2 files are in
   assets/fonts/ and the Google Fonts <link> tags are removed.
   See assets/fonts/README.txt.
   ============================================================
@font-face{font-family:"Cormorant Garamond";font-style:normal;font-weight:300;font-display:swap;
  src:url("/assets/fonts/CormorantGaramond-Light.woff2") format("woff2")}
@font-face{font-family:"Cormorant Garamond";font-style:normal;font-weight:400;font-display:swap;
  src:url("/assets/fonts/CormorantGaramond-Regular.woff2") format("woff2")}

@font-face{font-family:"Inter";font-style:normal;font-weight:200;font-display:swap;
  src:url("/assets/fonts/Inter-ExtraLight.woff2") format("woff2")}
@font-face{font-family:"Inter";font-style:normal;font-weight:300;font-display:swap;
  src:url("/assets/fonts/Inter-Light.woff2") format("woff2")}
@font-face{font-family:"Inter";font-style:normal;font-weight:400;font-display:swap;
  src:url("/assets/fonts/Inter-Regular.woff2") format("woff2")}

@font-face{font-family:"Noto Sans Armenian";font-style:normal;font-weight:300;font-display:swap;
  src:url("/assets/fonts/NotoSansArmenian-Light.woff2") format("woff2")}
@font-face{font-family:"Noto Sans Armenian";font-style:normal;font-weight:400;font-display:swap;
  src:url("/assets/fonts/NotoSansArmenian-Regular.woff2") format("woff2")}

@font-face{font-family:"Vazirmatn";font-style:normal;font-weight:300;font-display:swap;
  src:url("/assets/fonts/Vazirmatn-Light.woff2") format("woff2")}
@font-face{font-family:"Vazirmatn";font-style:normal;font-weight:400;font-display:swap;
  src:url("/assets/fonts/Vazirmatn-Regular.woff2") format("woff2")}
============================================================ */