/* allfordance.pl — wizytówka pracowni. Ekran powitalny „Kurtyna — zdjęcia" (makieta 3a, 2026-10-23).
   Tokeny wg _docs/design/DESIGN.md; mobile first, desktop od 900px. */

@font-face{font-family:'Playfair Display';font-style:normal;font-weight:400 600;font-display:swap;src:url('/assets/fonts/playfair-display-latin-400-600.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:'Playfair Display';font-style:normal;font-weight:400 600;font-display:swap;src:url('/assets/fonts/playfair-display-latin-ext-400-600.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:'Manrope';font-style:normal;font-weight:400 800;font-display:swap;src:url('/assets/fonts/manrope-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:'Manrope';font-style:normal;font-weight:400 800;font-display:swap;src:url('/assets/fonts/manrope-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:'Playfair Display Fallback';src:local('Georgia');size-adjust:101.39%;ascent-override:106.72%;descent-override:24.76%;line-gap-override:0%}
@font-face{font-family:'Manrope Fallback';src:local('Arial');size-adjust:103.19%;ascent-override:103.31%;descent-override:29.07%;line-gap-override:0%}
@font-face{font-family:'Playfair Display Fallback Android';src:local('Noto Serif');size-adjust:93.84%;ascent-override:115.3%;descent-override:26.75%;line-gap-override:0%}
@font-face{font-family:'Manrope Fallback Android';src:local('Roboto');size-adjust:100.04%;ascent-override:106.56%;descent-override:29.99%;line-gap-override:0%}

:root{
  --c-stage:#1E3585;        /* granat Crystal AB */
  --c-ink:#101A3A;
  --c-on-stage:#FFFFFF;
  --c-on-stage-prose:rgba(255,255,255,.9);
  --c-gold:#E8C9A6;         /* nadtytuł pracowni na ciemnym (makieta) */
  --c-prac-bg:#1A0F0D;      /* ciepła ciemna baza pracowni (makieta) */
  --c-shop-shade:10,18,58;  /* cień na zdjęciu sklepu */
  --c-prac-shade:26,12,10;  /* cień na zdjęciu pracowni */
  --c-whatsapp:#25D366;
  --f-display:'Playfair Display','Playfair Display Fallback','Playfair Display Fallback Android',Georgia,'Times New Roman',serif;
  --f-text:'Manrope','Manrope Fallback','Manrope Fallback Android',Arial,sans-serif;
  --gutter:24px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
html{background:linear-gradient(180deg,var(--c-prac-bg) 0%,var(--c-prac-bg) 50%,var(--c-stage) 50%,var(--c-stage) 100%)}
body{margin:0;background:transparent;color:var(--c-on-stage);font-family:var(--f-text);font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased}
img{display:block}
a{color:inherit}

.hero{position:relative;height:100vh;height:100svh;min-height:600px;overflow:hidden;background:var(--c-stage)}

/* Połowy */
.half{position:absolute;inset:0;overflow:hidden;cursor:pointer}
.half__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.half__shade{position:absolute;inset:0;pointer-events:none}
.half__text{position:absolute;left:var(--gutter);right:var(--gutter);display:flex;flex-direction:column;gap:10px;text-shadow:0 1px 12px rgba(0,0,0,.35)}

.half--shop .half__img{object-position:88% 40%;transform:translateY(22vh)}
.half--shop .half__shade{background:linear-gradient(180deg,rgba(var(--c-shop-shade),0) 55%,rgba(var(--c-shop-shade),.5) 72%,rgba(var(--c-shop-shade),.88) 100%)}
.half--shop .half__text{bottom:var(--gutter)}

.half--prac{background:var(--c-prac-bg);clip-path:polygon(0 0,100% 0,100% 50%,0 58%)}
.half--prac .half__img{height:58%;object-position:30% 45%}
.half--prac .half__shade{height:58%;background:linear-gradient(180deg,rgba(var(--c-prac-shade),.55) 0%,rgba(var(--c-prac-shade),.25) 30%,rgba(var(--c-prac-shade),.82) 80%)}
.half--prac .half__text{top:24%;gap:8px;text-shadow:none}

/* Typografia */
.eyebrow{font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--c-gold)}
.brand{font-family:var(--f-display);font-size:22px;font-weight:600;line-height:1.2}
.title{margin:0;font-family:var(--f-display);font-size:32px;font-weight:500;line-height:1.05}
.lead{margin:0;font-size:14px;line-height:1.5;color:var(--c-on-stage-prose)}
.half--prac .lead{color:rgba(255,255,255,.88)}

/* Przyciski — białe na ciemnym (DESIGN.md §5.1) */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:48px;padding:0 20px;border-radius:999px;background:#fff;color:var(--c-ink);font-size:14px;font-weight:700;text-decoration:none;text-shadow:none;margin-top:4px;transition:transform .15s ease,box-shadow .15s ease}
.btn:hover{transform:translateY(-1px);box-shadow:0 8px 24px rgba(0,0,0,.25)}
.btn--shop{color:var(--c-stage);align-self:stretch}
.btn--wa{align-self:flex-start;padding-left:16px;margin-top:8px}
.btn svg{flex:none}

/* Nagłówek */
.top{position:absolute;top:0;left:0;right:0;z-index:3;height:64px;display:flex;align-items:center;justify-content:space-between;padding:0 16px 0 20px}
.top__home{display:block;line-height:0}
.top__logo{height:34px;width:auto}
.top__tel{display:flex;align-items:center;gap:8px;min-height:44px;padding:0 4px;color:rgba(255,255,255,.75);text-decoration:none;font-size:12px;letter-spacing:.04em;font-weight:400}
.top__tel:hover{color:#fff}

@media (min-width:900px){
  :root{--gutter:64px}
  .hero{min-height:680px}
  .half__text{max-width:440px;gap:14px;right:auto}
  .half--shop .half__img{object-position:center 30%;transform:none;transform-origin:right center;will-change:transform}
  .half--shop .half__shade{background:linear-gradient(180deg,rgba(var(--c-shop-shade),0) 35%,rgba(var(--c-shop-shade),.45) 62%,rgba(var(--c-shop-shade),.85) 100%)}
  .half--shop .half__text{left:auto;right:calc(var(--gutter) + 80px);bottom:72px;will-change:transform,opacity}
  .half--prac{clip-path:polygon(0 0,57% 0,43% 100%,0 100%);will-change:clip-path}
  .half--prac .half__img{width:66%;height:100%;object-position:40% 50%;transform-origin:left center;will-change:transform}
  .half--prac .half__shade{height:100%;background:linear-gradient(90deg,rgba(var(--c-prac-shade),.85) 0%,rgba(var(--c-prac-shade),.45) 40%,rgba(var(--c-prac-shade),.2) 62%)}
  .half--prac .half__text{top:auto;bottom:72px;gap:14px;will-change:transform,opacity}
  .eyebrow{font-size:13px}
  .brand{font-size:28px}
  .title{font-size:64px;line-height:1.02}
  .lead{font-size:17px}
  .btn{height:56px;padding:0 32px;font-size:16px;margin-top:8px}
  .btn--shop{align-self:flex-start}
  .btn--wa{padding:0 28px 0 22px}
  .btn svg{width:22px;height:22px}
  /* Ciemny granat w prawym górnym rogu pod numerem telefonu. Leży w warstwie sklepu,
     a pracownia (clip-path) jest nad nią, więc nie wchodzi na czerwone zdjęcie. */
  .half--shop::after{content:"";position:absolute;top:0;right:0;width:46%;height:260px;background:radial-gradient(ellipse at top right,rgba(16,26,58,.75) 0%,rgba(16,26,58,.4) 45%,rgba(16,26,58,0) 72%);pointer-events:none}
  .top{height:88px;padding:0 var(--gutter)}
  .top__logo{height:44px}
  .top__tel{height:44px;padding:0 4px;color:#fff;font-size:15px;font-weight:500;text-shadow:0 1px 8px rgba(0,0,0,.4)}
  .top__tel:hover{color:var(--c-gold)}
}

@media (prefers-reduced-motion:reduce){
  .btn{transition:none}
}