/* Home: design philosophy (patterns/home-philosophy.php). Loaded only on pages with a block of class "hm-philo" (functions.php).
   assets/js/sections/hm-philo.js splits the statement into words (is-split) and lights them with the scroll (--hm-philo-p),
   and moves the focus frame over the values (is-live). Without the script everything shows plainly. */
.hm-philo{
  --hm-philo-lead-size: clamp(26px, 3.6vw, 46px);
  --hm-philo-band-size: clamp(28px, 4.4vw, 64px);
  --hm-philo-dur: 420ms;
  --hm-philo-band-dur: 640ms;
  --hm-philo-band-delay: 120ms;
  --hm-philo-pop-dur: 560ms;
  --hm-philo-pop-delay: 160ms;
  --hm-philo-pop-ease: cubic-bezier(.34, 1.56, .64, 1);
  --hm-philo-sign-w: 28px;
  --hm-philo-art-x: var(--s-8); /* the drawing starts this far into its column: room between it and the statement (DN 10-03) */
  --hm-philo-lead-track: -0.025em;
  --hm-philo-ic-size: .86em;
  --hm-philo-ic-gap: .12em;
  --hm-philo-ic-glyph: .5em;
  --hm-philo-band: linear-gradient(var(--band), var(--band));
  --hm-philo-blur: 4px;
  --hm-philo-focus-dur: 520ms;
  --hm-philo-corner: 16px;
  --hm-philo-corner-w: 3px;
  position:relative;overflow:hidden
}

/* layout: statement left, drawing right (rows 1–2), values and signature full width */
.hm-philo .page{position:relative;display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);column-gap:var(--gap-col);align-items:center}
.hm-philo .page > *{grid-column:1;margin:0}
.hm-philo .page > .eyebrow{margin-bottom:var(--s-3)}
.hm-philo .page > :is(.hm-philo__focus,.hm-philo__sign){grid-column:1 / -1}
.hm-philo .page > .hm-philo__focus{margin-top:var(--s-9)}
.hm-philo .page > .hm-philo__sign{margin-top:var(--s-6)}
.hm-philo .page > .wp-block-digotech-golden-drawing{--dg-golden-shift:translateY(-50%);grid-column:2;grid-row:1 / span 2;align-self:stretch}
.hm-philo .wp-block-digotech-golden-drawing svg{position:absolute;left:var(--hm-philo-art-x);top:50%;width:clamp(calc(var(--s-9) * 5.7), 60vw, calc(var(--s-9) * 9))}

/* statement: bold words are the key words (highlight band + an icon after each) */
.hm-philo__lead{--hm-philo-p:1;max-width:26ch;font:700 var(--hm-philo-lead-size)/1.25 var(--font-display);letter-spacing:var(--hm-philo-lead-track);text-wrap:pretty;color:var(--ink);transform:rotate(calc((1 - var(--hm-philo-p)) * 2.5deg));transform-origin:0 50%}
.hm-philo__lead strong{font-weight:inherit}
.hm-philo__lead:not(.is-split) strong{background:var(--hm-philo-band) 0 88% / 100% .38em no-repeat;color:var(--accent)}
/* words not reached yet stay readable (--ink-2 meets the 4.5:1 contrast in all three modes) and darken as the scroll reaches them */
.hm-philo__w{display:inline-block;color:var(--ink-2);transform:translateY(.16em);
  transition:transform var(--hm-philo-dur) var(--ease-out),color var(--dur-m) var(--ease-out),background-size var(--hm-philo-band-dur) var(--ease-out) var(--hm-philo-band-delay)}
.hm-philo__w.is-on{color:var(--ink);transform:none}
.hm-philo__w.is-key{background:var(--hm-philo-band) 0 88% / 0 .38em no-repeat}
.hm-philo__w.is-key.is-on{background-size:100% .38em;color:var(--accent)}
.hm-philo__ic{display:inline-grid;place-items:center;width:var(--hm-philo-ic-size);height:var(--hm-philo-ic-size);margin-left:var(--hm-philo-ic-gap);border-radius:var(--wp--preset--border-radius--radius-full);background:var(--accent-tint);color:var(--accent);vertical-align:-.08em;transform:scale(0) rotate(-40deg);transition:transform var(--hm-philo-pop-dur) var(--hm-philo-pop-ease) var(--hm-philo-pop-delay)}
.hm-philo__ic.is-on{transform:none}
.hm-philo__ic::before{content:"";width:var(--hm-philo-ic-glyph);height:var(--hm-philo-ic-glyph);background:currentColor;-webkit-mask:var(--hm-philo-ic) center / contain no-repeat;mask:var(--hm-philo-ic) center / contain no-repeat}
.hm-philo__ic--spark{--hm-philo-ic:url(../../../icons/spark.svg?ver=d34e27ab)}
.hm-philo__ic--bolt{--hm-philo-ic:url(../../../icons/bolt.svg?ver=20b9b4d3)}
.hm-philo__ic--phone{--hm-philo-ic:url(../../../icons/phone.svg?ver=bbb55d77)}
.hm-philo__ic--bag{--hm-philo-ic:url(../../../icons/bag.svg?ver=f2eab5ea)}
.hm-philo__ic--seal{--hm-philo-ic:url(../../../icons/seal.svg?ver=281b965d)}

/* values: one still row across the whole screen, centred and evenly spaced — outlined and brand-filled words in turn,
   a spark between (the moving band is the logo strip under the hero: not repeated here); True Focus below */
.hm-philo .page > .hm-philo__focus{margin-inline:calc(50% - 50vw);overflow:hidden;padding-block:var(--s-5);border-block:1px solid var(--rule)}
.hm-philo__words{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:var(--s-3) var(--s-6);margin:0;padding:0;list-style:none;font:800 var(--hm-philo-band-size)/1 var(--font-display);letter-spacing:var(--hm-philo-lead-track);white-space:nowrap}
.hm-philo__words > li{display:flex;align-items:center;gap:var(--s-6);margin:0;color:transparent;-webkit-text-stroke:1px var(--ink-2)}
.hm-philo__words > li:nth-child(even){color:var(--accent);-webkit-text-stroke:0}
.hm-philo__words > li:not(:last-of-type)::after{content:"";flex:none;width:calc(var(--hm-philo-band-size) * .42);aspect-ratio:1;background:var(--accent-fill);-webkit-mask:url(../../../icons/spark.svg?ver=d34e27ab) center / contain no-repeat;mask:url(../../../icons/spark.svg?ver=d34e27ab) center / contain no-repeat}

/* True Focus (is-live, hm-philo.js): the focused word sharp in a corner frame, the others blurred */
.hm-philo__words.is-live{position:relative}
.hm-philo__words.is-live > li{filter:blur(var(--hm-philo-blur));transition:filter var(--hm-philo-focus-dur) var(--ease-out)}
.hm-philo__words.is-live > li.is-focus{filter:none}
.hm-philo__frame{position:absolute;left:0;top:0;width:var(--hm-philo-fw);height:var(--hm-philo-fh);transform:translate(var(--hm-philo-fx),var(--hm-philo-fy));pointer-events:none;
  transition:transform var(--hm-philo-focus-dur) var(--ease-out),width var(--hm-philo-focus-dur) var(--ease-out),height var(--hm-philo-focus-dur) var(--ease-out)}
.hm-philo__frame i{position:absolute;width:var(--hm-philo-corner);height:var(--hm-philo-corner);border:0 solid var(--accent-fill)}
.hm-philo__frame i:nth-child(1){top:calc(var(--s-2) * -1);left:calc(var(--s-3) * -1);border-top-width:var(--hm-philo-corner-w);border-left-width:var(--hm-philo-corner-w)}
.hm-philo__frame i:nth-child(2){top:calc(var(--s-2) * -1);right:calc(var(--s-3) * -1);border-top-width:var(--hm-philo-corner-w);border-right-width:var(--hm-philo-corner-w)}
.hm-philo__frame i:nth-child(3){bottom:calc(var(--s-2) * -1);left:calc(var(--s-3) * -1);border-bottom-width:var(--hm-philo-corner-w);border-left-width:var(--hm-philo-corner-w)}
.hm-philo__frame i:nth-child(4){bottom:calc(var(--s-2) * -1);right:calc(var(--s-3) * -1);border-bottom-width:var(--hm-philo-corner-w);border-right-width:var(--hm-philo-corner-w)}

/* signature: the logo mark (brand colour in every mode) + a line */
.hm-philo__sign{display:flex;align-items:center;gap:var(--s-3);font-size:var(--t-s);color:var(--ink-2)}
.hm-philo__sign::before{content:"";flex:none;width:var(--hm-philo-sign-w);aspect-ratio:670 / 406;background:var(--brand-mark);-webkit-mask:url(../../../icons/mark.svg?ver=ede2f5ae) center / contain no-repeat;mask:url(../../../icons/mark.svg?ver=ede2f5ae) center / contain no-repeat}

@media (max-width: 991px){
  .hm-philo .page{grid-template-columns:minmax(0,1fr)}
  .hm-philo .page > .wp-block-digotech-golden-drawing{display:none}
}
@media (max-width: 767px){
  .hm-philo__words{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));justify-items:center;gap:var(--s-5) var(--s-4)} /* two by two: no spark left hanging at a line end */
  .hm-philo__words > li::after{display:none}
}
@media (prefers-reduced-motion: reduce){
  .hm-philo__lead{transform:none}
  .hm-philo__w,.hm-philo__ic{transition:none}
}