/* Harmonia — the generative banner on the homepage hero.
   Every selector is hm- prefixed: this file is loaded site-wide, so it
   must not be able to touch anything but its own markup. */
:root{--hm-ink:#2e4245; --hm-ink-lt:#5d7478;}

  /* The fog palette: cool greys drifting green and blue, with ink for the
     drawing. Sampled off a still of an ink circle written into mist. */
  /* No frame, no border, no inner rule. The image simply is the field. */
  .hm-stage{
    /* Fills the slide, but stops where the fixed .portfolio-footer begins.
       The hero itself deliberately runs full height beneath that footer — the
       site's own controls compensate for it — so the correction belongs HERE,
       on the artwork only. Without it the medallion centres in a box whose
       bottom 90px is hidden, and reads about 45px low. */
    position:absolute; left:0; right:0; top:0; bottom:var(--footer-h);
    width:auto; height:auto;
    background:
      radial-gradient(1250px 800px at 50% 44%, #f2f6f4 0%, #dbe4e2 40%, #b9c7c7 100%),
      linear-gradient(158deg,#e7edea 0%,#c3d0cf 60%,#aebdbe 100%);
    overflow:hidden;
  }
  svg.hm-plate{position:absolute; inset:0; width:100%; height:100%; display:block}

  /* ---- the ground never stops moving ---- */
  #hm-arcsA,#hm-arcsB,#hm-arcsC,#hm-spiral{transform-box:view-box}
  #hm-arcsA{transform-origin:250px 170px;  animation:hm-spin 210s linear infinite}
  #hm-arcsB{transform-origin:1360px 730px; animation:hm-spinR 265s linear infinite}
  #hm-arcsC{transform-origin:800px 450px;  animation:hm-spin 350s linear infinite}
  #hm-spiral{transform-origin:800px 450px; animation:hm-spinR 420s linear infinite}
  @keyframes hm-spin { to{transform:rotate(360deg)} }
  @keyframes hm-spinR{ to{transform:rotate(-360deg)} }

  /* ---- the medallion breathes; its bands drift against one another ---- */
  #hm-mandala{transform-box:view-box; transform-origin:800px 450px; animation:hm-breathe 19s ease-in-out infinite}
  #hm-bandArcade{transform-box:view-box; transform-origin:800px 450px; animation:hm-spinR 300s linear infinite}
  #hm-bandStars {transform-box:view-box; transform-origin:800px 450px; animation:hm-spin  240s linear infinite}
  #hm-bandKey   {transform-box:view-box; transform-origin:800px 450px; animation:hm-spinR 400s linear infinite}
  #hm-bandGirih {transform-box:view-box; transform-origin:800px 450px; animation:hm-spin  520s linear infinite}
  @keyframes hm-breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.012)}}

  .hm-parallax{transition:transform 1.6s cubic-bezier(.2,.7,.2,1)}

  /* ── Performance ─────────────────────────────────────────────────────
     The fog, the dot grid and the grain all live in HTML/CSS, NOT in the
     SVG. Animating anything inside an SVG <filter> makes the browser re-run
     that filter on the CPU every frame - a 78px blur at 1600x900 is what
     made this chunky. Blurring each blob individually and then animating
     only `transform` lets the compositor reuse the blurred layer, so the
     GPU just moves it. Same reason the rotating bands get `will-change`. */
  .hm-fog{position:absolute; inset:-18%; pointer-events:none; z-index:0}
  .hm-fog i{position:absolute; display:block; border-radius:50%;
         filter:blur(70px); will-change:transform}
  .hm-f1{left:12%;  top:18%; width:44%; height:46%; background:#ffffff; opacity:.62;
      animation:hm-drift1 74s ease-in-out infinite}
  .hm-f2{left:52%;  top:48%; width:50%; height:50%; background:#e6efec; opacity:.55;
      animation:hm-drift2 96s ease-in-out infinite}
  .hm-f3{left:38%;  top:2%;  width:38%; height:36%; background:#cfe0e2; opacity:.5;
      animation:hm-drift3 63s ease-in-out infinite}
  .hm-f4{left:2%;   top:62%; width:42%; height:40%; background:#b9ccc6; opacity:.45;
      animation:hm-drift2 88s ease-in-out infinite reverse}
  .hm-f5{left:70%;  top:0%;  width:36%; height:38%; background:#ffffff; opacity:.48;
      animation:hm-drift1 110s ease-in-out infinite reverse}
  .hm-f6{left:26%;  top:74%; width:48%; height:34%; background:#aebfc2; opacity:.38;
      animation:hm-drift3 81s ease-in-out infinite}
  @keyframes hm-drift1{0%,100%{transform:translate3d(0,0,0) scale(1)}
                    50%{transform:translate3d(90px,-46px,0) scale(1.16)}}
  @keyframes hm-drift2{0%,100%{transform:translate3d(0,0,0) scale(1.08)}
                    50%{transform:translate3d(-110px,38px,0) scale(.92)}}
  @keyframes hm-drift3{0%,100%{transform:translate3d(0,0,0) scale(.96)}
                    50%{transform:translate3d(58px,64px,0) scale(1.2)}}

  /* the dotted ground: a tiled CSS background sliding exactly one cell, so
     the loop is seamless and the whole thing is one composited layer */
  #hm-dotfield{
    position:absolute; inset:-40px; z-index:1; pointer-events:none; opacity:0;
    background-image:radial-gradient(circle, rgba(46,66,69,.5) 1.05px, transparent 1.2px);
    background-size:28px 28px;
    -webkit-mask-image:radial-gradient(ellipse 62% 64% at 50% 50%, #000 0%, rgba(0,0,0,.55) 56%, transparent 100%);
    mask-image:radial-gradient(ellipse 62% 64% at 50% 50%, #000 0%, rgba(0,0,0,.55) 56%, transparent 100%);
    will-change:transform; animation:hm-dotdrift 52s linear infinite;
  }
  @keyframes hm-dotdrift{to{transform:translate3d(28px,28px,0)}}

  .hm-grain{position:absolute; inset:0; z-index:5; pointer-events:none; opacity:.5;
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/><feColorMatrix type='saturate' values='0'/><feComponentTransfer><feFuncA type='linear' slope='.05'/></feComponentTransfer></filter><rect width='160' height='160' filter='url(%23n)'/></svg>")}

  /* ── Hover ───────────────────────────────────────────────────────────
     The ring under the cursor answers: it gains contrast and stops turning
     while you are on it. Only that ring, so moving outward walks you through
     the bands one at a time and the piece teaches you it is not a video. */
  #hm-mandala g{transition:filter .5s ease}
  .hm-lit{filter:contrast(1.75) drop-shadow(0 0 7px rgba(30,46,49,.30));
       animation-play-state:paused}
  #hm-stage{cursor:crosshair}

  /* The constellation is drawn CRISP, then softened once and left alone.
     Blurring it while it draws would re-run the filter every frame - the
     exact trap the fog taught us. After this it never animates again. */
  #hm-network{transition:filter 1.2s ease}
  #hm-network.hm-soft{filter:blur(2.4px)}

  /* let the compositor cache each turning band instead of re-rasterising it */
  #hm-mandala,#hm-bandArcade,#hm-bandStars,#hm-bandKey,#hm-bandGirih,#hm-arcsA,#hm-arcsB,#hm-arcsC,#hm-spiral{
    will-change:transform}

  /* The overture LIGHTENS rather than covers. No dark plate, no button box -
     the fog behind stays visible and simply brightens toward the middle, and
     the word is just the word, in ink. */
  .hm-overture{position:absolute; inset:0; z-index:8; display:flex; flex-direction:column;
    align-items:center; justify-content:center; gap:30px;
    background:
      radial-gradient(620px 380px at 50% 50%, rgba(255,255,255,.72) 0%, rgba(255,255,255,.34) 48%, rgba(255,255,255,0) 100%),
      radial-gradient(1500px 900px at 50% 50%, rgba(226,235,232,.55) 0%, rgba(210,222,222,.28) 60%, rgba(198,212,213,0) 100%);
    transition:opacity 1.8s ease, visibility 1.8s}
  .hm-overture.hm-gone{opacity:0; visibility:hidden}
  .hm-overture p{margin:0; font-size:11px; letter-spacing:.46em; text-transform:uppercase; color:rgba(46,66,69,.42)}
  .hm-begin{font:inherit; font-size:19px; letter-spacing:.54em; text-indent:.54em;
    text-transform:uppercase; color:rgba(30,44,47,.9);
    background:none; border:0; padding:6px 4px; cursor:pointer; transition:.6s ease}
  .hm-begin:hover{color:#0f1c1f; letter-spacing:.68em; text-indent:.68em}

  /* Legible controls. These were nearly invisible, which is no good on a
     homepage banner where people need to see there is something to press. */
  /* Top-right. Both bottom corners are already taken by the site's own hero
     controls - dots bottom-left, arrows bottom-right - so these would either
     collide or hide behind them. */
  .hm-tools{position:absolute; right:24px; top:20px; z-index:9; display:flex; gap:10px}
  /* Solid, not translucent, and no backdrop-filter: a frosted panel over a
     pale background is effectively invisible, and backdrop-filter drops out
     entirely in some renderers. These have to be obviously pressable. */
  /* Pills tinted out of the fog itself rather than white, so they belong to
     the picture instead of being stuck on top of it. The outline does the work
     of saying "pressable"; no bright fill is needed. No backdrop-filter -
     it drops out entirely in some renderers and the button vanishes. */
  .hm-tools button{
    font-family:inherit; font-size:11px; font-weight:500; letter-spacing:.16em;
    text-transform:uppercase; color:#3d5457;
    background:rgba(222,232,230,.38);
    border:1px solid rgba(61,84,87,.30);
    border-radius:999px; padding:10px 20px; cursor:pointer;
    transition:.32s ease;
    display:inline-flex; align-items:center; gap:9px;
  }
  .hm-tools button:hover{
    background:rgba(234,241,239,.62);
    border-color:rgba(61,84,87,.6);
    color:#1e3033;
  }
  .hm-tools button .hm-dot{width:7px; height:7px; border-radius:50%;
    background:#22383c; opacity:.28; transition:.28s}
  .hm-tools button.hm-on .hm-dot{opacity:1; background:#1f7d72}

  /* ── The copy ────────────────────────────────────────────────────────
     Reuses the site's own .hero-content / .eyebrow / h1 / p, so the type
     scale matches every other banner. Only the colour changes: this banner
     is pale, where the others are dark photographs. It sits in the left
     column and the medallion stays centred - the two do not fight. */
  .hm-copy{
    position:absolute; inset:0; z-index:4;
    display:flex; flex-direction:column; justify-content:center;
    pointer-events:none;                 /* the artwork keeps its hover */
    max-width:min(36%, 500px);
    padding:0 0 0 clamp(28px, 5vw, 84px);
  }

  /* The same block mirrored: right-hand column, right-aligned, reading
     right to left. Noto Kufi because Sora has no Arabic glyphs at all. */
  .hm-copy-ar{
    left:auto; right:0; text-align:right;
    align-items:flex-end;
    padding:0 clamp(28px, 5vw, 84px) 0 0;
    margin-left:auto;
    font-family:"Noto Kufi Arabic","Segoe UI",Tahoma,sans-serif;
  }
  .hm-copy-ar h1{
    max-width:none; letter-spacing:0; line-height:1.25;
    font-size:clamp(30px, 3.1vw, 52px);
  }
  /* Every line in this column must share one right edge. Shrink-to-fit flex
     items do NOT: a short heading hugs its own text and its edge drifts (it
     measured 26px short of the paragraphs). Give each child the full column
     width and let text-align do the aligning, so the edge is the column's,
     not the text's. */
  .hm-copy-ar .eyebrow,
  .hm-copy-ar h1,
  .hm-copy-ar p{
    width:100%; align-self:stretch; text-align:right;
  }
  .hm-copy-ar p{ line-height:1.95; max-width:none }
  .hm-copy-ar .eyebrow{ letter-spacing:0 }
  .hm-copy .eyebrow{color:#4a6a6e; opacity:.95}
  .hm-copy h1{
    color:#1b2b2e; letter-spacing:-1.5px;
    font-size:clamp(34px, 3.6vw, 62px); max-width:11ch;
    text-shadow:0 1px 0 rgba(255,255,255,.5);
  }
  .hm-copy p{
    color:#3f5659; max-width:52ch;
    font-size:clamp(13px, .95vw, 15.5px); line-height:1.62; margin:18px 0 0;
  }
  .hm-copy p em{font-style:italic; color:#22383c}

  /* Below this the text would collide with the medallion, so drop the body
     copy and keep the title. */
  @media (max-width:1400px){
    .hm-copy p{display:none}          /* titles only — the body would collide */
  }
  @media (max-width:900px){
    .hm-copy-ar{display:none}         /* one language at a time on narrow screens */
    .hm-copy{max-width:min(70%, 520px)}
  }
  @media (max-width:760px){
    .hm-copy{max-width:100%; padding:0 24px; align-items:center; text-align:center}
    .hm-copy h1{max-width:none; font-size:clamp(26px,7vw,40px)}
  }

  .hm-stroke{fill:none; stroke-linecap:round; stroke-linejoin:round}
  .hm-fillin{opacity:0}
  @media (prefers-reduced-motion:reduce){
    #hm-arcsA,#hm-arcsB,#hm-arcsC,#hm-spiral,#hm-mandala,#hm-bandArcade,#hm-bandStars,#hm-bandKey,#hm-bandGirih{animation:none}
  }