/* Morgenkruste motion: photographic depth, one craft sequence, tactile products. */
:root {
  --motion-ease: cubic-bezier(.22, 1, .36, 1);
  --motion-quiet: cubic-bezier(.2, .65, .3, 1);
}

.public-header {
  transition: background-color 220ms ease, box-shadow 220ms ease;
}
.public-header.is-scrolled {
  background: #faf7f0f5;
  box-shadow: 0 5px 24px #39271a08;
}
.public-header .btn, main .btn {
  transition: background-color 220ms ease, border-color 220ms ease,
    box-shadow 220ms ease, transform 220ms var(--motion-quiet);
}
.btn.primary:hover { box-shadow: 0 4px 14px #8241211c; }
.icon-btn, .favorite, .tab {
  transition: background-color 220ms ease, color 220ms ease, border-color 220ms ease;
}
.role-menu { animation: menu-arrive 220ms var(--motion-ease) both; }
@keyframes menu-arrive {
  from { opacity: 0; transform: translateY(-5px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Separate planes keep copy still and keep entrance, scroll and tilt independent. */
.hero {
  grid-template-columns: 43% 53%;
  gap: 4%;
  max-width: 1650px;
  margin: 0 auto;
  padding: 0 4.3%;
  min-height: 650px;
  max-height: 780px;
}
.hero-copy { padding: 60px 0 54px; }
.hero h1 { font-size: clamp(44px, 4.65vw, 72px); line-height: 1.12; }
.hero-line { display: block; }
.hero-description { line-height: 1.75; margin: 28px 0 32px; }
.hero-visual {
  position: relative;
  perspective: 1400px;
  margin: 28px 0 36px;
  min-width: 0;
}
.hero-scroll-plane, .hero-intro-plane, .hero-depth-surface { height: 100%; }
.hero-scroll-plane {
  transform-style: preserve-3d;
  transform: translate3d(0, var(--hero-y, 0px), 0) scale(var(--hero-scale, 1));
  transform-origin: 50% 70%;
}
.hero-intro-plane, .hero-depth-surface { transform-style: preserve-3d; }
.hero-depth-surface {
  position: relative;
  transform: rotateX(var(--hero-rx, 0deg)) rotateY(var(--hero-ry, 0deg));
}
.hero-photo {
  height: 100%;
  margin: 0;
  border-radius: 7px;
  box-shadow: 0 20px 35px -25px #49301a45;
}
.hero-photo > img { transition: none; transform: none; object-position: 49% center; }
.hero-photo:hover > img { transform: none; }
.hero-visual::after {
  content: '';
  position: absolute;
  bottom: -14px;
  left: 9%;
  right: 9%;
  height: 20px;
  background: #4b321a15;
  filter: blur(14px);
  border-radius: 50%;
  pointer-events: none;
  z-index: -1;
}
.hero-depth-surface > .photo-caption {
  bottom: 28px;
  left: -24px;
  right: 24px;
  color: var(--ink);
  text-shadow: none;
  transform: translateZ(32px);
  gap: 18px;
}
.photo-caption .label {
  background: #fffaf0;
  border: 1px solid #e7dfd3;
  backdrop-filter: none;
  padding: 17px 22px;
  border-radius: 4px;
  box-shadow: 0 10px 24px #30251d12;
  line-height: 1.65;
  font-size: 12px;
}
.photo-caption .label b { font-size: 21px; margin-bottom: 3px; }
.photo-caption > span { color: #fffaf0; text-shadow: 0 1px 8px #30251d80; }
.motion-managed .fade-in { animation: none; }
.hero-enter .hero-copy > .eyebrow,
.hero-enter .hero-line,
.hero-enter .hero-description,
.hero-enter .hero-buttons,
.hero-enter .hero-bottom {
  animation: hero-copy-arrive 800ms var(--motion-ease) both;
}
.hero-enter .hero-line:first-child { animation-delay: 70ms; }
.hero-enter .hero-line:last-child { animation-delay: 150ms; }
.hero-enter .hero-description { animation-delay: 190ms; }
.hero-enter .hero-buttons { animation-delay: 230ms; }
.hero-enter .hero-bottom { animation-delay: 270ms; }
.hero-enter .hero-intro-plane { animation: hero-photo-arrive 1050ms var(--motion-ease) both; }
@keyframes hero-copy-arrive {
  from { opacity: 0; transform: translate3d(0, 14px, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}
@keyframes hero-photo-arrive {
  from { opacity: .35; transform: translate3d(0, 18px, -30px) rotateY(-1.2deg); }
  to { opacity: 1; transform: translate3d(0, 0, 0) rotateY(0); }
}

/* The only cinematic scroll moment: an authentic, generously framed workshop. */
.craft-section {
  grid-template-columns: .92fr 1fr;
  gap: 10%;
  align-items: center;
  padding-block: 100px;
}
.craft-frame {
  position: relative;
  height: 580px;
  overflow: hidden;
  border-radius: 6px;
  background: var(--pale);
}
.craft-frame > img {
  width: 100%;
  height: 100%;
  object-position: center 62%;
  transform: translate3d(0, var(--craft-y, 0px), 0) scale(var(--craft-scale, 1.04));
}
.craft-copy h2 { line-height: 1.28; }
.craft-copy p { line-height: 1.8; }
.motion-reveal {
  opacity: 0;
  transform: translate3d(0, 16px, 0);
  transition: opacity 650ms var(--motion-quiet), transform 650ms var(--motion-ease);
  transition-delay: var(--reveal-delay, 0ms);
}
.motion-reveal.is-visible { opacity: 1; transform: translate3d(0, 0, 0); }

/* Product geometry is composed once, so pointer tilt never overwrites hover. */
.product-card {
  --card-rx: 0deg;
  --card-ry: 0deg;
  --card-lift: 0px;
  transform: perspective(1000px) translate3d(0, var(--card-lift), 0)
    rotateX(var(--card-rx)) rotateY(var(--card-ry));
  transition: box-shadow 320ms ease, border-color 320ms ease;
}
.product-card:hover { transform: perspective(1000px) translate3d(0, var(--card-lift), 0)
  rotateX(var(--card-rx)) rotateY(var(--card-ry)); }
.product-photo img { transition: transform 400ms var(--motion-quiet); }
@media (hover: hover) and (pointer: fine) {
  .product-card:hover { border-color: #d8c9b6; box-shadow: 0 12px 30px -12px #39271a28; }
  .product-card:hover .product-photo img { transform: scale(1.025); }
}
.product-card:focus-within { border-color: #bf9471; }
.product-card img:not(.product-photo img) { transform: none; }

@media (max-width: 1150px) {
  .hero { height: 640px; min-height: 560px; grid-template-columns: 45% 51%; }
  .hero h1 { font-size: 52px; }
  .hero-depth-surface > .photo-caption { left: -14px; right: 16px; }
  .photo-caption > span { display: none; }
  .craft-frame { height: 410px; }
}
@media (max-width: 980px) {
  .public-header .header-nav { display: none; }
  .public-header .mobile-menu-btn { display: flex; }
}
@media (max-width: 900px) {
  .hero h1 { font-size: 44px; }
  .hero-copy { padding-block: 44px; }
  .hero-description { font-size: 15px; }
  .craft-section { gap: 7%; padding-block: 70px; }
  .craft-frame { height: 380px; }
}
@media (max-width: 800px) {
  .hero { height: 560px; min-height: 530px; padding-inline: 5%; gap: 5%; grid-template-columns: 45% 50%; }
  .hero-visual { margin: 24px 0 30px; }
  .hero h1 { font-size: 41px; }
  .hero-depth-surface > .photo-caption { bottom: 18px; left: -12px; right: 12px; }
  .photo-caption .label { padding: 12px 15px; font-size: 11px; }
  .photo-caption .label b { font-size: 19px; }
}
@media (max-width: 600px) {
  .hero { display: flex; flex-direction: column; height: auto; min-height: 0; max-height: none; padding-inline: 6%; gap: 0; }
  .hero-copy { padding: 42px 0 32px; }
  .hero h1 { font-size: clamp(40px, 11.8vw, 53px); }
  .hero-description { margin-block: 22px 26px; font-size: 16px; }
  .hero-buttons { gap: 10px; }
  .hero-buttons .btn { padding: 12px 14px; }
  .hero-visual { height: 350px; margin: 0 0 27px; perspective: none; }
  .hero-depth-surface > .photo-caption { left: 14px; right: 14px; bottom: 16px; transform: none; }
  .hero-photo { border-radius: 5px; }
  .photo-caption .label { font-size: 12px; padding: 12px 16px; }
  .hero-visual::after { display: none; }
  .craft-section { grid-template-columns: 1fr; padding-block: 55px; gap: 32px; }
  .craft-frame { height: 400px; }
  .craft-frame > img { transform: none; }
  .craft-copy h2 { font-size: 34px; }
}
@media (hover: none), (pointer: coarse) {
  .product-card:hover .product-photo img { transform: none; }
  .product-card:hover { box-shadow: none; }
}
@media (max-width: 360px) {
  .public-header { padding-inline: 4%; gap: 8px; }
  .public-header .brand { gap: 8px; }
  .public-header .brand-mark { width: 25px; height: 29px; }
  .public-header .brand-type { font-size: 18px; }
  .public-header .brand-type small { font-size: 7px; letter-spacing: .22em; }
  .public-header .header-actions { gap: 4px; }
  .public-header .header-actions .icon-btn { width: 32px; height: 34px; }
  .public-header .role-toggle { min-width: 32px; padding: 5px; }
  .demo-bar { padding-inline: 4%; }
  .demo-label { gap: 5px; font-size: 10px; }
  .demo-label b { font-size: 9px; padding-inline: 4px; }
  .demo-label span { font-size: 9px; }
  .demo-reset { font-size: 10px; padding: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .motion-reveal { opacity: 1; transform: none; }
  .hero-scroll-plane, .hero-intro-plane, .hero-depth-surface,
  .craft-frame > img, .product-card, .product-card:hover,
  .product-card:hover .product-photo img, .btn:hover { transform: none; }
  .hero-depth-surface > .photo-caption { transform: none; }
}