/* ============================================
   Custom styles for Aleksandra Stawiarz Portfolio
   Warm Sophistication — Refine A: clearer sage/terracotta roles
   ============================================ */

:root {
  --warm-cream: #FAF8F5;
  --warm-beige: #F4EDE4;
  --border-subtle: #E8E0D6;
  --charcoal: #2C2522;
  --charcoal-muted: #5C534C;
  --sage-50: #F0F4F2;
  --sage-100: #E2EAE6;
  --sage: #5C7C6F;
  --sage-dark: #4A6359;
  --sage-ink: #3A4F47;
  --terracotta-50: #F8F1EF;
  --terracotta-100: #F0E4DF;
  --terracotta: #B17D6D;
  --terracotta-dark: #9A6859;
  --terracotta-ink: #7D5246;
  --success-soft: #D8E8E0;
  --success-ink: #2F5A48;
  --error-soft: #F5DCD6;
  --error-ink: #9B4A3C;
  --focus-ring: #5C7C6F;
  --shadow-charcoal: 44, 37, 34;
}

/* Smooth scroll for anchor links */
html {
  scroll-behavior: smooth;
  overflow-x: clip;
}



/* ============================================
   Page gloss — połysk on brand colors only
   Cream + sage/terracotta; scales by viewport
   ============================================ */
.page-gloss {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
  /* iOS: cover safe areas / dynamic viewport */
  width: 100%;
  min-height: 100%;
  min-height: 100dvh;
}

/* Gentle brand-tinted light pools — positions use % so they reflow */
.page-gloss__wash {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse var(--gloss-a-w, 80%) var(--gloss-a-h, 60%) at var(--gloss-a-x, 85%) var(--gloss-a-y, 8%),
      rgba(240, 244, 242, 0.9) 0%,
      rgba(92, 124, 111, 0.07) 35%,
      transparent 62%),
    radial-gradient(ellipse var(--gloss-b-w, 70%) var(--gloss-b-h, 55%) at var(--gloss-b-x, 8%) var(--gloss-b-y, 88%),
      rgba(248, 241, 239, 0.85) 0%,
      rgba(177, 125, 109, 0.08) 38%,
      transparent 65%),
    radial-gradient(ellipse var(--gloss-c-w, 50%) var(--gloss-c-h, 40%) at 50% 42%,
      rgba(255, 255, 255, 0.35) 0%,
      transparent 70%);
  opacity: var(--gloss-wash-opacity, 1);
}

/* Moving specular gloss band (warm white, not steel) */
.page-gloss__sheen {
  position: absolute;
  inset: var(--gloss-sheen-inset, -40% -30%);
  background: linear-gradient(
    var(--gloss-angle, 115deg),
    transparent 0%,
    transparent calc(50% - var(--gloss-band, 12%)),
    rgba(255, 255, 255, 0) calc(50% - var(--gloss-band, 12%) + 4%),
    rgba(255, 253, 250, var(--gloss-peak, 0.55)) 50%,
    rgba(244, 237, 228, calc(var(--gloss-peak, 0.55) * 0.45)) calc(50% + 2%),
    rgba(255, 255, 255, 0) calc(50% + var(--gloss-band, 12%) - 4%),
    transparent calc(50% + var(--gloss-band, 12%)),
    transparent 100%
  );
  mix-blend-mode: soft-light;
  opacity: var(--gloss-sheen-opacity, 0.85);
  animation: page-gloss-sweep var(--gloss-duration, 14s) cubic-bezier(0.45, 0, 0.2, 1) infinite alternate;
  will-change: transform;
}

@keyframes page-gloss-sweep {
  from { transform: translate3d(var(--gloss-tx-from, -8%), var(--gloss-ty-from, 3%), 0) rotate(var(--gloss-rot-from, -1deg)); }
  to   { transform: translate3d(var(--gloss-tx-to, 9%), var(--gloss-ty-to, -4%), 0) rotate(var(--gloss-rot-to, 1deg)); }
}

/* Soft gloss on primary CTA surfaces */
a.bg-terracotta-700,
a[class*="bg-terracotta-700"] {
  background-image: linear-gradient(
    165deg,
    rgba(255, 255, 255, 0.22) 0%,
    rgba(255, 255, 255, 0.06) 28%,
    transparent 52%
  );
  background-blend-mode: soft-light;
}

/* —— Viewport tuning —— */

/* Phone portrait (≤640px): quieter, tighter band, less travel */
@media (max-width: 640px) {
  .page-gloss {
    --gloss-a-w: 95%;
    --gloss-a-h: 48%;
    --gloss-a-x: 70%;
    --gloss-a-y: 4%;
    --gloss-b-w: 90%;
    --gloss-b-h: 42%;
    --gloss-b-x: 20%;
    --gloss-b-y: 92%;
    --gloss-c-w: 70%;
    --gloss-c-h: 35%;
    --gloss-wash-opacity: 0.85;
    --gloss-sheen-opacity: 0.55;
    --gloss-peak: 0.4;
    --gloss-band: 16%;
    --gloss-angle: 125deg;
    --gloss-sheen-inset: -25% -40%;
    --gloss-duration: 18s;
    --gloss-tx-from: -5%;
    --gloss-tx-to: 5%;
    --gloss-ty-from: 1%;
    --gloss-ty-to: -2%;
    --gloss-rot-from: -0.5deg;
    --gloss-rot-to: 0.5deg;
  }

  a.bg-terracotta-700,
  a[class*="bg-terracotta-700"] {
    background-image: linear-gradient(
      165deg,
      rgba(255, 255, 255, 0.16) 0%,
      rgba(255, 255, 255, 0.04) 30%,
      transparent 55%
    );
  }
}

/* Large phone / small tablet */
@media (min-width: 641px) and (max-width: 767px) {
  .page-gloss {
    --gloss-a-x: 80%;
    --gloss-sheen-opacity: 0.7;
    --gloss-peak: 0.48;
    --gloss-band: 14%;
    --gloss-duration: 16s;
  }
}

/* Tablet */
@media (min-width: 768px) and (max-width: 1023px) {
  .page-gloss {
    --gloss-a-w: 75%;
    --gloss-a-h: 55%;
    --gloss-b-w: 65%;
    --gloss-sheen-opacity: 0.78;
    --gloss-peak: 0.52;
    --gloss-band: 13%;
    --gloss-duration: 15s;
    --gloss-tx-from: -7%;
    --gloss-tx-to: 7%;
  }
}

/* Desktop */
@media (min-width: 1024px) and (max-width: 1439px) {
  .page-gloss {
    --gloss-sheen-opacity: 0.85;
    --gloss-peak: 0.55;
    --gloss-band: 12%;
  }
}

/* Wide / ultra-wide: wider pools, keep sheen from looking sparse */
@media (min-width: 1440px) {
  .page-gloss {
    --gloss-a-w: 70%;
    --gloss-a-h: 55%;
    --gloss-b-w: 60%;
    --gloss-b-h: 50%;
    --gloss-c-w: 45%;
    --gloss-c-h: 38%;
    --gloss-sheen-opacity: 0.9;
    --gloss-peak: 0.58;
    --gloss-band: 10%;
    --gloss-sheen-inset: -45% -25%;
    --gloss-duration: 16s;
    --gloss-tx-from: -10%;
    --gloss-tx-to: 10%;
  }
}

/* Short landscape phones: quieter gloss */
@media (max-height: 480px) and (orientation: landscape) {
  .page-gloss {
    --gloss-b-y: 100%;
    --gloss-b-h: 30%;
    --gloss-sheen-opacity: 0.45;
    --gloss-wash-opacity: 0.7;
    --gloss-duration: 20s;
  }
}

/* Coarse pointer / touch: slightly softer peak (no hover to “discover”) */
@media (hover: none) and (pointer: coarse) {
  .page-gloss {
    --gloss-peak: min(var(--gloss-peak, 0.55), 0.45);
  }
}

/* Navbar polish */
#navbar {
  transition: box-shadow 0.2s ease, background-color 0.2s ease;
}

#navbar.scrolled {
  box-shadow:
    0 1px 0 0 rgba(var(--shadow-charcoal), 0.05),
    0 4px 12px -2px rgba(var(--shadow-charcoal), 0.07);
}

/* Nav link underline animation */
.nav-link {
  position: relative;
  padding-bottom: 2px;
}

.nav-link:after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 0;
  height: 2px;
  background-color: var(--sage);
  transition: width 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.nav-link:hover:after,
.nav-link.active:after {
  width: 100%;
}

.nav-link.active {
  color: var(--charcoal);
}

/* Mobile nav links */
.mobile-nav-link {
  transition: color 0.2s ease;
}

.mobile-nav-link:hover {
  color: var(--sage);
}

/* Reveal animation base (used by JS) */
.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.65s cubic-bezier(0.4, 0.0, 0.2, 1),
              transform 0.65s cubic-bezier(0.4, 0.0, 0.2, 1);
  will-change: opacity, transform;
}

.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Staggered reveal delays for grids */
.reveal:nth-child(2) { transition-delay: 80ms; }
.reveal:nth-child(3) { transition-delay: 150ms; }
.reveal:nth-child(4) { transition-delay: 220ms; }

/* Hero image subtle enhancement */
header img {
  transition: transform 700ms cubic-bezier(0.23, 1, 0.32, 1);
}

/* Elegant timeline / education vertical line (warm sage) */
#doswiadczenie .border-l-2,
section .border-l-2 {
  border-image: linear-gradient(to bottom, var(--border-subtle), var(--sage)) 1;
}

/* Education items */
section .border-l-2 > div {
  transition: all 0.2s ease;
}

/* Offer cards — semantic EN (sage) vs KO (terracotta) */
.offer-en {
  background-color: var(--sage-50);
  border-color: #D5E0DB;
}

.offer-en:hover {
  border-color: var(--sage);
  box-shadow:
    0 20px 25px -5px rgba(var(--shadow-charcoal), 0.06),
    0 8px 10px -6px rgba(var(--shadow-charcoal), 0.04);
}

.offer-ko {
  background-color: var(--terracotta-50);
  border-color: #E8D8D2;
}

.offer-ko:hover {
  border-color: var(--terracotta-dark);
  box-shadow:
    0 20px 25px -5px rgba(var(--shadow-charcoal), 0.06),
    0 8px 10px -6px rgba(var(--shadow-charcoal), 0.04);
}

/* Form inputs in the contact section */
#kontakt input,
#kontakt select,
#kontakt textarea {
  transition: all 0.2s ease;
  color: white;
}

#kontakt input::placeholder,
#kontakt textarea::placeholder {
  color: rgba(255, 255, 255, 0.72);
}

#kontakt input:focus,
#kontakt select:focus,
#kontakt textarea:focus {
  outline: none;
  background-color: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.55);
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.18);
}

#kontakt input:focus-visible,
#kontakt select:focus-visible,
#kontakt textarea:focus-visible,
#kontakt button:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

/* Form submit: stronger ink on white */
#kontakt button[type="submit"] {
  color: var(--sage-ink);
}

#kontakt button[type="submit"]:hover {
  color: var(--sage-ink);
}

/* Success / error states on dark form panel */
#form-success {
  animation: fadeInUp 0.4s ease forwards;
  background-color: rgba(216, 232, 224, 0.18);
  border-color: rgba(216, 232, 224, 0.45);
}

#form-error:not(.hidden) {
  color: #F5C4BA;
  background-color: rgba(155, 74, 60, 0.25);
  border: 1px solid rgba(245, 196, 186, 0.35);
  border-radius: 0.75rem;
  padding: 0.65rem 0.9rem;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Button micro interactions */
button, a[href^="#"] {
  transition: transform 0.15s cubic-bezier(0.4, 0.0, 0.2, 1),
              box-shadow 0.2s ease,
              background-color 0.2s ease,
              border-color 0.2s ease,
              color 0.2s ease;
}

button:active,
a[href^="#"]:active {
  transform: scale(0.985);
}

/* Global warm background base */
body {
  background-color: var(--warm-cream);
  color: var(--charcoal);
  overflow-x: clip;
}

/* Fluid hero title — fits narrow phones without clipping long Polish words */
.hero-title {
  font-size: clamp(1.875rem, 0.95rem + 4.2vw, 3.75rem);
  letter-spacing: -0.03em;
  max-width: 100%;
  overflow-wrap: break-word;
  word-break: normal;
  hyphens: manual;
}

/* Premium radius signature */
.rounded-3xl {
  border-radius: 1.25rem;
}

/* Default card hover (non-offer) */
.group {
  transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1);
}

.group:not(.offer-en):not(.offer-ko):hover {
  transform: translateY(-2px);
  box-shadow:
    0 20px 25px -5px rgba(var(--shadow-charcoal), 0.05),
    0 8px 10px -6px rgba(var(--shadow-charcoal), 0.04);
  border-color: var(--sage);
}

/* Photo hover zoom + shadow lift */
img {
  transition: transform 0.5s cubic-bezier(0.23, 1, 0.32, 1),
              box-shadow 0.5s ease;
}

.group:hover img {
  box-shadow: 0 25px 50px -12px rgba(var(--shadow-charcoal), 0.16);
}

/* Hero: vertical auto-scrolling short reviews under photo */
.hero-reviews__viewport {
  overflow: hidden;
  height: 11rem;
  mask-image: linear-gradient(
    to bottom,
    transparent 0%,
    #000 14%,
    #000 86%,
    transparent 100%
  );
  -webkit-mask-image: linear-gradient(
    to bottom,
    transparent 0%,
    #000 14%,
    #000 86%,
    transparent 100%
  );
}

.hero-reviews__track {
  display: flex;
  flex-direction: column;
  animation: hero-reviews-scroll 36s linear infinite;
}

.hero-reviews:hover .hero-reviews__track,
.hero-reviews:focus-within .hero-reviews__track {
  animation-play-state: paused;
}

.hero-reviews__set {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  padding-bottom: 0.625rem;
}

.hero-reviews__card {
  margin: 0;
  padding: 0.75rem 0.875rem;
  background: #fff;
  border: 1px solid var(--border-subtle);
  border-radius: 1rem;
  box-shadow: 0 1px 2px rgba(var(--shadow-charcoal), 0.04);
}

.hero-reviews__stars {
  display: block;
  margin: 0 0 0.35rem;
  font-size: 0.6875rem;
  line-height: 1;
  letter-spacing: 0.08em;
  color: #C4922A; /* amber-500 — same as #opinie */
}

.hero-reviews__quote {
  margin: 0;
  font-size: 0.8125rem;
  line-height: 1.45;
  color: var(--charcoal-muted);
}

.hero-reviews__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-top: 0.5rem;
}

.hero-reviews__name {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--charcoal);
}

.hero-reviews__tag {
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
}

.hero-reviews__tag--en {
  color: var(--sage-ink);
  background: var(--sage-50);
}

.hero-reviews__tag--ko {
  color: var(--terracotta-ink);
  background: var(--terracotta-50);
}

@keyframes hero-reviews-scroll {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(-50%);
  }
}

@media (min-width: 640px) {
  .hero-reviews__viewport {
    height: 12rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-reviews__viewport {
    height: auto;
    max-height: 11rem;
    overflow-y: auto;
    mask-image: none;
    -webkit-mask-image: none;
  }

  .hero-reviews__track {
    animation: none;
  }

  .hero-reviews__set + .hero-reviews__set {
    display: none;
  }
}

/* Compact supporting experience cards */
#doswiadczenie .bg-white.border {
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

#doswiadczenie .bg-white.border:hover {
  border-color: var(--sage);
  box-shadow:
    0 10px 15px -3px rgba(var(--shadow-charcoal), 0.05),
    0 4px 6px -4px rgba(var(--shadow-charcoal), 0.04);
}

/* Clean focus states (light surfaces) */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

/* Footer */
footer {
  font-feature-settings: "tnum";
  border-color: var(--border-subtle);
}

/* Section headings stay readable on narrow screens */
h2 {
  overflow-wrap: break-word;
}

/* text-balance support (Tailwind CDN fallback) */
.text-balance {
  text-wrap: balance;
}

/* Form select options readable on all platforms */
#kontakt select option {
  color: #2C2522;
  background: #fff;
}

/* FAQ details */
#faq summary::-webkit-details-marker {
  display: none;
}
#faq summary {
  list-style: none;
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  .reveal,
  img,
  .nav-link:after,
  #navbar {
    transition: none !important;
  }
  .reveal {
    opacity: 1;
    transform: none;
  }
  html {
    scroll-behavior: auto;
  }

  .page-gloss__sheen {
    animation: none !important;
    transform: none;
    opacity: 0.5;
  }
}