/*
 * KurdVisa v12.61 — 2026 Human Interface layer
 * Progressive enhancement only: PHP SSR/content remains fully usable without JS,
 * motion, backdrop-filter, view transitions, or pointer effects.
 */
:root{
  --human-line:color-mix(in srgb,var(--ui-accent,var(--kv-accent)) 72%,var(--ui-ink,var(--kv-ink)) 28%);
  --human-glass:color-mix(in srgb,var(--ui-surface,var(--kv-surface)) 76%,transparent);
  --human-glass-strong:color-mix(in srgb,var(--ui-surface,var(--kv-surface)) 88%,transparent);
  --human-glass-border:color-mix(in srgb,var(--ui-ink,var(--kv-ink)) 13%,transparent);
  --human-glass-highlight:color-mix(in srgb,#fff 54%,transparent);
  --human-glass-blur:22px;
  --human-glass-saturate:1.18;
  --human-shadow-rest:0 18px 48px rgba(15,23,42,.09),0 3px 12px rgba(15,23,42,.045);
  --human-shadow-touch:calc(var(--fx-shadow-x,0) * 1px) calc((18 + var(--fx-shadow-y,0)) * 1px) 52px rgba(15,23,42,.13),0 3px 12px rgba(15,23,42,.05);
  --human-radius:clamp(20px,2.2vw,32px);
  --human-ease:cubic-bezier(.22,1,.36,1);
  --human-fast:180ms;
  --human-slow:720ms;
  --story-progress:0;
}
html[data-theme="dark"]{
  --human-glass:color-mix(in srgb,var(--ui-surface,var(--kv-surface)) 64%,transparent);
  --human-glass-strong:color-mix(in srgb,var(--ui-surface,var(--kv-surface)) 78%,transparent);
  --human-glass-border:color-mix(in srgb,#fff 14%,transparent);
  --human-glass-highlight:color-mix(in srgb,#fff 12%,transparent);
  --human-shadow-rest:0 20px 58px rgba(0,0,0,.28),0 4px 14px rgba(0,0,0,.16);
  --human-shadow-touch:calc(var(--fx-shadow-x,0) * 1px) calc((20 + var(--fx-shadow-y,0)) * 1px) 58px rgba(0,0,0,.34),0 4px 14px rgba(0,0,0,.18);
}
html[data-glass="soft"]{--human-glass-blur:16px;--human-glass-saturate:1.08}
html[data-glass="flat"]{--human-glass-blur:0px;--human-glass-saturate:1}

/* Cross-document page transitions use the browser's navigation model: no SPA/hydration. */
@view-transition{navigation:auto}
::view-transition-old(root){animation:kv-page-out 180ms ease both}
::view-transition-new(root){animation:kv-page-in 360ms var(--human-ease) both}
@keyframes kv-page-out{to{opacity:.7;filter:blur(2px);transform:scale(.995)}}
@keyframes kv-page-in{from{opacity:0;filter:blur(4px);transform:translateY(7px) scale(.998)}to{opacity:1;filter:none;transform:none}}

/* 2026 human typography: intentionally varied rhythm, not random distortion. */
body{font-optical-sizing:auto;font-kerning:normal;text-rendering:optimizeLegibility}
:is(.hero-copy h1,.section-header h2,.footer-lead h2,.final-cta h2,.admin-workspace-hero h1){text-wrap:balance;font-variation-settings:"wght" 760,"opsz" 42}
.page-home .section:nth-of-type(odd) .section-header h2{font-weight:720}
.page-home .section:nth-of-type(even) .section-header h2{font-weight:810}
.page-home .section-header>div{max-width:min(760px,82%)}
.page-home .section:nth-of-type(3n) .section-header>div{margin-inline-start:clamp(0px,4vw,66px)}
[dir="rtl"] .page-home .section:nth-of-type(3n) .section-header>div{margin-inline-start:0;margin-inline-end:clamp(0px,4vw,66px)}

/* A small imperfect marker gives human identity without reducing legibility. */
.page-home :is(.section-header h2,.process-copy h2,.final-cta h2){position:relative;width:fit-content;max-width:100%}
.page-home :is(.section-header h2,.process-copy h2,.final-cta h2)::after{
  content:"";position:absolute;inset-inline-start:4%;inset-block-end:-.24em;width:42%;height:7px;pointer-events:none;
  background:var(--human-line);opacity:.58;transform:rotate(-1.25deg) skewX(-8deg);transform-origin:left center;
  clip-path:polygon(0 40%,15% 18%,31% 48%,51% 22%,67% 54%,83% 24%,100% 44%,99% 70%,82% 52%,66% 76%,49% 48%,31% 72%,14% 45%,0 68%);
}
[dir="rtl"] .page-home :is(.section-header h2,.process-copy h2,.final-cta h2)::after{transform:rotate(1.25deg) skewX(8deg);transform-origin:right center}

/* Anti-grid / Bento — deliberate asymmetry that collapses safely at smaller widths. */
@media (min-width:900px){
  html[data-composition="human"] .page-home .destination-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));grid-auto-flow:row;gap:clamp(.8rem,1.25vw,1.25rem)}
  html[data-composition="human"] .page-home .destination-card{grid-column:span 3;min-height:190px}
  html[data-composition="human"] .page-home .destination-card:nth-child(8n+1){grid-column:span 5;min-height:230px}
  html[data-composition="human"] .page-home .destination-card:nth-child(8n+2){grid-column:span 3;transform-origin:55% 60%}
  html[data-composition="human"] .page-home .destination-card:nth-child(8n+3){grid-column:span 4;min-height:214px}
  html[data-composition="human"] .page-home .destination-card:nth-child(8n+4){grid-column:span 3}
  html[data-composition="human"] .page-home .destination-card:nth-child(8n+5){grid-column:span 4;min-height:222px}
  html[data-composition="human"] .page-home .destination-card:nth-child(8n+6){grid-column:span 5}
  html[data-composition="human"] .page-home .destination-card:nth-child(8n+7){grid-column:span 4}
  html[data-composition="human"] .page-home .destination-card:nth-child(8n+8){grid-column:span 3;min-height:214px}

  html[data-composition="human"] .page-home .service-grid-premium{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));grid-auto-flow:row;gap:clamp(.9rem,1.4vw,1.35rem)}
  html[data-composition="human"] .page-home .service-card-premium{grid-column:span 4}
  html[data-composition="human"] .page-home .service-card-premium:nth-child(6n+1){grid-column:span 5;min-height:270px}
  html[data-composition="human"] .page-home .service-card-premium:nth-child(6n+2){grid-column:span 3;min-height:225px}
  html[data-composition="human"] .page-home .service-card-premium:nth-child(6n+3){grid-column:span 4}
  html[data-composition="human"] .page-home .service-card-premium:nth-child(6n+4){grid-column:span 3}
  html[data-composition="human"] .page-home .service-card-premium:nth-child(6n+5){grid-column:span 5;min-height:260px}
  html[data-composition="human"] .page-home .service-card-premium:nth-child(6n+6){grid-column:span 4}

  html[data-composition="human"] .page-home .process-layout{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:clamp(1rem,2vw,2rem);align-items:start}
  html[data-composition="human"] .page-home .process-copy{grid-column:1/span 5}
  html[data-composition="human"] .page-home .process-steps{grid-column:7/-1;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}
  html[data-composition="human"] .page-home .process-steps::before{display:none}
  html[data-composition="human"] .page-home .process-step{grid-template-columns:44px minmax(0,1fr)}
  html[data-composition="human"] .page-home .process-step:nth-child(1),html[data-composition="human"] .page-home .process-step:nth-child(4){grid-column:span 2}

  html[data-composition="human"] .page-home .office-grid-premium{display:grid;grid-template-columns:7fr 5fr;gap:clamp(1rem,1.6vw,1.5rem);align-items:stretch}
  html[data-composition="human"] .page-home .office-card:nth-child(2){margin-top:clamp(20px,4vw,62px);min-height:calc(100% - clamp(20px,4vw,62px))}
}
@media (min-width:1180px){
  html[data-composition="human"] .page-home .hero-grid-premium{grid-template-columns:minmax(0,1.04fr) minmax(440px,.82fr);gap:clamp(3rem,6vw,7.5rem)}
  html[data-composition="human"] .page-home .hero-copy{padding-top:clamp(1rem,4vw,5rem);margin-inline-start:clamp(0px,2vw,28px)}
  html[data-composition="human"] .page-home .hero-experience{margin-top:clamp(-18px,-1vw,-6px);margin-inline-end:clamp(0px,2.6vw,42px)}
}

/* Controlled imperfection: tiny rotations are disabled for forms/data-heavy surfaces. */
@media (hover:hover) and (pointer:fine) and (min-width:900px){
  html[data-composition="human"] .page-home .destination-card:nth-child(4n+1){rotate:-.28deg}
  html[data-composition="human"] .page-home .destination-card:nth-child(4n+3){rotate:.22deg}
  html[data-composition="human"] .page-home .service-card-premium:nth-child(3n+2){translate:0 8px;rotate:.18deg}
  html[data-composition="human"] .page-home .process-step:nth-child(2){translate:12px 0;rotate:.16deg}
  [dir="rtl"] html[data-composition="human"] .page-home .process-step:nth-child(2){translate:-12px 0;rotate:-.16deg}
}

/* Glassmorphism 2.0: semantic, layered, responsive, readable. */
:where(.hero-card,.campaign-panel,.final-cta,.account-nav,.customer-command-center,.admin-workspace-bar,.admin-command-palette,.appearance-panel,.pwa-install-panel){
  isolation:isolate;
}
:where(.hero-card,.campaign-panel,.final-cta,.account-nav,.admin-workspace-bar,.admin-command-palette,.appearance-panel,.pwa-install-panel).fx-glass,
html[data-glass="crystal"] :where(.hero-card,.campaign-panel,.final-cta,.account-nav,.admin-workspace-bar,.admin-command-palette,.appearance-panel,.pwa-install-panel){
  background:linear-gradient(145deg,var(--human-glass-highlight),transparent 42%),var(--human-glass);
  border:1px solid var(--human-glass-border);
  box-shadow:var(--human-shadow-touch);
  backdrop-filter:blur(var(--human-glass-blur)) saturate(var(--human-glass-saturate));
  -webkit-backdrop-filter:blur(var(--human-glass-blur)) saturate(var(--human-glass-saturate));
}
html[data-glass="soft"] :where(.hero-card,.final-cta,.account-nav,.admin-workspace-bar,.appearance-panel){
  background:linear-gradient(145deg,color-mix(in srgb,#fff 28%,transparent),transparent 44%),var(--human-glass-strong);
  border:1px solid var(--human-glass-border);box-shadow:var(--human-shadow-rest);
  backdrop-filter:blur(var(--human-glass-blur)) saturate(var(--human-glass-saturate));
  -webkit-backdrop-filter:blur(var(--human-glass-blur)) saturate(var(--human-glass-saturate));
}

/* Tactile surfaces. Pointer JS only changes CSS variables; layout never depends on it. */
.fx-interactive{
  --fx-scale:1;--fx-lift:0px;--fx-rotate:0deg;
  transition:translate var(--human-fast) var(--human-ease),scale var(--human-fast) var(--human-ease),rotate var(--human-fast) var(--human-ease),box-shadow var(--human-fast) var(--human-ease),border-color var(--human-fast) ease;
  translate:0 var(--fx-lift);scale:var(--fx-scale);box-shadow:var(--human-shadow-touch);
}
@media (hover:hover) and (pointer:fine){
  .fx-interactive:hover{--fx-lift:-3px;--fx-scale:1.006;border-color:color-mix(in srgb,var(--ui-primary,var(--kv-brand)) 24%,var(--human-glass-border))}
  .fx-interactive:active{--fx-lift:0px;--fx-scale:.992}
}

/* Hand-drawn link trace — reserved for editorial/action links, not every control. */
:where(.text-link,.btn-text,.destination-copy>span,.service-card-premium>a){position:relative}
:where(.text-link,.btn-text,.destination-copy>span,.service-card-premium>a)::after{
  content:"";position:absolute;inset-inline:0;inset-block-end:-3px;height:4px;opacity:0;transform:scaleX(.22) rotate(-.8deg);transform-origin:left center;
  background:var(--human-line);clip-path:polygon(0 46%,12% 28%,24% 52%,40% 31%,57% 60%,72% 30%,86% 51%,100% 37%,100% 68%,86% 60%,71% 72%,56% 67%,39% 59%,23% 69%,11% 57%,0 72%);
  transition:opacity 160ms ease,transform 320ms var(--human-ease);pointer-events:none;
}
:where(.text-link,.btn-text,.destination-card:hover .destination-copy>span,.service-card-premium>a):hover::after,
:where(.text-link,.btn-text,.service-card-premium>a):focus-visible::after{opacity:.72;transform:scaleX(1) rotate(-.8deg)}
[dir="rtl"] :where(.text-link,.btn-text,.destination-copy>span,.service-card-premium>a)::after{transform-origin:right center;transform:scaleX(.22) rotate(.8deg)}

/* Motion narrative. Existing reveal remains the fallback; this adds section-level story depth. */
html.js:not([data-motion="reduced"]) [data-story-section]{--story-local:0}
html.js:not([data-motion="reduced"]) [data-story-section]::before{transform:translate3d(0,calc((var(--story-local) - .5) * 18px),0)}
html.js:not([data-motion="reduced"]) .story-accent{transform:translate3d(calc((var(--story-local) - .5) * 18px),calc((var(--story-local) - .5) * -12px),0) rotate(calc((var(--story-local) - .5) * 2deg))}
html.js:not([data-motion="reduced"]) [data-story-item]{opacity:.64;translate:0 20px;transition:opacity 620ms var(--human-ease),translate 620ms var(--human-ease)}
html.js:not([data-motion="reduced"]) [data-story-item].story-in{opacity:1;translate:0 0}
html[data-brand-motion="subtle"] [data-story-item]{transition-duration:360ms!important}
html[data-brand-motion="off"] [data-story-item]{opacity:1!important;translate:none!important;transition:none!important}

/* Sustainable rendering: below-fold SSR remains in the DOM but can skip offscreen paint/layout. */
@supports (content-visibility:auto){
  .page-home main>.section:not(:first-child),.page-home main>.trust-marquee,.page-home main>.final-cta-section,
  .page-guides .guide-grid,.page-services main>.section:nth-of-type(n+2),.page-countries main>.section:nth-of-type(n+2){
    content-visibility:auto;contain-intrinsic-size:auto 760px;
  }
}
:where(.destination-card,.service-card-premium,.office-card,.guide-card,.overview-card,.metric,.panel){contain:paint}
img{image-rendering:auto}

/* Admin stays precise, but gets bento hierarchy and glass depth where it helps scanning. */
.admin-shell .dashboard-grid-6{grid-auto-flow:row}
@media(min-width:1180px){
  html[data-composition="human"] .admin-shell .dashboard-grid-6>.metric:nth-child(6n+1){grid-column:span 2}
  html[data-composition="human"] .admin-shell .dashboard-grid-6>.metric:nth-child(6n+4){grid-row:span 2}
  html[data-composition="human"] .admin-shell .admin-content>.container>.section-header{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end}
}
.admin-shell :where(.metric,.panel,.admin-workspace-hero){transition:box-shadow var(--human-fast) ease,border-color var(--human-fast) ease}

/* Accessibility: AA-oriented defaults, AAA-oriented high-contrast mode, and system overrides. */
:where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{outline:3px solid color-mix(in srgb,var(--ui-accent,var(--kv-accent)) 78%,#000 22%);outline-offset:3px}
html[data-contrast="high"]{--human-glass:var(--ui-surface,var(--kv-surface));--human-glass-strong:var(--ui-surface,var(--kv-surface));--human-glass-blur:0px;--human-glass-saturate:1}
html[data-contrast="high"] :where(.panel,.hero-card,.destination-card,.service-card-premium,.office-card,.guide-card,.form-control,.btn,.data-table-wrap){border-width:2px;border-color:currentColor;box-shadow:none}
html[data-contrast="high"] :where(.muted,.help,small){color:var(--ui-ink,var(--kv-ink))}
@media (forced-colors:active){
  *{backdrop-filter:none!important;-webkit-backdrop-filter:none!important;box-shadow:none!important}
  :where(.btn,.form-control,.panel,.destination-card,.service-card-premium,.office-card){border:1px solid CanvasText}
  .story-accent,.page-home :is(.section-header h2,.process-copy h2,.final-cta h2)::after{display:none!important}
}
@media (prefers-reduced-transparency:reduce){
  :root{--human-glass:var(--ui-surface,var(--kv-surface));--human-glass-strong:var(--ui-surface,var(--kv-surface));--human-glass-blur:0px;--human-glass-saturate:1}
  *{backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
}
@media (prefers-reduced-motion:reduce){
  @view-transition{navigation:auto}
  ::view-transition-old(root),::view-transition-new(root){animation:none}
  .fx-interactive{translate:none!important;scale:1!important;rotate:0deg!important;transition:none!important}
  [data-story-item]{opacity:1!important;translate:none!important;transition:none!important}
}
html[data-motion="reduced"] ::view-transition-old(root),html[data-motion="reduced"] ::view-transition-new(root){animation:none}
html[data-motion="reduced"] .fx-interactive{translate:none!important;scale:1!important;rotate:0deg!important;transition:none!important}
html[data-motion="reduced"] [data-story-item]{opacity:1!important;translate:none!important;transition:none!important}

/* Mobile: asymmetry becomes hierarchy, never cramped novelty. */
@media(max-width:899px){
  .page-home .section-header>div{max-width:100%}
  .page-home .section:nth-of-type(3n) .section-header>div{margin-inline:0}
  .page-home :is(.destination-card,.service-card-premium,.process-step,.office-card){rotate:0deg!important;translate:none!important}
  .page-home .destination-grid,.page-home .service-grid-premium,.page-home .office-grid-premium{grid-template-columns:1fr}
  .page-home .process-steps{display:grid;grid-template-columns:1fr}
  .page-home .process-step{grid-column:auto!important}
}
@media(max-width:720px){
  :root{--human-glass-blur:16px}
  .page-home :is(.section-header h2,.process-copy h2,.final-cta h2)::after{width:34%;height:5px}
  .fx-interactive{box-shadow:var(--human-shadow-rest)}
}