/* Print Station — Modern Redesign */

/* ── Reset & Base ── */
html {
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}

* { font-family: 'DM Sans', sans-serif; }
.font-serif { font-family: 'Fraunces', serif; }

/* ── Custom Properties ── */
:root {
  --brand: #1a1f36;
  --brand-dark: #111427;
  --brand-glow: rgba(26, 31, 54, .45);
  /* --accent: defined in page inline styles */
  /* --accent-glow: removed */
  --ease-out-expo: cubic-bezier(.16, 1, .3, 1);
  --ease-out-smooth: cubic-bezier(.19, 1, .22, 1);
  --ease-in-out-strong: cubic-bezier(.87, 0, .13, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
}

/* ── Brand colours ── */
.brand-blue { background-color: var(--brand); }
.brand-blue-dark { background-color: var(--brand-dark); }
.text-brand-blue { color: var(--brand); }
.brand-gold { background-color: var(--accent); }
.text-brand-gold { color: var(--accent); }

/* ── Page entrance (applied to main content, not body, to preserve fixed positioning) ── */

/* ── Glassmorphism Header ── */
.glass-header {
  background: #fff;
  border-bottom: 1px solid rgba(0, 0, 0, .05);
  transition: box-shadow .3s ease;
}
.glass-header.scrolled {
  box-shadow: 0 1px 30px rgba(0, 0, 0, .08);
}

/* ── Hero ── */
.hero-display {
  font-size: clamp(3rem, 8vw, 8rem);
  line-height: .9;
  letter-spacing: -.03em;
}

.hero-slide {
  transition: opacity .8s var(--ease-out-smooth);
}

/* Hero text stagger */
.hero-slide .hero-content > * {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity .7s var(--ease-out-expo), transform .7s var(--ease-out-expo);
}
.hero-slide.active .hero-content > *:nth-child(1) { opacity: 1; transform: translateY(0); transition-delay: .15s; }
.hero-slide.active .hero-content > *:nth-child(2) { opacity: 1; transform: translateY(0); transition-delay: .3s; }
.hero-slide.active .hero-content > *:nth-child(3) { opacity: 1; transform: translateY(0); transition-delay: .45s; }
.hero-slide.active .hero-content > *:nth-child(4) { opacity: 1; transform: translateY(0); transition-delay: .6s; }

/* Ken Burns */
.hero-slide img.hero-bg {
  transition: transform 10s linear;
  transform: scale(1);
}
.hero-slide.active img.hero-bg {
  transform: scale(1.1);
}

/* Hero progress */
@keyframes heroProgress {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}
.hero-progress-bar {
  transform-origin: left;
}

/* ── Section number labels ── */
.section-number {
  font-size: clamp(0.75rem, 1vw, 0.875rem);
  letter-spacing: .15em;
  writing-mode: vertical-lr;
  transform: rotate(180deg);
  position: sticky;
  top: 10rem;
}

/* ── Scroll Reveal System ── */
[data-reveal] {
  opacity: 0;
  transform: translateY(50px);
  transition: opacity .9s var(--ease-out-expo), transform .9s var(--ease-out-expo);
}
[data-reveal].revealed {
  opacity: 1;
  transform: translateY(0);
}
[data-reveal="left"] { transform: translateX(-50px); }
[data-reveal="left"].revealed { transform: translateX(0); }
[data-reveal="right"] { transform: translateX(50px); }
[data-reveal="right"].revealed { transform: translateX(0); }
[data-reveal="scale"] { transform: scale(.92); }
[data-reveal="scale"].revealed { transform: scale(1); }

/* Staggered children */
[data-reveal-stagger] > * {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity .7s var(--ease-out-expo), transform .7s var(--ease-out-expo);
}
[data-reveal-stagger].revealed > * { opacity: 1; transform: translateY(0); }
[data-reveal-stagger].revealed > *:nth-child(1) { transition-delay: 0ms; }
[data-reveal-stagger].revealed > *:nth-child(2) { transition-delay: 120ms; }
[data-reveal-stagger].revealed > *:nth-child(3) { transition-delay: 240ms; }
[data-reveal-stagger].revealed > *:nth-child(4) { transition-delay: 360ms; }
[data-reveal-stagger].revealed > *:nth-child(5) { transition-delay: 480ms; }
[data-reveal-stagger].revealed > *:nth-child(6) { transition-delay: 600ms; }

/* ── Button glow effect ── */
.btn-glow {
  position: relative;
  overflow: visible;
  transition: transform .25s var(--ease-out-expo), box-shadow .3s ease;
}
.btn-glow::before {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: inherit;
  background: var(--brand);
  opacity: 0;
  filter: blur(16px);
  transition: opacity .4s ease;
  z-index: -1;
}
.btn-glow:hover::before { opacity: .5; }
.btn-glow:hover { transform: translateY(-2px); }
.btn-glow:active { transform: scale(.97); transition-duration: .1s; }

/* White variant */
.btn-glow-white::before { background: #fff; }

/* ── Button fill sweep ── */
.btn-fill {
  position: relative;
  overflow: hidden;
  z-index: 1;
  transition: color .4s var(--ease-in-out-strong);
}
.btn-fill::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .4s var(--ease-in-out-strong);
}
.btn-fill:hover::after {
  transform: scaleX(1);
  transform-origin: left;
}
.btn-fill-blue::after { background: var(--brand); }
.btn-fill-blue:hover { color: #fff; }
.btn-fill-white::after { background: #fff; }
.btn-fill-white:hover { color: #111; }

/* ── Card hover ── */
.card-hover {
  transition: transform .6s var(--ease-out-expo), box-shadow .6s var(--ease-out-expo);
}
.card-hover:hover {
  transform: translateY(-8px);
  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.12);
}
.card-hover .card-overlay {
  opacity: 0;
  transition: opacity .4s var(--ease-out-expo);
}
.card-hover:hover .card-overlay { opacity: 1; }
.card-hover .card-img {
  transition: transform .7s var(--ease-out-expo);
}
.card-hover:hover .card-img { transform: scale(1.06); }

/* ── Finish images ── */
.finish-img { overflow: hidden; }
.finish-img img { transition: transform .7s var(--ease-out-expo); }
.finish-img:hover img { transform: scale(1.1); }

/* ── Bento finish cards ── */
.bento-finish {
  cursor: pointer;
}

/* ── Portfolio cards (Pascal-inspired) ── */
.portfolio-card {
  cursor: pointer;
  transition: transform .5s var(--ease-out-expo), box-shadow .5s var(--ease-out-expo);
}
.portfolio-card:hover {
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.1);
}
.portfolio-btn {
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* ── Creative finish text effects ── */

/* Foil Stamping — metallic gradient shimmer */
.text-foil {
  background: linear-gradient(
    105deg,
    #b8860b 0%, #ffd700 20%, #fffacd 35%,
    #ffd700 50%, #b8860b 65%, #ffd700 80%, #fffacd 100%
  );
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: foilShimmer 4s ease-in-out infinite;
}
@keyframes foilShimmer {
  0% { background-position: 100% 50%; }
  50% { background-position: 0% 50%; }
  100% { background-position: 100% 50%; }
}

/* Embossing — raised 3D look */
.text-emboss {
  color: #4a4a4a;
  text-shadow:
    0 1px 0 #555,
    0 2px 0 #4a4a4a,
    0 3px 0 #444,
    0 4px 6px rgba(0, 0, 0, .4),
    0 0 10px rgba(255, 255, 255, .06);
  -webkit-text-fill-color: #555;
}
.bento-finish:hover .text-emboss {
  text-shadow:
    0 1px 0 #666,
    0 2px 0 #5a5a5a,
    0 3px 0 #555,
    0 5px 8px rgba(0, 0, 0, .5),
    0 0 15px rgba(255, 255, 255, .08);
}

/* Spot UV — glossy shine sweep */
.text-spot-uv {
  position: relative;
  color: #fff;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke: 0;
  background: linear-gradient(90deg, #fff 0%, #fff 100%);
  -webkit-background-clip: text;
  background-clip: text;
}
.text-spot-uv::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  background: linear-gradient(
    120deg,
    transparent 30%,
    rgba(255, 255, 255, .8) 48%,
    rgba(255, 255, 255, 1) 50%,
    rgba(255, 255, 255, .8) 52%,
    transparent 70%
  );
  background-size: 250% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: spotUVShine 3s ease-in-out infinite;
}
@keyframes spotUVShine {
  0% { background-position: 150% 50%; }
  100% { background-position: -50% 50%; }
}

/* Die Cutting — outline / cut-out effect */
.text-die-cut {
  color: transparent;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke: 1.5px #fff;
  transition: -webkit-text-stroke .3s ease;
}
.bento-finish:hover .text-die-cut {
  -webkit-text-stroke: 1.5px #93c5fd;
}

/* UV Stickers — vibrant neon glow */
.text-uv-sticker {
  color: #a855f7;
  text-shadow:
    0 0 10px rgba(168, 85, 247, .6),
    0 0 30px rgba(168, 85, 247, .3),
    0 0 60px rgba(168, 85, 247, .15);
  -webkit-text-fill-color: #c084fc;
  transition: text-shadow .3s ease;
}
.bento-finish:hover .text-uv-sticker {
  text-shadow:
    0 0 15px rgba(168, 85, 247, .8),
    0 0 40px rgba(168, 85, 247, .5),
    0 0 80px rgba(168, 85, 247, .25);
}

/* Edge Colouring — gradient edge border on text */
.text-edge-colour {
  color: #fff;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke: 0;
  background: linear-gradient(to bottom, #fff 60%, #3b82f6 100%);
  -webkit-background-clip: text;
  background-clip: text;
}

/* ── Marquee ── */
@keyframes marquee {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
.marquee-track {
  display: flex;
  flex-shrink: 0;
  gap: 0;
  animation: marquee 30s linear infinite;
}
.marquee-track > * {
  flex-shrink: 0;
  white-space: nowrap;
}
.marquee-track:hover { animation-play-state: paused; }

/* ── Counter ── */
.stat-number { font-variant-numeric: tabular-nums; }

/* ── Parallax image ── */
.parallax-wrap {
  overflow: hidden;
}
.parallax-img {
  transition: transform .1s linear;
  will-change: transform;
}

/* ── Horizontal rule animated ── */
.hr-reveal {
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 1s var(--ease-out-expo);
}
.revealed .hr-reveal,
.hr-reveal.revealed { transform: scaleX(1); }

/* ── Checklist animation ── */
.check-item { position: relative; padding-left: 1.75rem; }
.check-item::before {
  content: '\2713';
  position: absolute;
  left: 0;
  color: #60a5fa;
  font-weight: 700;
  opacity: 0;
  transform: scale(0);
  transition: opacity .3s var(--ease-out-expo), transform .3s var(--ease-out-expo);
}
.revealed .check-item::before { opacity: 1; transform: scale(1); }
.revealed .check-item:nth-child(1)::before { transition-delay: .1s; }
.revealed .check-item:nth-child(2)::before { transition-delay: .2s; }
.revealed .check-item:nth-child(3)::before { transition-delay: .3s; }
.revealed .check-item:nth-child(4)::before { transition-delay: .4s; }
.revealed .check-item:nth-child(5)::before { transition-delay: .5s; }
.revealed .check-item:nth-child(6)::before { transition-delay: .6s; }

/* ── Sticky CTA ── */
@keyframes subtlePulse {
  0%, 100% { box-shadow: 0 4px 20px var(--brand-glow); }
  50% { box-shadow: 0 4px 35px var(--brand-glow); }
}
.sticky-cta {
  animation: subtlePulse 3s ease-in-out infinite;
  transition: transform .25s var(--ease-out-expo);
}
.sticky-cta:hover {
  transform: scale(1.06);
  animation: none;
  box-shadow: 0 8px 35px var(--brand-glow);
}

/* ── Footer link ── */
.footer-link { position: relative; display: inline; }
.footer-link::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 1px;
  background: #fff;
  transition: width .3s var(--ease-out-expo);
}
.footer-link:hover::after { width: 100%; }

/* ── Form focus ── */
input, textarea {
  transition: border-color .3s ease, box-shadow .3s ease;
}

/* ── Scroll progress bar at top ── */
.scroll-progress {
  transform-origin: left;
  transform: scaleX(0);
  transition: none;
}

/* ── Image mask reveal ── */
.img-reveal {
  clip-path: inset(0 100% 0 0);
  transition: clip-path 1s var(--ease-out-expo);
}
.img-reveal.revealed {
  clip-path: inset(0 0% 0 0);
}

/* ── Large display label ── */
.display-label {
  font-size: clamp(0.65rem, .9vw, 0.8rem);
  letter-spacing: .25em;
  text-transform: uppercase;
}

/* ── Paper texture background ── */
.paper-texture {
  position: relative;
  background-color: #fcfcfa;
}
.paper-texture::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: .35;
  background-image:
    radial-gradient(circle at 20% 35%, #e8e4df 0.5px, transparent 0.5px),
    radial-gradient(circle at 75% 15%, #ddd9d3 0.5px, transparent 0.5px),
    radial-gradient(circle at 45% 80%, #e5e1dc 0.5px, transparent 0.5px),
    radial-gradient(circle at 90% 60%, #ddd9d3 0.5px, transparent 0.5px),
    radial-gradient(circle at 10% 70%, #e8e4df 0.5px, transparent 0.5px),
    radial-gradient(circle at 60% 45%, #e2ded8 0.5px, transparent 0.5px);
  background-size: 80px 80px, 120px 100px, 100px 120px, 90px 110px, 110px 90px, 70px 130px;
}
.paper-texture > * { position: relative; z-index: 1; }

/* ── Textured card hover overlay ── */
.card-texture-hover .card-texture {
  position: absolute;
  inset: 0;
  z-index: 2;
  opacity: 0;
  transition: opacity .5s var(--ease-out-expo);
  background:
    radial-gradient(circle at 30% 40%, rgba(255,255,255,.08) 0%, transparent 50%),
    radial-gradient(circle at 70% 60%, rgba(255,255,255,.06) 0%, transparent 50%);
  mix-blend-mode: overlay;
  pointer-events: none;
}
.card-texture-hover .card-texture-img {
  position: absolute;
  inset: 0;
  z-index: 3;
  opacity: 0;
  transition: opacity .5s var(--ease-out-expo);
  pointer-events: none;
}
.card-texture-hover .card-texture-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0) contrast(1.2);
  mix-blend-mode: soft-light;
  opacity: .4;
}
.card-texture-hover:hover .card-texture,
.card-texture-hover:hover .card-texture-img {
  opacity: 1;
}

/* ── Before/after comparison slider ── */
.ba-slider {
  position: relative;
  overflow: hidden;
  cursor: col-resize;
  user-select: none;
  -webkit-user-select: none;
}
.ba-slider .ba-before,
.ba-slider .ba-after {
  position: absolute;
  inset: 0;
}
.ba-slider .ba-before img,
.ba-slider .ba-after img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ba-slider .ba-before {
  z-index: 2;
  clip-path: inset(0 0 0 0);
}
.ba-slider .ba-handle {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 3px;
  background: #fff;
  z-index: 5;
  left: 50%;
  transform: translateX(-50%);
  box-shadow: 0 0 10px rgba(0,0,0,.3);
}
.ba-slider .ba-handle::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 10px rgba(0,0,0,.2);
}
.ba-slider .ba-handle::after {
  content: '\2194';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 18px;
  color: #666;
  z-index: 1;
}
.ba-slider .ba-label {
  position: absolute;
  bottom: 12px;
  z-index: 4;
  padding: 4px 12px;
  border-radius: 100px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  pointer-events: none;
}
.ba-slider .ba-label-before {
  right: 12px;
  background: rgba(0,0,0,.6);
  color: #fff;
}
.ba-slider .ba-label-after {
  left: 12px;
  background: rgba(255,255,255,.9);
  color: #333;
}

/* ── Selection ── */
::selection {
  background-color: var(--brand);
  color: #fff;
}