/* =========================================================
   DAYERANG · Cinematic Motion Layer (motion.css)
   - 원본 style.css는 그대로 두고, 동적 효과만 덧입히는 레이어
   - html.js 클래스가 있을 때만 초기 숨김 상태 적용 (JS 실패 시 원본 그대로 노출)
   ========================================================= */

:root {
  --gold-hi: #f2d59c;
  --gold-mid: #d9ae61;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-io: cubic-bezier(0.65, 0, 0.35, 1);
}

section[id] { scroll-margin-top: 63px; }
@media (max-width: 720px) { section[id] { scroll-margin-top: 57px; } }

/* ---------- 0. Intro loader (陽) ---------- */
html.js::before,
html.js::after {
  position: fixed;
  z-index: 9999;
  pointer-events: none;
  transition: opacity 900ms var(--ease-io), visibility 900ms, transform 1100ms var(--ease-out);
}
html.js::before {
  inset: 0;
  background:
    radial-gradient(circle at 50% 48%, rgba(217, 174, 97, 0.28), transparent 26%),
    #0b2b1d;
  content: "";
}
html.js::after {
  top: 50%;
  left: 50%;
  display: grid;
  width: 108px;
  height: 108px;
  place-items: center;
  margin: -54px 0 0 -54px;
  border: 1px solid rgba(225, 189, 120, 0.7);
  border-radius: 50%;
  box-shadow: 0 0 0 0 rgba(225, 189, 120, 0.45);
  color: #e1bd78;
  font-family: Georgia, serif;
  font-size: 44px;
  content: "陽";
  animation: dy-loader-pulse 1.4s var(--ease-io) infinite;
}
html.js.loaded::before { opacity: 0; visibility: hidden; }
html.js.loaded::after { opacity: 0; visibility: hidden; transform: scale(1.6); animation: none; }
@keyframes dy-loader-pulse {
  0% { box-shadow: 0 0 0 0 rgba(225, 189, 120, 0.45); }
  100% { box-shadow: 0 0 0 38px rgba(225, 189, 120, 0); }
}

/* ---------- 1. Scroll progress + header ---------- */
.dy-progress {
  position: fixed;
  z-index: 60;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, #b68a43, var(--gold-hi), #b68a43);
  box-shadow: 0 0 12px rgba(242, 213, 156, 0.7);
  transform: scaleX(0);
  transform-origin: 0 50%;
  pointer-events: none;
}
.site-header { transition: min-height 380ms var(--ease-out), background 380ms ease, box-shadow 380ms ease; }
.site-header.is-scrolled {
  min-height: 64px;
  background: rgba(11, 43, 29, 0.86);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.22);
}
.brand-mark { transition: transform 700ms var(--ease-out), box-shadow 400ms ease; }
.brand:hover .brand-mark { transform: rotate(360deg); box-shadow: 0 0 22px rgba(225, 189, 120, 0.5); }
.desktop-nav a { position: relative; }
.desktop-nav a::after {
  position: absolute;
  right: 0;
  bottom: -8px;
  left: 0;
  height: 1px;
  background: #e1bd78;
  content: "";
  transform: scaleX(0);
  transition: transform 420ms var(--ease-out);
}
.desktop-nav a:hover::after, .desktop-nav a.is-active::after { transform: scaleX(1); }
.desktop-nav a.is-active { color: #e1bd78; }
.header-cta { position: relative; overflow: hidden; }
.header-cta::before {
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, transparent 30%, rgba(255, 240, 200, 0.45) 50%, transparent 70%);
  content: "";
  transform: translateX(-120%);
  animation: dy-sheen 4.2s ease-in-out 2.5s infinite;
}
@keyframes dy-sheen { 0%, 70% { transform: translateX(-120%); } 100% { transform: translateX(120%); } }

/* ---------- 2. HERO ---------- */
.hero { position: relative; overflow: hidden; isolation: isolate; }
.hero::before {
  position: absolute;
  z-index: 0;
  top: -60%;
  left: -30%;
  width: 120%;
  height: 160%;
  background: conic-gradient(from 0deg at 50% 50%,
    transparent 0deg, rgba(225, 189, 120, 0.07) 12deg, transparent 24deg,
    transparent 40deg, rgba(225, 189, 120, 0.05) 52deg, transparent 64deg,
    transparent 90deg, rgba(225, 189, 120, 0.06) 104deg, transparent 118deg,
    transparent 150deg, rgba(225, 189, 120, 0.05) 162deg, transparent 176deg,
    transparent 360deg);
  content: "";
  pointer-events: none;
  animation: dy-rays 60s linear infinite;
}
@keyframes dy-rays { to { rotate: 360deg; } }
.hero-copy, .hero-visual { position: relative; z-index: 1; }
.dy-particles { position: absolute; z-index: 3; inset: 0; width: 100%; height: 100%; pointer-events: none; }

.hero-visual > img { scale: 1.12; translate: var(--hx, 0) calc(var(--hy, 0px) + var(--hpy, 0px)); transition: scale 2.6s var(--ease-out), translate 900ms var(--ease-out); will-change: translate, scale; }
html.loaded .hero-visual > img { scale: 1.02; }
.hero-visual::before {
  position: absolute;
  z-index: 1;
  inset: 0;
  background: radial-gradient(circle at var(--glx, 70%) var(--gly, 20%), rgba(255, 214, 140, 0.28), transparent 38%);
  content: "";
  mix-blend-mode: soft-light;
  pointer-events: none;
}
.hero-badge { animation: dy-float 6s ease-in-out infinite; }
@keyframes dy-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -10px; } }
.hero-badge::before {
  position: absolute;
  inset: -1px;
  border: 1px solid transparent;
  background: linear-gradient(120deg, rgba(242, 213, 156, 0.9), transparent 40%, transparent 60%, rgba(242, 213, 156, 0.9)) border-box;
  -webkit-mask: linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  content: "";
  animation: dy-border-spin 5s linear infinite;
  background-size: 300% 300%;
}
@keyframes dy-border-spin { 0% { background-position: 0% 50%; } 100% { background-position: 300% 50%; } }

/* hero entrance */
.js .hero .hero-kicker,
.js .hero h1 > .h1-line,
.js .hero h1 > span,
.js .hero .hero-description,
.js .hero .hero-actions,
.js .hero .hero-recognitions article,
.js .hero .hero-badge,
.js .hero .hero-caption {
  opacity: 0;
  translate: 0 34px;
  transition: opacity 1100ms var(--ease-out), translate 1100ms var(--ease-out), clip-path 1300ms var(--ease-out);
}
.js .hero h1 > .h1-line, .js .hero h1 > span { display: block; clip-path: inset(0 0 100% 0); }
.hero h1 .h1-line { color: inherit; }
html.loaded .hero .hero-kicker { opacity: 1; translate: 0 0; transition-delay: 150ms; }
html.loaded .hero h1 > .h1-line { opacity: 1; translate: 0 0; clip-path: inset(0 0 -10% 0); transition-delay: 300ms; }
html.loaded .hero h1 > span { opacity: 1; translate: 0 0; clip-path: inset(0 0 -10% 0); transition-delay: 480ms; }
html.loaded .hero .hero-description { opacity: 1; translate: 0 0; transition-delay: 700ms; }
html.loaded .hero .hero-actions { opacity: 1; translate: 0 0; transition-delay: 860ms; }
html.loaded .hero .hero-recognitions article { opacity: 1; translate: 0 0; transition-delay: 1000ms; }
html.loaded .hero .hero-recognitions article + article { transition-delay: 1140ms; }
html.loaded .hero .hero-badge { opacity: 1; translate: 0 0; transition-delay: 1200ms; }
html.loaded .hero .hero-caption { opacity: 1; translate: 0 0; transition-delay: 1400ms; }
.js .hero .hero-badge { transition-property: opacity; }

/* h1 golden shimmer on the highlighted line */
.hero h1 > span:not(.h1-line) {
  background: linear-gradient(100deg, #e4bd73 0%, #e4bd73 40%, #fff1cc 50%, #e4bd73 60%, #e4bd73 100%);
  background-size: 250% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: dy-text-shine 5.5s ease-in-out 2.2s infinite;
}
@keyframes dy-text-shine { 0% { background-position: 120% 0; } 60%, 100% { background-position: -30% 0; } }

.hero-recognitions article { position: relative; overflow: hidden; transition: border-color 300ms ease, background 300ms ease; }
.hero-recognitions article::after {
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 35%, rgba(242, 213, 156, 0.16) 50%, transparent 65%);
  content: "";
  transform: translateX(-110%);
  animation: dy-sheen 6s ease-in-out 3s infinite;
}
.hero-recognitions article:hover { border-color: rgba(225, 189, 120, 0.7); background: rgba(255, 255, 255, 0.09); }

.button { position: relative; overflow: hidden; }
.button-primary { box-shadow: 0 10px 30px rgba(217, 174, 97, 0.28); }
.button-primary::after {
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, 0.5) 50%, transparent 70%);
  content: "";
  transform: translateX(-120%);
  transition: transform 700ms var(--ease-out);
}
.button-primary:hover::after { transform: translateX(120%); }

/* ---------- 3. Generic reveal ---------- */
.js [data-reveal] {
  opacity: 0;
  translate: 0 46px;
  transition: opacity 1000ms var(--ease-out), translate 1000ms var(--ease-out);
  transition-delay: var(--d, 0ms);
}
.js [data-reveal="left"] { translate: -56px 0; }
.js [data-reveal="right"] { translate: 56px 0; }
.js [data-reveal="zoom"] { translate: 0 30px; scale: 0.94; transition-property: opacity, translate, scale; }
.js [data-reveal="flip"] { translate: 0 60px; rotate: x 18deg; transform-origin: 50% 100%; transition-property: opacity, translate, rotate; }
.js [data-reveal].in { opacity: 1; translate: 0 0; scale: 1; rotate: x 0deg; }

.js [data-wipe] { clip-path: inset(0 100% 0 0); transition: clip-path 1400ms var(--ease-io); transition-delay: var(--d, 0ms); }
.js [data-wipe="up"] { clip-path: inset(100% 0 0 0); }
.js [data-wipe].in { clip-path: inset(0 0 0 0); }

/* section heading eyebrow line */
.eyebrow { position: relative; }
.js .section-heading .eyebrow::after,
.js .story-copy .eyebrow::after,
.js .smartfarm-copy .eyebrow::after,
.js .product-copy .eyebrow::after,
.js .cooperation .eyebrow::after,
.js .contact .eyebrow::after {
  display: inline-block;
  width: 42px;
  height: 1px;
  margin-left: 14px;
  vertical-align: middle;
  background: currentColor;
  content: "";
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform 1000ms var(--ease-out) 300ms;
}
.js .in .eyebrow::after, .js .eyebrow.in::after { transform: scaleX(1); }

/* reveal + tilt 동시 적용 요소 */
.js [data-reveal][data-tilt] {
  transition-property: opacity, translate, scale, rotate, transform, box-shadow, filter, border-color;
  transition-duration: 1000ms, 1000ms, 1000ms, 1000ms, 600ms, 400ms, 400ms, 900ms;
  transition-timing-function: var(--ease-out);
  transition-delay: var(--d, 0ms), var(--d, 0ms), var(--d, 0ms), var(--d, 0ms), 0ms, 0ms, 0ms, 600ms;
}
.js [data-reveal][data-tilt].tilting { transition-duration: 1000ms, 1000ms, 1000ms, 1000ms, 120ms, 400ms, 400ms, 900ms; transition-timing-function: linear; }

/* ---------- 4. Emphasis: highlight marks (문구 그대로, 밑줄만) ---------- */
.hl {
  font-style: normal;
  background-image: linear-gradient(transparent 62%, rgba(217, 174, 97, 0.42) 62%, rgba(217, 174, 97, 0.42) 92%, transparent 92%);
  background-repeat: no-repeat;
  background-size: 0% 100%;
  transition: background-size 1200ms var(--ease-io) var(--hd, 400ms);
}
.hero .hl, .technology .hl, .awards .hl, .contact .hl { color: #fff; background-image: linear-gradient(transparent 64%, rgba(217, 174, 97, 0.55) 64%, rgba(217, 174, 97, 0.55) 90%, transparent 90%); }
.hl.on { background-size: 100% 100%; }
html:not(.js) .hl { background-size: 100% 100%; }

/* ---------- 5. Value bar ---------- */
.value-bar p { position: relative; overflow: hidden; transition: background 400ms ease; }
.value-bar p::before {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, #b68a43, #f2d59c);
  content: "";
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform 900ms var(--ease-out) calc(var(--d, 0ms) + 300ms);
}
.value-bar p.in::before { transform: scaleX(1); }
.value-bar p:hover { background: rgba(255, 255, 255, 0.6); }
.value-bar p.dy-key::after {
  position: absolute;
  top: -40%;
  right: -40px;
  width: 140px;
  height: 140px;
  background: radial-gradient(circle, rgba(242, 196, 110, 0.38), transparent 62%);
  content: "";
  animation: dy-glow 3.6s ease-in-out infinite;
  pointer-events: none;
}
@keyframes dy-glow { 0%, 100% { opacity: 0.35; scale: 0.9; } 50% { opacity: 1; scale: 1.15; } }

/* ---------- 6. Dark-section cursor spotlight ---------- */
.technology, .awards, .contact { position: relative; overflow: hidden; }
.technology::before, .awards::before, .contact::before {
  position: absolute;
  z-index: 0;
  inset: 0;
  background: radial-gradient(520px circle at var(--sx, 50%) var(--sy, -30%), rgba(225, 189, 120, 0.12), transparent 60%);
  content: "";
  pointer-events: none;
  transition: opacity 400ms ease;
}
.technology > .section, .awards > .section, .contact > * { position: relative; z-index: 1; }

/* ---------- 7. Technology (태양건조·구증구포 강조) ---------- */
.tech-card { transform-style: preserve-3d; transition: transform 500ms var(--ease-out), box-shadow 500ms ease; }
.tech-card img { scale: 1.1; translate: 0 var(--py, 0px); }
.tech-card:hover { box-shadow: 0 30px 70px rgba(0, 0, 0, 0.35); }
.tech-card-copy { transition: translate 500ms var(--ease-out); }
.tech-card:hover .tech-card-copy { translate: 0 -6px; }
.tech-card-copy h3 { position: relative; }

/* solar card: 태양광 펄스 */
.dy-sun {
  position: absolute;
  z-index: 1;
  top: -80px;
  right: -80px;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 216, 130, 0.62) 0%, rgba(255, 190, 90, 0.2) 30%, transparent 65%);
  mix-blend-mode: screen;
  pointer-events: none;
  animation: dy-sun-pulse 4.5s ease-in-out infinite;
}
.dy-sun::before {
  position: absolute;
  inset: 18%;
  border-radius: 50%;
  background: repeating-conic-gradient(from 0deg, rgba(255, 226, 160, 0.35) 0deg 4deg, transparent 4deg 22deg);
  -webkit-mask: radial-gradient(circle, transparent 22%, #000 24%, transparent 70%);
  mask: radial-gradient(circle, transparent 22%, #000 24%, transparent 70%);
  content: "";
  animation: dy-rays 30s linear infinite;
}
@keyframes dy-sun-pulse { 0%, 100% { opacity: 0.7; scale: 0.92; } 50% { opacity: 1; scale: 1.08; } }

/* smart process card: 데이터 스캔 라인 */
.dy-scan {
  position: absolute;
  z-index: 1;
  inset: 0;
  background-image:
    linear-gradient(rgba(242, 213, 156, 0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(242, 213, 156, 0.08) 1px, transparent 1px);
  background-size: 38px 38px;
  pointer-events: none;
  -webkit-mask: linear-gradient(0deg, transparent 20%, #000 60%);
  mask: linear-gradient(0deg, transparent 20%, #000 60%);
}
.dy-scan::after {
  position: absolute;
  right: 0;
  left: 0;
  height: 90px;
  background: linear-gradient(180deg, transparent, rgba(242, 213, 156, 0.22) 85%, rgba(255, 236, 190, 0.9) 100%);
  content: "";
  animation: dy-scan 3.8s var(--ease-io) infinite;
}
@keyframes dy-scan { 0% { top: -90px; } 100% { top: 100%; } }

/* metrics */
.technology-metrics p { position: relative; overflow: hidden; transition: background 400ms ease; }
.technology-metrics p:hover { background: rgba(255, 255, 255, 0.04); }
.technology-metrics p::after {
  position: absolute;
  inset: 0;
  border: 1px solid transparent;
  background: linear-gradient(90deg, transparent, rgba(242, 213, 156, 0.9), transparent) border-box;
  background-size: 200% 100%;
  -webkit-mask: linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  content: "";
  opacity: 0;
  pointer-events: none;
}
.technology-metrics p.in::after { opacity: 1; animation: dy-border-run 3.2s linear infinite; }
@keyframes dy-border-run { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
.technology-metrics strong { position: relative; z-index: 1; text-shadow: 0 0 24px rgba(223, 185, 111, 0.35); }

.dy-ring { position: absolute; top: 18px; right: 18px; width: 74px; height: 74px; pointer-events: none; }
.dy-ring circle.node { fill: rgba(255, 255, 255, 0.12); transition: fill 300ms ease, r 300ms ease; }
.dy-ring circle.node.steam { fill: #ffffff; }
.dy-ring circle.node.dry { fill: #f2c46e; }
.dy-ring circle.track { fill: none; stroke: rgba(223, 185, 111, 0.28); stroke-width: 1; }

.dy-bar { position: relative; height: 4px; margin-top: 16px; overflow: hidden; border-radius: 4px; background: rgba(255, 255, 255, 0.1); }
.dy-bar i { position: absolute; top: 0; bottom: 0; left: 0; width: 0; border-radius: 4px; background: linear-gradient(90deg, #b68a43, #f2d59c); box-shadow: 0 0 12px rgba(242, 213, 156, 0.6); transition: width 2200ms var(--ease-out) 300ms; }
.in .dy-bar i { width: 60%; }

.dy-sunicon { position: absolute; top: 20px; right: 20px; width: 58px; height: 58px; pointer-events: none; animation: dy-rays 18s linear infinite; }
.dy-data { position: absolute; top: 22px; right: 22px; display: flex; align-items: flex-end; gap: 4px; height: 44px; pointer-events: none; }
.dy-data i { display: block; width: 5px; border-radius: 2px; background: linear-gradient(0deg, #b68a43, #f2d59c); animation: dy-eq 1.6s ease-in-out infinite; }
.dy-data i:nth-child(2) { animation-delay: -0.3s; } .dy-data i:nth-child(3) { animation-delay: -0.7s; } .dy-data i:nth-child(4) { animation-delay: -1.1s; } .dy-data i:nth-child(5) { animation-delay: -0.5s; }
@keyframes dy-eq { 0%, 100% { height: 20%; } 50% { height: 100%; } }

/* ---------- 8. Cards: tilt + glare ---------- */
[data-tilt] { transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform 600ms var(--ease-out), box-shadow 400ms ease; }
[data-tilt].tilting { transition: transform 120ms linear, box-shadow 400ms ease; }
[data-tilt] { position: relative; }
.dy-glare { position: absolute; z-index: 5; inset: 0; background: radial-gradient(circle at var(--gx, 50%) var(--gy, 50%), rgba(255, 255, 255, 0.28), transparent 45%); opacity: 0; pointer-events: none; transition: opacity 300ms ease; mix-blend-mode: soft-light; }
[data-tilt]:hover .dy-glare { opacity: 1; }
.story-cards article, .cooperation-cards article { transition: transform 600ms var(--ease-out), box-shadow 400ms ease, border-color 400ms ease; }
.story-cards article:hover, .cooperation-cards article:hover { border-color: rgba(182, 138, 67, 0.55); box-shadow: 0 24px 50px rgba(20, 52, 36, 0.12); }
.cooperation-cards article { position: relative; overflow: hidden; }
.cooperation-cards article::before { position: absolute; top: 0; left: 0; width: 100%; height: 3px; background: linear-gradient(90deg, #b68a43, #f2d59c); content: ""; transform: scaleX(0); transform-origin: 0 50%; transition: transform 900ms var(--ease-out) calc(var(--d, 0ms) + 300ms); }
.cooperation-cards article.in::before { transform: scaleX(1); }

/* ---------- 9. Story / Smartfarm / Products ---------- */
.story-image > p, .smartfarm-visual figcaption { transition: translate 1000ms var(--ease-out) 500ms, opacity 1000ms ease 500ms; }
.js .story-image:not(.in) > p, .js .smartfarm-visual:not(.in) figcaption { opacity: 0; translate: 30px 0; }
.smartfarm-copy li { transition: padding-left 400ms var(--ease-out), color 300ms ease; }
.smartfarm-copy li:hover { padding-left: 10px; color: var(--forest); }
.product-visual img { animation: dy-float 7s ease-in-out infinite; }
.product-visual::before { position: absolute; z-index: 1; inset: 0; background: linear-gradient(115deg, transparent 40%, rgba(255, 236, 190, 0.3) 50%, transparent 60%) no-repeat; background-size: 300% 100%; content: ""; pointer-events: none; animation: dy-bg-sheen 6.5s ease-in-out 1.5s infinite; animation-fill-mode: both; }
@keyframes dy-bg-sheen { 0%, 60% { background-position: 150% 0; } 100% { background-position: -50% 0; } }
.product-list article { transition: padding-left 400ms var(--ease-out); }
.product-list article:hover { padding-left: 12px; }
.product-list article:hover > span { color: #f2d59c; }

/* ---------- 10. Trust / Credentials (특허·소셜벤처·협약 강조) ---------- */
.trust-list article { transition: background 300ms ease, padding-left 400ms var(--ease-out); }
.trust-list article:hover { padding-left: 12px; background: linear-gradient(90deg, rgba(217, 174, 97, 0.1), transparent); }
.credential-card, .partnership-card { position: relative; transition: transform 600ms var(--ease-out), box-shadow 400ms ease; }
.credential-card:hover, .partnership-card:hover { box-shadow: 0 30px 70px rgba(24, 58, 40, 0.16); }
.credential-card::after, .award-card::after {
  position: absolute;
  z-index: 4;
  inset: 0;
  background: linear-gradient(115deg, transparent 38%, rgba(255, 232, 175, 0.55) 50%, transparent 62%);
  content: "";
  pointer-events: none;
  transform: translateX(-120%);
}
.credential-card.in::after, .award-card.in::after { animation: dy-once-sheen 1600ms var(--ease-io) calc(var(--d, 0ms) + 500ms) 1 both; }
@keyframes dy-once-sheen { from { transform: translateX(-120%); } to { transform: translateX(120%); } }
.credential-card { border-top: 3px solid transparent; }
.credential-card.in { border-top-color: #c9a24f; }
.credential-copy dd { position: relative; display: inline-block; }
.credential-copy dd::after { position: absolute; right: 0; bottom: 0; left: 0; height: 40%; background: rgba(217, 174, 97, 0.3); content: ""; transform: scaleX(0); transform-origin: 0 50%; transition: transform 1000ms var(--ease-io) calc(var(--d, 0ms) + 900ms); z-index: -1; }
.credential-card.in dd::after { transform: scaleX(1); }
.credential-copy dl div dd { z-index: 0; }
.local-cert-mark { position: relative; }
.local-cert-mark::before { position: absolute; inset: -9px; border: 1px dashed rgba(225, 189, 120, 0.55); border-radius: 50%; content: ""; animation: dy-rays 24s linear infinite; }
.local-cert-mark::after { position: absolute; inset: -1px; border-radius: 50%; box-shadow: 0 0 0 0 rgba(225, 189, 120, 0.5); content: ""; animation: dy-loader-pulse 2.6s ease-out infinite; }
.partnership-card::before { position: absolute; z-index: 3; top: 0; left: 0; width: 100%; height: 3px; background: linear-gradient(90deg, #b68a43, #f2d59c); content: ""; transform: scaleX(0); transform-origin: 0 50%; transition: transform 1000ms var(--ease-out) calc(var(--d, 0ms) + 400ms); }
.partnership-card.in::before { transform: scaleX(1); }
.partnership-proof-text strong { transition: letter-spacing 600ms var(--ease-out); }
.partnership-card:hover .partnership-proof-text strong { letter-spacing: 0.06em; }

/* ---------- 11. History: gold timeline drawing ---------- */
.history-year { position: relative; transition: box-shadow 400ms ease; }
.history-year:hover { box-shadow: 0 28px 60px rgba(20, 52, 36, 0.12); }
.history-year::before { position: absolute; top: -3px; left: 0; width: 100%; height: 3px; background: linear-gradient(90deg, #f2d59c, #b68a43); content: ""; transform: scaleX(0); transform-origin: 0 50%; transition: transform 1200ms var(--ease-out) 200ms; }
.history-year.in::before { transform: scaleX(1); }
.history-year ol { position: relative; }
.history-year ol::before, .history-year ol::after { position: absolute; top: 20px; bottom: 20px; left: 17.5px; width: 1px; content: ""; }
.history-year ol::before { background: rgba(182, 138, 67, 0.2); }
.history-year ol::after { background: linear-gradient(180deg, #f2d59c, #b68a43); box-shadow: 0 0 8px rgba(217, 174, 97, 0.6); transform: scaleY(var(--prog, 0)); transform-origin: 50% 0; }
.history-year li time { position: relative; z-index: 1; background: var(--paper); transition: background 500ms ease, color 500ms ease, border-color 500ms ease, box-shadow 500ms ease; }
.history-year li.lit time { border-color: #c9a24f; background: #c9a24f; color: #fff; box-shadow: 0 0 0 5px rgba(217, 174, 97, 0.16); }
.history-year li.dy-key.lit time { animation: dy-key-pulse 2.4s ease-out infinite; }
@keyframes dy-key-pulse { 0% { box-shadow: 0 0 0 0 rgba(217, 174, 97, 0.55); } 100% { box-shadow: 0 0 0 14px rgba(217, 174, 97, 0); } }
.history-year li.dy-key b { width: fit-content; background-image: linear-gradient(transparent 64%, rgba(217, 174, 97, 0.3) 64%); background-repeat: no-repeat; background-size: 0% 100%; transition: background-size 900ms var(--ease-io) 250ms; }
.history-year li.dy-key.lit b { background-size: 100% 100%; }
.history-year header strong { display: inline-block; background: linear-gradient(100deg, var(--forest) 40%, #c9a24f 50%, var(--forest) 60%); background-size: 260% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; background-position: 100% 0; transition: background-position 1600ms var(--ease-io) 300ms; }
.history-year.in header strong { background-position: 0 0; }

/* ---------- 12. Awards (수상 8건 강조) ---------- */
.awards .section-heading > div { position: relative; isolation: isolate; }
.dy-count {
  position: absolute;
  z-index: -1;
  top: -0.42em;
  right: 0;
  color: transparent;
  font-family: Georgia, serif;
  font-size: clamp(150px, 16vw, 260px);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.06em;
  -webkit-text-stroke: 1px rgba(225, 189, 120, 0.35);
  pointer-events: none;
  user-select: none;
}
.awards .section-heading > div > *:not(.dy-count) { position: relative; }
.award-card { position: relative; transition: transform 600ms var(--ease-out), box-shadow 400ms ease; }
.award-card:hover { box-shadow: 0 34px 80px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(225, 189, 120, 0.6); }
.award-copy time { position: relative; padding-left: 18px; }
.award-copy time::before { position: absolute; top: 50%; left: 0; width: 10px; height: 10px; margin-top: -5px; border-radius: 50%; background: radial-gradient(circle, #f2d59c, #b68a43); box-shadow: 0 0 10px rgba(217, 174, 97, 0.8); content: ""; }
.awards-grid:hover .award-card:not(:hover) { filter: saturate(0.7) brightness(0.9); }


/* ---------- 13. Media ---------- */
.media-image > i::before, .media-image > i::after { position: absolute; inset: -1px; border: 1px solid rgba(242, 213, 156, 0.7); border-radius: 50%; content: ""; animation: dy-ripple 2.4s ease-out infinite; }
.media-image > i::after { animation-delay: 1.2s; }
@keyframes dy-ripple { 0% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(1.9); } }
.media-card:hover .media-image > i { background: #d9ae61; color: #0b2b1d; }
.media-image > i { transition: background 300ms ease, color 300ms ease; }
.media-copy b i { display: inline-block; transition: transform 300ms var(--ease-out); }
.media-card:hover .media-copy b i { transform: translate(4px, -4px); }

/* ---------- 14. Contact ---------- */
.contact-info div { transition: padding-left 400ms var(--ease-out); }
.contact-info div:hover { padding-left: 10px; }
.contact-info div:hover dt { color: #f2d59c; }

/* ---------- 15. Floating actions ---------- */
.dy-fab { position: fixed; z-index: 70; right: 20px; bottom: 20px; display: grid; gap: 10px; opacity: 0; translate: 0 20px; pointer-events: none; transition: opacity 400ms ease, translate 500ms var(--ease-out); }
.dy-fab.show { opacity: 1; translate: 0 0; pointer-events: auto; }
.dy-fab a, .dy-fab button { display: grid; width: 50px; height: 50px; place-items: center; border: 1px solid rgba(225, 189, 120, 0.6); border-radius: 50%; background: rgba(11, 43, 29, 0.9); color: #f2d59c; cursor: pointer; font: inherit; font-size: 18px; box-shadow: 0 12px 30px rgba(0, 0, 0, 0.25); backdrop-filter: blur(10px); transition: background 300ms ease, color 300ms ease, transform 300ms var(--ease-out); }
.dy-fab a:hover, .dy-fab button:hover { background: #d9ae61; color: #0b2b1d; transform: translateY(-3px); }
.dy-fab .dy-call { display: none; background: #d9ae61; color: #0b2b1d; animation: dy-key-pulse 2.2s ease-out infinite; }
.dy-fab svg { width: 20px; height: 20px; }
@media (max-width: 720px) { .dy-fab .dy-call { display: grid; } .dy-fab { right: 14px; bottom: 14px; } }

/* ---------- 16. Lightbox ---------- */
.dy-lb { position: fixed; z-index: 9000; inset: 0; display: grid; grid-template-rows: 1fr auto; place-items: center; padding: 60px 70px 24px; background: rgba(6, 22, 15, 0.94); opacity: 0; visibility: hidden; transition: opacity 400ms ease, visibility 400ms; backdrop-filter: blur(8px); }
.dy-lb.open { opacity: 1; visibility: visible; }
.dy-lb figure { display: grid; max-width: 100%; max-height: 100%; margin: 0; place-items: center; }
.dy-lb img { max-width: min(92vw, 900px); max-height: calc(100vh - 170px); object-fit: contain; background: #f4f1e8; box-shadow: 0 40px 100px rgba(0, 0, 0, 0.5); scale: 0.94; opacity: 0; transition: scale 500ms var(--ease-out), opacity 400ms ease; }
.dy-lb.open img.ready { scale: 1; opacity: 1; }
.dy-lb figcaption { margin-top: 18px; color: rgba(255, 255, 255, 0.82); font-size: 14px; text-align: center; }
.dy-lb figcaption time { display: block; margin-bottom: 6px; color: #d9ae61; font-family: Georgia, serif; font-size: 12px; letter-spacing: 0.1em; }
.dy-lb-count { color: rgba(255, 255, 255, 0.45); font-family: Georgia, serif; font-size: 12px; letter-spacing: 0.2em; }
.dy-lb button { position: absolute; display: grid; width: 50px; height: 50px; place-items: center; border: 1px solid rgba(225, 189, 120, 0.5); border-radius: 50%; background: rgba(11, 43, 29, 0.7); color: #f2d59c; cursor: pointer; font-size: 22px; transition: background 250ms ease, color 250ms ease; }
.dy-lb button:hover { background: #d9ae61; color: #0b2b1d; }
.dy-lb .dy-close { top: 16px; right: 16px; }
.dy-lb .dy-prev { top: 50%; left: 14px; margin-top: -25px; }
.dy-lb .dy-next { top: 50%; right: 14px; margin-top: -25px; }
@media (max-width: 720px) {
  .dy-lb { padding: 64px 12px 90px; }
  .dy-lb .dy-prev, .dy-lb .dy-next { top: auto; bottom: 20px; margin: 0; }
  .dy-lb .dy-prev { left: calc(50% - 64px); }
  .dy-lb .dy-next { right: calc(50% - 64px); }
}

/* ---------- 17. Mobile tuning ---------- */
@media (max-width: 720px) {
  .site-header.is-scrolled { min-height: 58px; }
  .dy-count { top: -0.2em; font-size: 150px; }
  .dy-ring { width: 56px; height: 56px; top: 12px; right: 12px; }
  .dy-sunicon { width: 44px; height: 44px; top: 14px; right: 14px; }
  .dy-data { top: 16px; right: 16px; height: 34px; }
  .dy-sun { width: 220px; height: 220px; }
}

/* ---------- 18. Reduced motion: 모든 효과 해제 ---------- */
@media (prefers-reduced-motion: reduce) {
  html.js::before, html.js::after { display: none; }
  .js [data-reveal], .js [data-wipe], .js .hero * { opacity: 1 !important; translate: none !important; scale: none !important; rotate: none !important; clip-path: none !important; }
  *, *::before, *::after { animation: none !important; }
  .hl { background-size: 100% 100%; }
  .dy-particles { display: none; }
}