/* Digital Creation — shared page styles */
@keyframes dcNavIn { from { opacity: 0; transform: translateY(-20px); } to { opacity: 1; transform: translateY(0); } }
@keyframes dcRise { from { opacity: 0; translate: 0 40px; } to { opacity: 1; translate: 0 0; } }
@keyframes dcHeroImg { from { opacity: 0; scale: 1.08; } to { opacity: 1; scale: 1; } }
@keyframes dcMarquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes dcMarqueeR { from { transform: translateX(-50%); } to { transform: translateX(0); } }
@keyframes dcPageIn { from { opacity: 0; } to { opacity: 1; } }

body { animation: dcPageIn 0.8s var(--ease-cinematic) both; }
html, body { overflow-x: clip; }

a { color: var(--text-primary); text-decoration: none; transition: opacity 0.35s var(--ease-cinematic); }
a:hover { opacity: 0.82; }

.dc-marquee:hover .dc-marquee-track { animation-play-state: paused !important; }

.dc-burger { display: none; flex-direction: column; gap: 6px; background: none; border: none; padding: 8px; cursor: pointer; }

.dc-testimonials { scrollbar-width: none; }
.dc-testimonials::-webkit-scrollbar { display: none; }

.dc-masonry { columns: 3; column-gap: 24px; }
.dc-masonry > * { break-inside: avoid; margin-bottom: 24px; }

@media (max-width: 1100px) {
  .dc-masonry { columns: 2; }
  .dc-testimonials { grid-template-columns: 1fr !important; }
}
@media (max-width: 1024px) {
  .dc-nav-links { display: none !important; }
  .dc-burger { display: flex !important; }
  .dc-stats { grid-template-columns: repeat(2, 1fr) !important; }
  .dc-info-grid { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 760px) {
  .dc-stats, .dc-courses, .dc-form-grid, .dc-footer-grid, .dc-benefits, .dc-examples, .dc-info-grid { grid-template-columns: 1fr !important; }
  .dc-nav-cta { display: none !important; }
}
@media (max-width: 700px) {
  .dc-masonry { columns: 1; }
}
@media (max-width: 760px) {
  .dc-film-card { padding: 24px !important; gap: 28px !important; }
  .dc-film-head { gap: 16px !important; }
  .dc-film-num { font-size: 36px !important; }
  .dc-film-title { font-size: 22px !important; }
  .dc-film-body { grid-template-columns: 1fr !important; gap: 24px !important; }
  .dc-film-body p { font-size: 14px !important; line-height: 1.7 !important; }
  .dc-film-poster { order: -1; min-height: 0 !important; aspect-ratio: 3 / 4; }
  .dc-contact-head { padding: 150px var(--page-pad) 32px !important; }
  .dc-contact-h1 { font-size: clamp(34px, 10.5vw, 54px) !important; line-height: 1.08 !important; }
  .dc-contact-br { display: none; }
}

/* Mobile refinements */
@media (max-width: 640px) {
  :root { --text-hero: clamp(44px, 13vw, 64px); --text-section: clamp(30px, 9.5vw, 42px); --text-display-lg: clamp(24px, 6.5vw, 34px); }
  h1.hero-heading { font-size: clamp(38px, 11.5vw, 56px) !important; line-height: 1.06 !important; }
  header[data-screen-label] { padding-top: 150px !important; padding-bottom: 56px !important; }
  header[data-screen-label] p:not(.caps-label) { font-size: 15px !important; }
}
@media (max-width: 640px) {
  .dc-service-row { grid-template-columns: 40px 1fr 24px !important; gap: 16px !important; padding: 32px 0 !important; }
  .dc-service-row .dc-row-num { font-size: 20px !important; }
  .dc-service-row .dc-row-arrow { font-size: 18px !important; }
  .dc-step-row { grid-template-columns: 44px 1fr !important; gap: 18px !important; padding: 30px 0 !important; }
  .dc-step-row .dc-row-num { font-size: 20px !important; }
}
@media (max-width: 760px) {
  .dc-sticky-card { position: static !important; height: auto !important; min-height: 0 !important; padding-bottom: 24px !important; }
  .dc-sticky-card > * { height: auto !important; transform: none !important; min-height: 0 !important; }
}
@media (max-height: 720px) {
  .dc-sticky-card { position: static !important; height: auto !important; min-height: 0 !important; padding-bottom: 24px !important; }
  .dc-sticky-card > * { height: auto !important; transform: none !important; min-height: 0 !important; }
}

/* Website Development — floating showcase frames + package grid */
@keyframes dcFloat {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -14px; }
}
.dc-float { animation: dcFloat 7s ease-in-out infinite; }
@media (max-width: 1100px) {
  .dc-packages { grid-template-columns: 1fr !important; max-width: 560px; margin-left: auto !important; margin-right: auto !important; }
}
@media (max-width: 760px) {
  .dc-webdev-stage { flex-wrap: wrap; align-items: center !important; justify-content: center; }
  .dc-webdev-stage > * { width: 100% !important; max-width: 480px; }
  .dc-webdev-stage > *:last-child { max-width: 200px; }
}
@media (prefers-reduced-motion: reduce) {
  .dc-float { animation: none; }
}

/* Spotlight card effect — cursor-following gold border glow (adapted from user's GlowCard) */
[data-glow] { position: relative; }
[data-glow]::before,
[data-glow]::after {
  pointer-events: none;
  content: "";
  position: absolute;
  inset: 0;
  padding: 1.5px;
  border-radius: var(--spot-radius, 28px);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
  z-index: 6;
}
[data-glow]::before {
  background-image: radial-gradient(
    280px 280px at calc(var(--lx, -9999) * 1px) calc(var(--ly, -9999) * 1px),
    hsl(42 60% 60% / 0.95), transparent 100%
  );
  filter: brightness(1.4);
}
[data-glow]::after {
  background-image: radial-gradient(
    110px 110px at calc(var(--lx, -9999) * 1px) calc(var(--ly, -9999) * 1px),
    hsl(45 95% 90% / 0.95), transparent 100%
  );
}
@media (hover: none) {
  [data-glow]::before, [data-glow]::after { display: none; }
}

.dc-cursor-dot, .dc-cursor-ring { position: fixed; top: 0; left: 0; pointer-events: none; z-index: 200; border-radius: 50%; }
@media (hover: none) { .dc-cursor-dot, .dc-cursor-ring { display: none; } }

@media (prefers-reduced-motion: reduce) {
  body { animation: none; }
  .dc-marquee-track { animation: none !important; }
  .dc-cursor-dot, .dc-cursor-ring { display: none; }
}