/* ==========================================================================
   DAIMUMA teaser — styles.

   The three typefaces are served from this folder instead of Google Fonts, so
   the page makes no third-party request and no visitor IP is handed to anyone.
   Chakra Petch, Azeret Mono and Reem Kufi are all SIL Open Font License 1.1,
   which permits self-hosting.
   ========================================================================== */

/* ── Azeret Mono ── */
@font-face { font-family:'Azeret Mono'; font-style:normal; font-weight:300; font-display:swap; src:url(fonts/AzeretMono-300-latin-ext.woff2) format('woff2'); unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family:'Azeret Mono'; font-style:normal; font-weight:300; font-display:swap; src:url(fonts/AzeretMono-300-latin.woff2) format('woff2'); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family:'Azeret Mono'; font-style:normal; font-weight:400; font-display:swap; src:url(fonts/AzeretMono-400-latin-ext.woff2) format('woff2'); unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family:'Azeret Mono'; font-style:normal; font-weight:400; font-display:swap; src:url(fonts/AzeretMono-400-latin.woff2) format('woff2'); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family:'Azeret Mono'; font-style:normal; font-weight:500; font-display:swap; src:url(fonts/AzeretMono-500-latin-ext.woff2) format('woff2'); unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family:'Azeret Mono'; font-style:normal; font-weight:500; font-display:swap; src:url(fonts/AzeretMono-500-latin.woff2) format('woff2'); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }

/* ── Chakra Petch ── */
@font-face { font-family:'Chakra Petch'; font-style:normal; font-weight:400; font-display:swap; src:url(fonts/ChakraPetch-400-latin-ext.woff2) format('woff2'); unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family:'Chakra Petch'; font-style:normal; font-weight:400; font-display:swap; src:url(fonts/ChakraPetch-400-latin.woff2) format('woff2'); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family:'Chakra Petch'; font-style:normal; font-weight:600; font-display:swap; src:url(fonts/ChakraPetch-600-latin-ext.woff2) format('woff2'); unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family:'Chakra Petch'; font-style:normal; font-weight:600; font-display:swap; src:url(fonts/ChakraPetch-600-latin.woff2) format('woff2'); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family:'Chakra Petch'; font-style:normal; font-weight:700; font-display:swap; src:url(fonts/ChakraPetch-700-latin-ext.woff2) format('woff2'); unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family:'Chakra Petch'; font-style:normal; font-weight:700; font-display:swap; src:url(fonts/ChakraPetch-700-latin.woff2) format('woff2'); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }

/* ── Reem Kufi (Arabic — the ديمومه wordmark) ── */
@font-face { font-family:'Reem Kufi'; font-style:normal; font-weight:700; font-display:swap; src:url(fonts/ReemKufi-700-arabic.woff2) format('woff2'); unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC; }

/* ── The design's own base + keyframes, verbatim ── */
html, body { margin: 0; padding: 0; background: #150c0f; }
* { box-sizing: border-box; }
a { color: #3d8bff; text-decoration: none; }
a:hover { color: #9b5cff; }
@keyframes dm-bloom-a { 0%,100% { transform: translate3d(-6%, -4%, 0) scale(1); } 50% { transform: translate3d(8%, 6%, 0) scale(1.15); } }
@keyframes dm-bloom-b { 0%,100% { transform: translate3d(6%, 5%, 0) scale(1.1); } 50% { transform: translate3d(-7%, -6%, 0) scale(0.95); } }
@keyframes dm-sweep { 0% { transform: translateY(-140%); } 100% { transform: translateY(240%); } }
@keyframes dm-breathe { 0%,100% { opacity: 0.5; transform: scale(1); } 50% { opacity: 0.9; transform: scale(1.05); } }
@keyframes dm-tick { 0% { opacity: 0.25; } 50% { opacity: 1; } 100% { opacity: 0.25; } }
@keyframes dm-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes dm-shine { 0% { transform: translateX(-130%) rotate(8deg); } 60%,100% { transform: translateX(230%) rotate(8deg); } }
@keyframes dm-hue { 0%,100% { filter: hue-rotate(0deg); } 50% { filter: hue-rotate(48deg); } }
@keyframes dm-flicker { 0%,100% { opacity: 1; } 48% { opacity: 1; } 49% { opacity: 0.4; } 51% { opacity: 1; } 73% { opacity: 1; } 74% { opacity: 0.65; } 76% { opacity: 1; } }

/* ==========================================================================
   Responsive layer — added, not exported.

   The exported design has no responsive rules: the countdown is five 132px
   cells (~700px wide) and the hero is a fixed 620x400 box, both inside a
   container with overflow:hidden. On a phone the page was cut off. These rules
   fix that WITHOUT touching the desktop design — nothing here applies above
   700px wide and 700px tall, so a normal laptop/desktop renders exactly as
   exported. They need !important only because the design carries its styling
   in inline attributes. Delete this whole section to go back.

   The hero's inner geometry (card sizes, rotations, offsets) is written in
   absolute pixels, so the box can't be "reflowed" smaller — it is scaled with
   transform:scale() instead. scale() alone leaves the original 620x400 hole in
   the layout, so a compensating negative margin pulls the box back in:

       margin = -(1 - scale) x half the box       (half = 200px tall, 310px wide)
   ========================================================================== */

/* ── Narrow screens (phones, portrait tablets) ── */
@media (max-width: 700px) {
  header { padding: 26px 14px 0 !important; gap: 14px !important; }

  /* the five countdown cells */
  header > div:nth-of-type(2) { gap: 6px !important; }
  header > div:nth-of-type(2) > div { min-width: 0 !important; padding: 12px 5px 10px !important; gap: 5px !important; }
  header > div:nth-of-type(2) > div > span:first-child { font-size: 28px !important; }
  header > div:nth-of-type(2) > div > span:last-child { font-size: 7px !important; letter-spacing: 0.14em !important; }

  main { gap: 30px !important; padding: 30px 16px 22px !important; }

  /* hero (main's first child) */
  main > div:first-child { transform: scale(0.9) !important; margin: -20px -31px !important; }

  /* the line under the hero */
  main > div:last-child > div { font-size: 26px !important; }

  footer { padding: 0 16px 24px !important; }
}

@media (max-width: 600px) {
  main > div:first-child { transform: scale(0.78) !important; margin: -44px -68px !important; }
}

@media (max-width: 480px) {
  header > div:nth-of-type(2) > div > span:first-child { font-size: 25px !important; }
  main > div:first-child { transform: scale(0.62) !important; margin: -76px -118px !important; }
  main > div:last-child > div { font-size: 23px !important; }
}

@media (max-width: 380px) {
  header > div:nth-of-type(2) > div > span:first-child { font-size: 22px !important; }
  main > div:first-child { transform: scale(0.5) !important; margin: -100px -155px !important; }
  main > div:last-child > div { font-size: 21px !important; }
}

/* ── Short screens: landscape phones, small laptops, split-screen windows.
   Height-based, so no normal desktop is affected. ── */
@media (max-height: 700px) {
  header { padding: 16px 14px 0 !important; gap: 10px !important; }
  header > div:nth-of-type(2) > div { min-width: 96px !important; padding: 9px 10px 7px !important; gap: 4px !important; }
  header > div:nth-of-type(2) > div > span:first-child { font-size: 26px !important; }
  header > div:nth-of-type(2) > div > span:last-child { font-size: 7px !important; letter-spacing: 0.14em !important; }

  main { gap: 16px !important; padding: 16px 16px 10px !important; }
  main > div:first-child { transform: scale(0.62) !important; margin: -76px -118px !important; }
  main > div:last-child > div { font-size: 22px !important; }

  footer { padding: 0 14px 14px !important; }
}

@media (max-height: 520px) {
  header { padding: 10px 12px 0 !important; gap: 7px !important; }
  header > div:nth-of-type(2) > div { min-width: 78px !important; padding: 6px 8px 5px !important; }
  header > div:nth-of-type(2) > div > span:first-child { font-size: 21px !important; }

  main { gap: 10px !important; padding: 10px 16px 6px !important; }
  main > div:first-child { transform: scale(0.44) !important; margin: -112px -174px !important; }
  main > div:last-child > div { font-size: 18px !important; }

  footer { padding: 0 12px 10px !important; }
}

/* Narrow AND short at once — small phone in landscape, split-screen window.
   Both blocks above apply; the cells must obey the narrow one (five 96px cells
   don't fit across a short-and-narrow viewport). Must stay last. */
@media (max-width: 700px) and (max-height: 700px) {
  header > div:nth-of-type(2) > div { min-width: 0 !important; padding: 8px 4px 6px !important; }
  header > div:nth-of-type(2) > div > span:first-child { font-size: 22px !important; }
}