/* Digital E-Shop animation layer: lightweight, CSS-first, mobile-safe. */
:root {
  --des-orange: #ff6600;
  --des-gold: #ffb74d;
  --des-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

html { scroll-behavior: smooth; }
body { -webkit-tap-highlight-color: transparent; }

/* Kinetic hero typography */
.kinetic-title { perspective: 900px; }
.kinetic-word {
  display: inline-block;
  transform: translateY(28px) rotateX(22deg) scale(0.98);
  opacity: 0;
  filter: blur(8px);
  animation: desKineticIn 0.78s var(--des-ease) forwards;
  animation-delay: calc(var(--i, 0) * 76ms);
  transform-origin: 50% 80%;
}
.kinetic-word:nth-child(2n) { color: var(--des-orange); text-shadow: 0 16px 45px rgba(255,102,0,.18); }
.kinetic-word:nth-child(3n) { color: var(--des-gold); }
.kinetic-subtitle { opacity: 0; transform: translateY(16px); animation: desFadeLift .78s var(--des-ease) .45s forwards; }
.kinetic-cta { opacity: 0; transform: translateY(16px) scale(.98); animation: desFadeLift .75s var(--des-ease) .62s forwards; }
.kinetic-badge { opacity: 0; transform: translateY(14px) scale(.94); animation: desBadgeIn .65s var(--des-ease) forwards; animation-delay: calc(.76s + var(--i, 0) * 85ms); }

/* Ambient hero layers */
.des-hero-aurora {
  background:
    radial-gradient(circle at 20% 20%, rgba(255,102,0,.22), transparent 34%),
    radial-gradient(circle at 78% 26%, rgba(255,183,77,.18), transparent 32%),
    radial-gradient(circle at 50% 82%, rgba(59,130,246,.13), transparent 34%);
  filter: blur(2px);
  animation: desAurora 12s ease-in-out infinite alternate;
}
.des-float-token { animation: desFloat 7s ease-in-out infinite; }
.des-float-token:nth-child(2) { animation-delay: -2.4s; }
.des-float-token:nth-child(3) { animation-delay: -4.1s; }
.des-float-token:nth-child(4) { animation-delay: -1.2s; }

/* Scroll-triggered storytelling */
[data-reveal] {
  opacity: 0;
  transform: translateY(34px) scale(.985);
  filter: blur(7px);
  transition: opacity .75s var(--des-ease), transform .75s var(--des-ease), filter .75s var(--des-ease), box-shadow .3s ease, border-color .3s ease;
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform, filter;
}
[data-reveal].is-visible { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
[data-reveal="left"] { transform: translateX(-34px) scale(.985); }
[data-reveal="right"] { transform: translateX(34px) scale(.985); }
[data-reveal="zoom"] { transform: scale(.94); }
[data-reveal="left"].is-visible,
[data-reveal="right"].is-visible,
[data-reveal="zoom"].is-visible { transform: translateX(0) scale(1); }

/* Premium cards and micro-interactions */
.motion-card { transform-style: preserve-3d; }
.motion-card::after {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(135deg, rgba(255,102,0,.26), rgba(255,183,77,0), rgba(255,255,255,.12));
  opacity: 0;
  transition: opacity .32s ease;
}
.motion-card:hover::after { opacity: 1; }
.des-pressable { position: relative; overflow: hidden; transform: translateZ(0); }
.des-pressable:active { transform: scale(.975); }
.des-ripple {
  position: absolute;
  width: 14px;
  height: 14px;
  border-radius: 999px;
  pointer-events: none;
  background: rgba(255,255,255,.38);
  transform: translate(-50%, -50%) scale(1);
  animation: desRipple .62s ease-out forwards;
}
.des-shine { position: relative; overflow: hidden; }
.des-shine::before {
  content: "";
  position: absolute;
  inset: -120% auto -120% -60%;
  width: 42%;
  transform: rotate(18deg);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.42), transparent);
  opacity: 0;
}
.des-shine:hover::before { animation: desShine .9s ease; opacity: 1; }

/* Modal entrance and form focus polish */
#orderModal.flex > div { animation: desModalIn .42s var(--des-ease) both; }
#orderModal input:focus, #orderModal select:focus, #product-search:focus { transform: translateY(-1px); }
#priceBox:not(.hidden) { animation: desPricePop .32s var(--des-ease) both; }
#successView:not(.hidden) > div:first-child { animation: desSuccessPop .7s var(--des-ease) both; }

/* Header/mobile panel polish */
#main-header.header-scrolled { box-shadow: 0 14px 38px rgba(15, 23, 42, .10); }
.dark #main-header.header-scrolled { box-shadow: 0 18px 48px rgba(0, 0, 0, .22); }
#mobile-panel:not(.hidden) { animation: desMenuIn .28s var(--des-ease) both; }

/* Loading animation for order submit */
#submitBtn.is-submitting { cursor: wait; opacity: .82; }
#submitBtn.is-submitting #submitBtnText::after { content: ""; display: inline-block; width: .9em; animation: desDots 1.1s steps(4, end) infinite; }

@keyframes desKineticIn { to { opacity: 1; filter: blur(0); transform: translateY(0) rotateX(0) scale(1); } }
@keyframes desFadeLift { to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes desBadgeIn { to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes desAurora { from { transform: translate3d(-2%, -1%, 0) scale(1); } to { transform: translate3d(2%, 2%, 0) scale(1.07); } }
@keyframes desFloat { 0%, 100% { transform: translate3d(0,0,0) rotate(0deg); } 50% { transform: translate3d(0,-18px,0) rotate(5deg); } }
@keyframes desRipple { to { opacity: 0; transform: translate(-50%, -50%) scale(22); } }
@keyframes desShine { from { left: -65%; } to { left: 130%; } }
@keyframes desModalIn { from { opacity: 0; transform: translateY(18px) scale(.96); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes desMenuIn { from { opacity: 0; transform: translateY(-10px) scale(.98); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes desPricePop { from { opacity: 0; transform: translateY(8px) scale(.98); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes desSuccessPop { 0% { transform: scale(.72) rotate(-12deg); opacity: 0; } 70% { transform: scale(1.08) rotate(4deg); opacity: 1; } 100% { transform: scale(1) rotate(0); opacity: 1; } }
@keyframes desDots { 0% { content: ""; } 25% { content: "."; } 50% { content: ".."; } 75%,100% { content: "..."; } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .001ms !important; }
  [data-reveal], .kinetic-word, .kinetic-subtitle, .kinetic-cta, .kinetic-badge { opacity: 1 !important; transform: none !important; filter: none !important; }
  #bg-canvas, #cursor-orb { display: none !important; }
}

@media (max-width: 640px) {
  .kinetic-word { animation-delay: calc(var(--i, 0) * 48ms); }
  [data-reveal] { transform: translateY(22px); filter: blur(4px); }
}

/* Payment instructions readability */
.des-payment-instructions {
  color: #475569;
}
.dark .des-payment-instructions {
  color: #d4deee;
}
.des-payment-heading {
  color: #0f172a;
  margin: 0 0 0.75rem;
  font-size: 1.35rem;
  font-weight: 900;
  letter-spacing: -0.02em;
}
.dark .des-payment-heading {
  color: #ffffff;
  text-shadow: 0 0 22px rgba(255, 102, 0, 0.12);
}
.des-payment-line,
.des-payment-step {
  margin: 0 0 0.65rem;
  font-size: 1.05rem;
  line-height: 1.85;
}
.des-payment-phone {
  color: #ea580c !important;
  font-weight: 950;
  letter-spacing: 0.02em;
}
.dark .des-payment-phone {
  color: #ff9f45 !important;
  text-shadow: 0 0 18px rgba(255, 102, 0, 0.22);
}
.des-payment-rule {
  border: 0;
  height: 1px;
  margin: 1.5rem 0;
  background: rgba(15, 23, 42, 0.16);
}
.dark .des-payment-rule {
  background: rgba(255, 255, 255, 0.14);
}
.des-payment-step strong,
.des-payment-line strong:not(.des-payment-phone) {
  color: #0f172a;
}
.dark .des-payment-step strong,
.dark .des-payment-line strong:not(.des-payment-phone) {
  color: #ffffff;
}

/* About page */
.about-glow-card {
  position: relative;
  overflow: hidden;
}
.about-glow-card::before {
  content: "";
  position: absolute;
  inset: -40%;
  background: radial-gradient(circle at 30% 20%, rgba(255,102,0,.18), transparent 36%), radial-gradient(circle at 80% 0%, rgba(226,19,110,.12), transparent 34%);
  opacity: .8;
  pointer-events: none;
}
.about-glow-card > * {
  position: relative;
}



/* Light source-protection deterrents */
.source-protection-enabled body,
.source-protection-enabled img,
.source-protection-enabled a,
.source-protection-enabled button,
.source-protection-enabled .product-card,
.source-protection-enabled .reveal-on-scroll {
  -webkit-user-drag: none;
}
.source-protection-enabled body {
  -webkit-touch-callout: none;
}
.source-protection-enabled p,
.source-protection-enabled h1,
.source-protection-enabled h2,
.source-protection-enabled h3,
.source-protection-enabled h4,
.source-protection-enabled span,
.source-protection-enabled li,
.source-protection-enabled strong,
.source-protection-enabled small {
  -webkit-user-select: none;
  user-select: none;
}
.source-protection-enabled input,
.source-protection-enabled textarea,
.source-protection-enabled select,
.source-protection-enabled [contenteditable="true"] {
  -webkit-user-select: text;
  user-select: text;
}
.source-protection-toast {
  position: fixed;
  left: 50%;
  bottom: 22px;
  z-index: 99999;
  max-width: min(92vw, 430px);
  transform: translate(-50%, 18px) scale(.98);
  opacity: 0;
  pointer-events: none;
  padding: 12px 18px;
  border-radius: 999px;
  border: 1px solid rgba(255, 102, 0, .32);
  background: rgba(15, 23, 42, .92);
  color: #fff;
  font-weight: 800;
  font-size: 13px;
  line-height: 1.4;
  box-shadow: 0 18px 45px rgba(0, 0, 0, .25), 0 0 24px rgba(255, 102, 0, .16);
  backdrop-filter: blur(14px);
  transition: opacity .25s ease, transform .25s ease;
}
.source-protection-toast.show {
  opacity: 1;
  transform: translate(-50%, 0) scale(1);
}
@media (prefers-reduced-motion: reduce) {
  .source-protection-toast {
    transition: none;
  }
}

/* Compact Features Include cards */
.des-feature-preview-box {
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(15, 23, 42, 0.10);
  background: linear-gradient(180deg, rgba(248, 250, 252, 0.95), rgba(255, 255, 255, 0.86));
  border-radius: 1.25rem;
  padding: 0.95rem;
  min-height: 0;
}
.dark .des-feature-preview-box {
  border-color: rgba(255, 255, 255, 0.10);
  background: linear-gradient(180deg, rgba(11, 17, 33, 0.72), rgba(15, 23, 42, 0.55));
}
.des-feature-preview-item {
  display: grid;
  grid-template-columns: 1.35rem minmax(0, 1fr);
  align-items: start;
  gap: 0.35rem;
  color: #475569;
  font-size: 0.86rem;
  line-height: 1.45;
}
.dark .des-feature-preview-item {
  color: #a8b3c5;
}
.des-feature-preview-item span:last-child {
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.des-feature-dot {
  line-height: 1.45;
  text-align: center;
}
.des-feature-detail-box {
  border: 1px solid rgba(15, 23, 42, 0.10);
  background: linear-gradient(180deg, rgba(248, 250, 252, 0.98), rgba(255, 255, 255, 0.90));
  border-radius: 1.5rem;
  padding: 1.25rem;
}
.dark .des-feature-detail-box {
  border-color: rgba(255, 255, 255, 0.10);
  background: linear-gradient(180deg, rgba(11, 17, 33, 0.74), rgba(15, 23, 42, 0.60));
}
.des-feature-detail-list {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  gap: 0.7rem;
}
.des-feature-detail-item {
  display: grid;
  grid-template-columns: 1.45rem minmax(0, 1fr);
  align-items: start;
  gap: 0.55rem;
  min-height: 2.75rem;
  border: 1px solid rgba(15, 23, 42, 0.08);
  background: rgba(255, 255, 255, 0.72);
  border-radius: 1rem;
  padding: 0.75rem 0.85rem;
  color: #475569;
  font-size: 0.92rem;
  line-height: 1.55;
}
.dark .des-feature-detail-item {
  border-color: rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.045);
  color: #c6d0e1;
}
.des-feature-check {
  line-height: 1.55;
}
@media (min-width: 640px) {
  .des-feature-detail-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 640px) {
  .des-feature-detail-box {
    padding: 1rem;
  }
  .des-feature-detail-item {
    min-height: 0;
    font-size: 0.88rem;
  }
}


/* Price visibility upgrades */
.des-price-highlight {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.85rem;
  border: 1px solid rgba(255, 102, 0, 0.28);
  border-radius: 1rem;
  padding: 0.85rem 1rem;
  background: linear-gradient(135deg, rgba(255, 102, 0, 0.14), rgba(255, 183, 77, 0.08));
  box-shadow: 0 12px 30px rgba(255, 102, 0, 0.10);
}
.des-price-highlight-large {
  border-radius: 1.25rem;
  padding: 1rem 1.15rem;
}
.des-price-label {
  flex: 0 0 auto;
  border-radius: 999px;
  background: #ff6600;
  color: #fff;
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.12em;
  padding: 0.45rem 0.7rem;
  text-transform: uppercase;
  box-shadow: 0 10px 20px rgba(255, 102, 0, 0.24);
}
.des-price-lines {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  text-align: right;
  color: #ff6600;
  font-weight: 950;
  line-height: 1.25;
}
.dark .des-price-highlight {
  border-color: rgba(255, 183, 77, 0.34);
  background: linear-gradient(135deg, rgba(255, 102, 0, 0.22), rgba(255, 183, 77, 0.10));
  box-shadow: 0 14px 34px rgba(255, 102, 0, 0.18);
}
.dark .des-price-lines { color: #ffb74d; }
@media (max-width: 420px) {
  .des-price-highlight { align-items: flex-start; flex-direction: column; }
  .des-price-lines { align-items: flex-start; text-align: left; }
}

/* Product card vertical alignment fix */
[data-product-id] > .relative > p {
  min-height: 2.8rem;
  display: flex;
  align-items: center;
}
[data-product-id] > .relative > h3 {
  min-height: 3.15rem;
  display: flex;
  align-items: flex-start;
}
[data-product-id] .des-price-highlight:not(.des-price-highlight-large) {
  min-height: 5.65rem;
  flex-shrink: 0;
}
[data-product-id] .des-price-lines {
  min-height: 3rem;
  justify-content: center;
}
[data-product-id] .des-feature-preview-box {
  min-height: 11.65rem;
  flex-shrink: 0;
}
[data-product-id] .des-feature-preview-box ul {
  min-height: 4.55rem;
}
[data-product-id] .des-feature-preview-box a {
  margin-top: auto;
}
@media (max-width: 640px) {
  [data-product-id] > .relative > p { min-height: 2.35rem; }
  [data-product-id] > .relative > h3 { min-height: 2.7rem; }
  [data-product-id] .des-price-highlight:not(.des-price-highlight-large) { min-height: 5.25rem; }
  [data-product-id] .des-feature-preview-box { min-height: 11.25rem; }
}


/* Homepage featured card alignment refinement */
#featured-grid {
  align-items: stretch;
}
#featured-grid [data-product-id] {
  height: 100%;
}
#featured-grid [data-product-id] > .relative {
  display: flex;
  flex-direction: column;
  height: 100%;
}
#featured-grid .des-product-media {
  height: 6rem;
  min-height: 6rem;
  margin-bottom: 1.25rem;
}
#featured-grid .des-product-category {
  min-height: 2.9rem;
  display: flex;
  align-items: flex-start;
  margin-bottom: 0.45rem;
}
#featured-grid .des-product-title {
  min-height: 3.25rem;
  display: flex;
  align-items: flex-start;
}
#featured-grid .des-price-highlight:not(.des-price-highlight-large) {
  min-height: 5.85rem;
  margin-top: 0.75rem;
}
#featured-grid .des-feature-preview-box {
  min-height: 11.75rem;
  margin-top: 1rem;
}
#featured-grid .des-feature-preview-box ul {
  min-height: 4.6rem;
}
#featured-grid .des-feature-preview-box a {
  margin-top: auto;
}
@media (min-width: 1024px) {
  #featured-grid [data-product-id] {
    min-height: 39.75rem;
  }
}
@media (max-width: 640px) {
  #featured-grid .des-product-category { min-height: 2.35rem; }
  #featured-grid .des-product-title { min-height: 2.75rem; }
  #featured-grid .des-price-highlight:not(.des-price-highlight-large) { min-height: 5.25rem; }
  #featured-grid .des-feature-preview-box { min-height: 11.25rem; }
}

/* Product subtitle for small combo note */
.des-product-title {
  flex-direction: column;
  gap: 0.2rem;
}
.des-product-subtitle {
  display: block;
  font-size: 0.78rem;
  line-height: 1.15rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  color: #ffb74d;
}
@media (min-width: 1024px) {
  [data-product-id] > .relative > h3,
  #featured-grid .des-product-title { min-height: 3.65rem; }
}