/* ============================================================
   SKY QUEST — nanocards.css
   Real HTML/CSS replacements for the flat nc2.png (効果) and
   nc3.png (特徴) images on the NanoCoating page.
   Self-contained: inline SVG icons, no image files.
   ============================================================ */

/* Section headings are floated in the original CSS, which makes them
   ride up OVER the grid (a grid is its own formatting context, so the
   float won't sit above it). Put the headings back into normal flow so
   they stack cleanly above the cards. */
.text-1 {
  float: none !important;
  display: block !important;
  clear: both;
}

.nc-cards {
  display: grid;
  gap: 42px;
  width: 90%;
  max-width: 1180px;
  margin: 56px auto 80px;   /* space above (from heading) and below */
  box-sizing: border-box;
  clear: both;
}

/* Entrance: opacity keeps the staggered cascade; transform/shadow
   are instant so hover never feels laggy. */
.nc-card.sq-reveal,
.nc-fcard.sq-reveal {
  transition-property: opacity, transform, box-shadow;
  transition-duration: var(--sq-dur, 1.1s), 0.5s, 0.5s;
  transition-timing-function: var(--sq-ease, cubic-bezier(0.16, 1, 0.3, 1));
  transition-delay: calc(var(--sq-i, 0) * 130ms), 0s, 0s;
}

/* ---------- MOVING (idle) animation ---------- */
@keyframes nc-bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}
/* white cards: slowly shimmer the gradient border */
@keyframes nc-border-drift {
  0%   { background-position: 0 0, 0% 50%; }
  50%  { background-position: 0 0, 100% 50%; }
  100% { background-position: 0 0, 0% 50%; }
}
/* blue cards: slowly drift the gradient fill */
@keyframes nc-fill-drift {
  0%   { background-position: 0% 0%; }
  50%  { background-position: 100% 100%; }
  100% { background-position: 0% 0%; }
}

.nc-card {
  background-size: 100% 100%, 220% 220%;
  animation: nc-border-drift 10s ease-in-out infinite;
}
.nc-fcard {
  background-size: 180% 180%;
  animation: nc-fill-drift 9s ease-in-out infinite;
}
/* icons float on their own (wrapper animates, svg stays free for hover) */
.nc-card-icon,
.nc-fcard-icon {
  display: inline-block;
  animation: nc-bob 4.6s ease-in-out infinite;
}
.nc-fcard-icon { animation-duration: 5.4s; }

/* ---------- HOVER ---------- */
.nc-card:hover {
  transform: translateY(-9px);
  box-shadow: 0 28px 54px -24px rgba(60, 90, 200, 0.5);
}
.nc-fcard {
  transition: transform 0.5s var(--sq-ease, ease), box-shadow 0.5s var(--sq-ease, ease);
}
.nc-fcard:hover {
  transform: translateY(-9px);
  box-shadow: 0 32px 58px -22px rgba(43, 63, 158, 0.7);
}
/* icon pops on hover (svg scales — separate element from the floating wrapper) */
.nc-card-icon svg,
.nc-fcard-icon svg {
  transition: transform 0.45s var(--sq-ease, ease);
}
.nc-card:hover .nc-card-icon svg,
.nc-fcard:hover .nc-fcard-icon svg {
  transform: scale(1.16) rotate(-3deg);
}
/* bullets / paragraph nudge in slightly on hover */
.nc-card:hover .nc-card-title { letter-spacing: 0.08em; }
.nc-card-title { transition: letter-spacing 0.45s var(--sq-ease, ease); }

/* ---------- Hover: each card jumps/bounces ---------- */
@keyframes nc-jump {
  0%, 100% { transform: translateY(0); }
  40%      { transform: translateY(-16px); }
}
.nc-card:hover,
.nc-fcard:hover,
.nc-step:hover {
  animation: nc-jump 0.7s ease-in-out infinite;
}

/* ---------- Reduced motion: kill idle movement + jumping ---------- */
@media (prefers-reduced-motion: reduce) {
  .nc-card, .nc-fcard, .nc-step,
  .nc-card-icon, .nc-fcard-icon, .nc-step-img,
  .nc-card:hover, .nc-fcard:hover, .nc-step:hover { animation: none !important; }
}

/* ---------- 効果: white cards w/ gradient border (2 across) ---------- */
.nc-effects { grid-template-columns: repeat(2, 1fr); }

.nc-card {
  position: relative;
  border-radius: 18px;
  padding: 38px 34px 42px;
  text-align: center;
  border: 1.6px solid transparent;
  background:
    linear-gradient(#ffffff, #ffffff) padding-box,
    linear-gradient(135deg, #3aa0f0 0%, #6f74e8 100%) border-box;
  box-shadow: 0 14px 34px -22px rgba(60, 90, 200, 0.45);
}

.nc-card-icon { color: #5b8def; line-height: 0; }
.nc-card-icon svg { width: 70px; height: 70px; }

.nc-card-title {
  margin: 16px 0 0;
  font-size: 30px;
  font-weight: 700;
  letter-spacing: 0.04em;
  background: linear-gradient(135deg, #3f6fd6 0%, #6a5fd0 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.nc-card-rule {
  display: block;
  height: 1px;
  margin: 18px 0 22px;
  background: #e0e7f4;
}

.nc-card-list {
  list-style: none;
  margin: 0;
  padding: 0;
  text-align: left;
  display: inline-block;
}
.nc-card-list li {
  position: relative;
  padding-left: 20px;
  color: #5f7fc4;
  font-size: 17px;
  line-height: 2;
}
.nc-card-list li::before {
  content: "・";
  position: absolute;
  left: 0;
  color: #5f7fc4;
}

/* ---------- 特徴: blue gradient cards (4 across) ---------- */
.nc-features { grid-template-columns: repeat(4, 1fr); }

.nc-fcard {
  border-radius: 18px;
  padding: 30px 26px 34px;
  color: #fff;
  background: linear-gradient(160deg, #2f86d8 0%, #2f5fc0 55%, #2b3f9e 100%);
  box-shadow: 0 20px 42px -20px rgba(43, 63, 158, 0.6);
}
.nc-fcard-head {
  display: flex;
  align-items: center;
  gap: 12px;
}
.nc-fcard-icon { color: #fff; line-height: 0; }
.nc-fcard-icon svg { width: 30px; height: 30px; }
.nc-fcard-head h3 {
  margin: 0;
  font-size: 21px;
  font-weight: 700;
  color: #fff;
}
.nc-fcard-rule {
  display: block;
  height: 1px;
  margin: 16px 0;
  background: rgba(255, 255, 255, 0.45);
}
.nc-fcard p {
  margin: 0;
  font-size: 16px;
  line-height: 1.9;
  color: #eaf1ff;
}

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .nc-features { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .nc-effects,
  .nc-features { grid-template-columns: 1fr; }
  .nc-cards { width: 92%; }
}

/* ============================================================
   施工の流れ — 3 step cards with circular photos (from nc4.png)
   ============================================================ */
.nc-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 48px;
  width: 90%;
  max-width: 1180px;
  margin: 56px auto 80px;
  box-sizing: border-box;
  clear: both;
}
.nc-step { text-align: center; }

.nc-step-img {
  display: inline-block;
  width: 210px;
  height: 210px;
  border-radius: 50%;
  overflow: hidden;
  box-shadow: 0 18px 42px -18px rgba(40, 70, 140, 0.4);
  animation: nc-bob 5.2s ease-in-out infinite;
}
.nc-step-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s var(--sq-ease, ease), filter 0.6s var(--sq-ease, ease);
}
.nc-step:hover .nc-step-img img {
  transform: scale(1.08);
  filter: brightness(1.05);
}

.nc-step-label {
  display: block;
  margin-top: 26px;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0.15em;
  color: #2ea3f2;
}
.nc-step-title {
  margin: 12px 0 18px;
  font-size: 26px;
  font-weight: 700;
  color: #2e6fc4;
}
.nc-step-text {
  margin: 0 auto;
  max-width: 300px;
  font-size: 16px;
  line-height: 2;
  color: #5f6b80;
  text-align: left;
}

@media (max-width: 760px) {
  .nc-steps { grid-template-columns: 1fr; gap: 44px; }
  .nc-step-text { text-align: center; }
}