/* Digotech site-wide feel (assets/js/global/feel.js): icons inside kit form fields, edge fade on horizontal scrollers,
   click sparks and the drawn cursor (one overlay layer), and the 404 page (templates/404.html, patterns/page-404.php). */

/* ---------- icons inside kit form fields: feel.js adds feel-fi feel-fi--<icon> to the field ---------- */
/* The kit field is a one-column grid (label, control, error): the icon is a grid item in the control's cell, drawn above
   it and never catching clicks. */
.dn-kit-form .feel-fi{--feel-fi-x:var(--s-3);--feel-fi-z:1;--feel-fi-pad:calc(var(--s-3) + var(--icon-m) + var(--s-2))}
.dn-kit-form .feel-fi > label{grid-row:1;grid-column:1}
.dn-kit-form .feel-fi > :is(input,textarea){grid-row:2;grid-column:1;padding-inline-start:var(--feel-fi-pad)}
.dn-kit-form .feel-fi::before{content:"";grid-row:2;grid-column:1;z-index:var(--feel-fi-z);align-self:center;justify-self:start;width:var(--icon-m);height:var(--icon-m);margin-inline-start:var(--feel-fi-x);background:var(--ink-3);pointer-events:none;
  -webkit-mask:var(--feel-fi-icon) center / contain no-repeat;mask:var(--feel-fi-icon) center / contain no-repeat;transition:background-color var(--dur) var(--ease-press)}
/* long text: the icon stays on the first line (the kit pads fields with its space-2-xs step) */
.dn-kit-form .feel-fi:has(> textarea)::before{align-self:start;margin-block-start:calc(var(--wp--preset--spacing--space-2-xs) + (1lh - var(--icon-m)) / 2)}
.dn-kit-form .feel-fi:focus-within::before{background:var(--accent)}
.feel-fi--user{--feel-fi-icon:url(../../../icons/user.svg)}
.feel-fi--phone{--feel-fi-icon:url(../../../icons/phone.svg)}
.feel-fi--mail{--feel-fi-icon:url(../../../icons/mail.svg)}
.feel-fi--link{--feel-fi-icon:url(../../../icons/link.svg)}
.feel-fi--pen{--feel-fi-icon:url(../../../icons/pen.svg)}

/* ---------- edge fade on horizontal scrollers: feel.js marks them feel-hs + feel-hs--l / feel-hs--r ---------- */
/* Only the mask's alpha counts (--ink is opaque in every mode). :where() keeps it weaker than a section's own fade. */
:where(.feel-hs){--feel-hs-w:var(--s-7)}
:where(.feel-hs--r){-webkit-mask-image:linear-gradient(to right,var(--ink) calc(100% - var(--feel-hs-w)),transparent);mask-image:linear-gradient(to right,var(--ink) calc(100% - var(--feel-hs-w)),transparent)}
:where(.feel-hs--l){-webkit-mask-image:linear-gradient(to left,var(--ink) calc(100% - var(--feel-hs-w)),transparent);mask-image:linear-gradient(to left,var(--ink) calc(100% - var(--feel-hs-w)),transparent)}
:where(.feel-hs--l.feel-hs--r){-webkit-mask-image:linear-gradient(to right,transparent,var(--ink) var(--feel-hs-w),var(--ink) calc(100% - var(--feel-hs-w)),transparent);mask-image:linear-gradient(to right,transparent,var(--ink) var(--feel-hs-w),var(--ink) calc(100% - var(--feel-hs-w)),transparent)}

/* ---------- overlay layer (sparks + drawn cursor): a manual popover, so the browser's popover look is reset ---------- */
.feel-layer{--feel-layer-z:9999;--feel-ring-w:1.5px;--feel-cur-dur:260ms;--feel-cur-fade:200ms;--feel-cur-track:.1em;
  position:fixed;inset:0;z-index:var(--feel-layer-z);width:auto;height:auto;max-width:none;max-height:none;margin:0;padding:0;overflow:visible;border:0;background:none;pointer-events:none}
.feel-layer canvas{position:absolute;inset:0;width:100%;height:100%;color:var(--accent-fill)}
@media print{
  .feel-layer{display:none}
}

/* drawn cursor: while it runs (the mouse has moved) the native pointer is hidden, except on text fields where the caret
   is needed. !important: links, buttons, sliders and drag handles set their own cursor, which must not show through. */
html.feel-cur-on,html.feel-cur-on *{cursor:none !important}
html.feel-cur-on :is(input,textarea,select,[contenteditable]){cursor:auto !important}
.feel-cur{position:fixed;left:0;top:0;border-radius:50%;opacity:0;transition:opacity var(--feel-cur-fade) var(--ease-out)}
.feel-layer.is-on .feel-cur{opacity:1}
.feel-layer.is-typing .feel-cur,.feel-layer .feel-cur--ring.is-label + .feel-cur--dot{opacity:0}
.feel-cur--dot{width:var(--s-2);height:var(--s-2);margin:calc(var(--s-2) / -2) 0 0 calc(var(--s-2) / -2);background:var(--accent-fill)}
.feel-cur--ring{display:grid;place-items:center;width:var(--s-6);height:var(--s-6);margin:calc(var(--s-6) / -2) 0 0 calc(var(--s-6) / -2);border:var(--feel-ring-w) solid var(--accent-fill);color:var(--on-accent);font:600 var(--t-2xs)/1 var(--font-mono);letter-spacing:var(--feel-cur-track);text-transform:uppercase;
  transition:opacity var(--feel-cur-fade) var(--ease-out),width var(--feel-cur-dur) var(--ease-out),height var(--feel-cur-dur) var(--ease-out),margin var(--feel-cur-dur) var(--ease-out),background-color var(--feel-cur-dur) var(--ease-out),border-color var(--feel-cur-dur) var(--ease-out)}
.feel-cur--ring span{opacity:0;transition:opacity var(--dur) var(--ease-out)}
.feel-cur--ring.is-link{width:var(--s-7);height:var(--s-7);margin:calc(var(--s-7) / -2) 0 0 calc(var(--s-7) / -2);border-color:transparent;background:var(--accent-tint)}
.feel-cur--ring.is-label{width:var(--s-8);height:var(--s-8);margin:calc(var(--s-8) / -2) 0 0 calc(var(--s-8) / -2);border-color:transparent;background:var(--accent-fill)}
.feel-cur--ring.is-label span{opacity:1}
.feel-cur--ring.is-down{width:calc(var(--s-6) * .8);height:calc(var(--s-6) * .8);margin:calc(var(--s-6) * -.4) 0 0 calc(var(--s-6) * -.4)}

/* ---------- 404 page: search, the main pages as tiles, booking row ---------- */
.sec.feel-404{padding-top:var(--gap-head)}
.feel-404 > .page{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--gap-stack)}
.feel-404 .page > *{margin:0}
.feel-404__search{max-width:var(--measure)}
.feel-404__search .wp-block-search__inside-wrapper{gap:var(--s-2);padding:0;border:0}
.feel-404__search .wp-block-search__input{min-width:0;min-height:var(--ctl);padding:0 var(--s-4);border:1px solid var(--rule);border-radius:var(--r);background:var(--card);color:var(--ink);font:400 var(--t-m)/1 var(--font-body);transition:border-color var(--dur) var(--ease-press)}
.feel-404__search .wp-block-search__input:focus{border-color:var(--accent-fill)}
.feel-404__search .wp-block-search__button{margin:0}
.feel-404__h{margin-top:var(--gap-card);font-size:var(--t-xl)}
.feel-404__links{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-3);padding:0;list-style:none}
.feel-404__links li{display:block}
.feel-404__links a{position:relative;display:grid;align-content:start;gap:var(--s-1);height:100%;padding:var(--s-4) var(--s-7) var(--s-4) var(--s-4);border-radius:var(--r-board);background:var(--paper-2);color:var(--ink-2);font-size:var(--t-xs);line-height:1.35;text-decoration:none;transition:background-color var(--dur) var(--ease-press)}
.feel-404__links a:hover{background:var(--paper-3)}
.feel-404__links strong{font:700 var(--t-l)/1.2 var(--font-body);color:var(--ink)}
.feel-404__links a::after{content:"";position:absolute;top:var(--s-4);right:var(--s-4);width:var(--s-4);height:var(--s-4);background:var(--ink);opacity:.55;-webkit-mask:url(../../../icons/arrow.svg) center / contain no-repeat;mask:url(../../../icons/arrow.svg) center / contain no-repeat;transition:transform var(--dur) var(--ease-press),opacity var(--dur) var(--ease-press)}
.feel-404__links a:is(:hover,:focus-visible)::after{opacity:1;transform:translate(calc(var(--s-1) / 2), calc(var(--s-1) / -2))}
@media (max-width: 767px){
  .feel-404__links{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width: 359px){
  .feel-404__links{grid-template-columns:minmax(0,1fr)}
}

@media (prefers-reduced-motion: reduce){
  .dn-kit-form .feel-fi::before,.feel-404__search .wp-block-search__input,.feel-404__links a,.feel-404__links a::after{transition:none}
  .feel-404__links a:is(:hover,:focus-visible)::after{transform:none}
}