/* Frontend styles for SMK PGRI 4 Kota Kediri */
:root{
  --primary:#0f1b3c; /* dark blue */
  --accent:#ffd700;  /* golden yellow */
  --text:#1f2937;
  --muted:#6b7280;
  --bg:#ffffff;
  --light:#f5f7fb;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;font-family:"Poppins",system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,"Helvetica Neue",Arial,"Apple Color Emoji","Segoe UI Emoji";background:var(--bg);color:var(--text)}
img{max-width:100%;display:block}
a{text-decoration:none;color:inherit}
.container{width:100%;max-width:1100px;margin:0 auto;padding:0 16px}
.btn{display:inline-flex;align-items:center;gap:.5rem;border:1px solid var(--primary);color:var(--primary);padding:.6rem 1rem;border-radius:8px;transition:.2s;background:#fff}
.btn:hover{background:var(--primary);color:#fff}
.btn-primary{background:var(--primary);color:#fff;border-color:var(--primary)}
.btn-primary:hover{filter:brightness(1.1)}
.btn-success{background:#16a34a;color:#fff;border-color:#16a34a}
.btn-success:hover{filter:brightness(1.08)}
.btn-outline{border-color:var(--primary);color:var(--primary);background:#fff}
.alert{padding:.8rem 1rem;border-radius:8px;background:var(--light);border:1px solid #e5e7eb;color:#111827}
.alert.info{background:#eef2ff;border-color:#c7d2fe}
.badge{display:inline-block;padding:.15rem .5rem;border-radius:6px;font-size:.75rem}
.badge-danger{background:#fee2e2;color:#991b1b}

/* Navbar */
.navbar{position:sticky;top:0;z-index:50;background:#ffffffcc;backdrop-filter:blur(8px);border-bottom:1px solid #e5e7eb}
.nav-container{display:flex;align-items:center;justify-content:space-between;height:64px}
.nav-logo{display:flex;align-items:center;gap:.6rem}
.nav-logo .logo-img{width:36px;height:36px}
.nav-logo .logo-text h3{margin:0;font-size:1rem;color:var(--primary)}
.nav-logo .logo-text span{font-size:.8rem;color:#6b7280}
.nav-menu{display:flex;gap:1rem}
.nav-link{padding:.5rem .75rem;border-radius:8px;color:#374151}
.nav-link:hover,.nav-link.active{background:#f3f4f6;color:#111827}
.nav-toggle{display:none;flex-direction:column;gap:4px;cursor:pointer}
.nav-toggle .bar{width:22px;height:2px;background:#111827}
/* Nav search button */
.nav-search{ display:inline-flex; align-items:center; justify-content:center; width:36px; height:36px; border-radius:10px; border:1px solid #e5e7eb; background:#ffffff; color:#0f1b3c; cursor:pointer }
.nav-search:hover{ background:#f4f6fb }

/* Motion/interaction enhancements */
/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; scroll-behavior:auto !important}
}

/* Hover raise utility applied to cards */
.hover-raise{transition:transform .25s ease, box-shadow .25s ease; will-change: transform}
.hover-raise:hover{transform:translateY(-4px); box-shadow:0 10px 24px rgba(0,0,0,.08)}

/* Subtle image zoom on hover for cards */
.news-card .news-image img, .gallery-card .gallery-image img{transition: transform .35s ease}
.news-card:hover .news-image img, .gallery-card:hover .gallery-image img{transform: scale(1.03)}

/* Ripple effect for buttons */
.btn{position:relative; overflow:hidden}
.btn .ripple{position:absolute; border-radius:50%; transform:scale(0); opacity:.25; pointer-events:none; animation:ripple .6s linear; background: currentColor}
@keyframes ripple{ to { transform:scale(12); opacity:0 } }

/* Scroll reveal */
.reveal{opacity:0; transform: translateY(10px)}
.reveal.reveal-in{opacity:1; transform:none; transition: opacity .6s ease, transform .6s ease}

/* Better touch feedback */
body{ -webkit-tap-highlight-color: transparent }

@media (max-width:768px){
  .nav-menu{position:absolute;left:0;right:0;top:64px;background:#fff;border-bottom:1px solid #e5e7eb;flex-direction:column;padding:8px 16px;display:none}
  .nav-menu.open{display:flex}
  .nav-toggle{display:flex}
}

/* Search Overlay */
.search-overlay{ position: fixed; inset: 0; background: rgba(0,0,0,.45); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); z-index: 2500; display:none; align-items:flex-start; justify-content:center; padding: 90px 12px 12px }
.search-overlay.open{ display:flex }
.search-box{ display:flex; align-items:center; gap:10px; width:100%; max-width: 720px; background:#ffffff; border:1px solid #e5e7eb; border-radius:14px; padding:10px 12px; box-shadow: 0 10px 30px rgba(0,0,0,.12) }
.search-box i{ color:#6b7280 }
.search-box input{ flex:1; border:none; outline:none; font:inherit; padding:8px 6px }
.search-actions{ display:flex; align-items:center; gap:8px }
.btn-ghost{ border:none; background:transparent; color:#0f1b3c; width:34px; height:34px; border-radius:8px; cursor:pointer }
.btn-ghost:hover{ background:#f4f6fb }
.search-actions #search-counter{ color:#6b7280; font-size:.9rem; min-width:48px; text-align:center }

/* Highlights */
.search-hit{ background: #fff3b0; color: inherit; padding: 0 2px; border-radius: 4px }
.search-current{ outline: 2px solid #ffd700; background: #ffef8a }
[data-theme="dark"] .search-box{ background:#0f1b3c; border-color:#27324a; color:#e5e7eb }
[data-theme="dark"] .search-box i{ color:#9aa3b2 }
[data-theme="dark"] .btn-ghost{ color:#ffd700 }
[data-theme="dark"] .search-overlay{ background: rgba(0,0,0,.6) }

/* Skeleton Shimmer */
.skeleton-grid{ display:grid; gap:16px }
.skeleton-card{ border:1px solid #e5e7eb; border-radius:12px; background:#ffffff; overflow:hidden; padding:0 }
.skeleton-image{ height:150px; background: #eef1f6; position:relative }
.skeleton-body{ padding:12px }
.skeleton-line{ height:12px; background:#eef1f6; border-radius:8px; margin:8px 0 }
.skeleton-line.sm{ width:40%; height:10px }
.skeleton-line.md{ width:70% }
.skeleton-line.lg{ width:90% }
.skeleton{ position:relative; overflow:hidden }
.skeleton::after{ content:""; position:absolute; inset:0; background: linear-gradient(90deg, transparent, rgba(255,255,255,.5), transparent); transform: translateX(-100%); animation: shimmer-move 1.4s ease-in-out infinite }
@keyframes shimmer-move{ 100%{ transform: translateX(100%) } }

/* Match grids */
.programs-grid .skeleton-grid{ grid-template-columns:repeat(auto-fit,minmax(220px,1fr)) }
.news-grid .skeleton-grid{ grid-template-columns:repeat(auto-fit,minmax(260px,1fr)) }

/* Dark mode skeleton */
[data-theme="dark"] .skeleton-card{ background:#0f1b3c; border-color:#27324a }
[data-theme="dark"] .skeleton-image, [data-theme="dark"] .skeleton-line{ background:#1a2b56 }
[data-theme="dark"] .skeleton::after{ background: linear-gradient(90deg, transparent, rgba(255,255,255,.16), transparent) }

/* Header / Hero (basic) */
header.site-header{background:var(--primary);color:#fff}
.hero{position:relative;padding:80px 0;background:linear-gradient(180deg,var(--primary) 0%, #13224a 100%);color:#fff}
.hero-overlay{position:absolute;inset:0;background:radial-gradient(ellipse at center, rgba(255,255,255,.08), transparent 60%)}
.hero-content{position:relative}
.hero-title{font-size:2rem;margin:0 0 .5rem}
.hero-subtitle{color:#e5e7eb;margin:0 0 1rem}
.hero-buttons{display:flex;gap:.75rem}
.hero-scroll{display:flex;justify-content:center;margin-top:20px;color:#fff;opacity:.85}

/* Sections */
.section-header{text-align:center;margin:40px 0 20px}
.section-header h2{margin:0 0 .25rem;font-size:1.6rem;color:var(--primary)}
.section-header p{margin:0;color:var(--muted)}

/* Quick info */
.quick-info .info-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px}
.info-card{background:#fff;border:1px solid #e5e7eb;border-radius:12px;padding:16px;display:flex;flex-direction:column;gap:8px}
.info-icon{width:40px;height:40px;border-radius:10px;background:#0f1b3c;color:#fff;display:flex;align-items:center;justify-content:center}

/* Programs grid */
.programs-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px}
.program-card{background:#fff;border:1px solid #e5e7eb;border-radius:12px;padding:18px;text-align:center;transition:.2s}
.program-card:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(0,0,0,.06)}
.program-icon{font-size:28px;color:var(--accent);margin-bottom:8px}
.program-card h3{margin:.25rem 0 .25rem;font-size:1.05rem}
.program-card p{margin:0;color:var(--muted);font-size:.9rem}

/* News */
.news .news-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px}
.news-card{background:#fff;border:1px solid #e5e7eb;border-radius:12px;overflow:hidden;display:flex;flex-direction:column}
.news-image{background:#f3f4f6; aspect-ratio: 1 / 1; overflow:hidden}
.news-image img{width:100%;height:100%;object-fit:cover}
.news-content{padding:14px}
.news-content h3{margin:.2rem 0 .4rem;font-size:1.05rem;color:#0f172a}
.news-content p{margin:0 0 .6rem;color:#4b5563}
.news-meta{font-size:.85rem;color:#6b7280}

/* Announcements */
.announcements .announcements-list{display:flex;flex-direction:column;gap:12px}
.announcement-item{display:flex;gap:12px;padding:12px;border:1px solid #e5e7eb;border-radius:12px;background:#fff}
.announcement-icon{width:36px;height:36px;border-radius:10px;background:#eff6ff;color:#1d4ed8;display:flex;align-items:center;justify-content:center;flex:0 0 36px}
.announcement-body h4{margin:.15rem 0 .3rem;font-size:1rem;color:#0f172a}
.announcement-body p{margin:0 0 .4rem;color:#4b5563}
.announcement-meta{font-size:.85rem;color:#6b7280}
.announcement-high{border-color:#fecaca;background:#fff1f2}

/* Staff grid */
.staff .grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:16px}
.staff-card{background:#fff;border:1px solid #e5e7eb;border-radius:12px;overflow:hidden;text-align:center}
.staff-photo{height:170px;background:#f3f4f6}
.staff-photo img{width:100%;height:100%;object-fit:cover}
.staff-info{padding:12px}
.staff-info h4{margin:.2rem 0;font-size:1rem}
.staff-info p{margin:0;color:#6b7280;font-size:.9rem}

/* Staff grid (markup used on homepage) */
.staff-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:16px}
.staff-card img{width:120px;height:120px;object-fit:cover;border-radius:50%;border:4px solid var(--accent, #ffd700);background:#f6f7fb;margin:0 auto .75rem}

/* About */
.about-content{display:grid;grid-template-columns:1.2fr .8fr;gap:20px;align-items:center}
.about-text h3{margin:.5rem 0;color:var(--primary)}
.about-image img{border-radius:12px}

@media (max-width:900px){
  .about-content{grid-template-columns:1fr}
}


/* Contact */
.contact-content{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.contact-info{display:flex;flex-direction:column;gap:12px}
.contact-item{display:flex;gap:12px;align-items:flex-start}
.contact-icon{width:36px;height:36px;border-radius:10px;background:#0f1b3c;color:#fff;display:flex;align-items:center;justify-content:center}
.contact-details h4{margin:.1rem 0 .25rem}
.contact-form .form-group{margin-bottom:12px}
.contact-form input,.contact-form select,.contact-form textarea{width:100%;padding:10px;border:1px solid #e5e7eb;border-radius:10px;font:inherit}

@media (max-width:900px){
  .contact-content{grid-template-columns:1fr}
}

/* Footer */
.footer{margin-top:40px;padding:20px 0;border-top:1px solid #e5e7eb;background:#fff;color:#6b7280}
.footer-content{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:20px}
.footer-logo{display:flex;gap:10px;align-items:center}
.footer-logo img{width:42px;height:42px}

/* PPDB CTA */
.ppdb-cta{padding:3rem 0;background:linear-gradient(135deg,#0f1b3c 0%,#1e3a5f 100%);color:#fff;text-align:center;margin-top:2rem;border-radius:16px}
.ppdb-cta .btn{margin-top:1rem}

/* Social links */
.social-links a{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;background:#0f1b3c;color:#fff;transition:all .2s;border:1px solid rgba(255,255,255,0.15)}
.social-links a:hover{transform:translateY(-2px);background:#ffd700;color:#0f1b3c}

@media (max-width:900px){
  .footer-content{grid-template-columns:1fr}
}

/* Responsive small tweaks */
@media (max-width:640px){
  .hero{padding:40px 0}
}

/* Scroll Progress Bar */
.scroll-progress{ position: fixed; left: 0; top: 0; height: 3px; width: 100%; background: linear-gradient(90deg, #ffd700, #ffea7a); transform: scaleX(0); transform-origin: left center; transition: transform .06s linear; z-index: 2000; box-shadow: 0 1px 0 rgba(0,0,0,.04) }
@media (prefers-reduced-motion: reduce){ .scroll-progress{ transition: none } }

/* Bottom Ticker */
/* variables */
:root{ --ticker-height: 44px; --bottom-nav-height: 56px }
body.has-ticker{ --bottom-offset: var(--ticker-height) }
body.has-bottom-nav{ padding-bottom: calc(var(--bottom-nav-height) + (var(--bottom-offset, 0px))) }
.ticker-bar{ position: fixed; left: 0; right: 0; bottom: 0; height: 44px; background: #0f1b3c; color: #fff; z-index: 60; display:flex; align-items:center; overflow:hidden; box-shadow: 0 -4px 12px rgba(0,0,0,.08); border-top:1px solid rgba(255,255,255,0.08)}
.ticker-inner{ display:flex; align-items:center; gap:48px; white-space: nowrap; will-change: transform; animation: ticker-marquee 28s linear infinite; min-width: 150% }
.ticker-item{ font-size: .95rem; letter-spacing:.2px; opacity:.95 }
.ticker-close{ margin-left:auto; position:absolute; right:6px; top:6px; width:32px; height:32px; border:none; background:transparent; color:#fff; font-size:22px; line-height:32px; border-radius:6px; cursor:pointer; opacity:.8 }
.ticker-close:hover{ background: rgba(255,255,255,.08); opacity:1 }
@keyframes ticker-marquee{ from{ transform: translateX(0) } to{ transform: translateX(-33.333%) } }
.ticker-bar:hover .ticker-inner{ animation-play-state: paused }
@media (prefers-reduced-motion: reduce){ .ticker-inner{ animation: none } }
.ticker-bar.ticker-force .ticker-inner{ animation: ticker-marquee 28s linear infinite !important }

/* Animated Cursor (dot + ring) */
@media (pointer: fine){
  .cursor-dot, .cursor-ring{ position: fixed; left: 0; top: 0; pointer-events: none; z-index: 1000; opacity: 0; transition: opacity .2s ease }
  .cursor-dot{ width: 10px; height: 10px; margin-left: -5px; margin-top: -5px; background: #ffd700; border-radius: 50%; box-shadow: 0 0 0 1px rgba(0,0,0,.05) }
  .cursor-ring{ width: 28px; height: 28px; margin-left: -14px; margin-top: -14px; border: 2px solid rgba(15,27,60, .6); border-radius: 50%; backdrop-filter: blur(0.5px) }
  body.cursor-active .cursor-dot, body.cursor-active .cursor-ring{ opacity: .9 }
  .cursor-hide .cursor-dot, .cursor-hide .cursor-ring{ opacity: 0 }
}
@media (prefers-reduced-motion: reduce){ .cursor-dot, .cursor-ring{ display:none } }

/* Bottom Utility Navbar */
.bottom-nav{ position: fixed; left: 0; right: 0; bottom: var(--bottom-offset, 0); height: var(--bottom-nav-height); background: #ffffff; border-top: 1px solid #e5e7eb; box-shadow: 0 -6px 16px rgba(0,0,0,.06); z-index: 61 }
.bottom-nav .bn-container{ max-width: 1100px; margin: 0 auto; padding: 0 12px; height: 100%; display:flex; align-items:center; justify-content: space-between; gap: 8px }
.bottom-nav a{ flex: 1 1 auto; display:flex; align-items:center; justify-content:center; gap:8px; color:#0f1b3c; text-decoration:none; font-weight:600; font-size:.9rem; padding: 10px 8px; border-radius: 8px }
.bottom-nav a .fa{ font-size: 1rem; opacity:.9 }
.bottom-nav a:hover{ background: #f4f6fb }
.bottom-nav a:active{ transform: translateY(1px) }
.bottom-nav .hide-sm{ display: inline }
@media (max-width: 768px){ .bottom-nav .hide-sm{ display: none } .bottom-nav a{ font-size:.85rem; gap:6px } }

/* Theme Toggle (floating button) */
.theme-toggle{ position: fixed; right: 14px; bottom: calc(12px + var(--bottom-offset, 0px) + var(--bottom-nav-height)); width: 44px; height: 44px; border-radius: 12px; display:flex; align-items:center; justify-content:center; background:#ffffff; color:#0f1b3c; box-shadow: 0 6px 18px rgba(0,0,0,.12); border:1px solid #e5e7eb; z-index: 70; cursor: pointer }
.theme-toggle:hover{ background:#f4f6fb }
.theme-toggle .fa{ font-size: 18px }
@media (max-width: 768px){ .theme-toggle{ right: 10px; bottom: calc(10px + var(--bottom-offset, 0px) + var(--bottom-nav-height)); width: 42px; height: 42px } }

/* Color theme variables */
:root{
  --bg: #ffffff;
  --fg: #0f1b3c;
  --muted: #4b5563;
  --border: #e5e7eb;
  --surface: #ffffff;
}
html, body{ background: var(--bg); color: var(--fg) }

/* Dark mode overrides */
[data-theme="dark"]{
  --bg: #0b142e;
  --fg: #e5e7eb;
  --muted: #9aa3b2;
  --border: #27324a;
  --surface: #0f1b3c;
}
[data-theme="dark"] body{ background: var(--bg); color: var(--fg) }
[data-theme="dark"] .navbar{ background: rgba(11,20,46,.92); border-bottom: 1px solid var(--border) !important; box-shadow: 0 4px 12px rgba(0,0,0,.25) }
[data-theme="dark"] .nav-link{ color: var(--fg) }
[data-theme="dark"] .nav-link.active{ color: #ffd700 }
[data-theme="dark"] .section, [data-theme="dark"] section{ color: var(--fg) }
[data-theme="dark"] .bottom-nav{ background: var(--surface); border-top-color: var(--border) }
[data-theme="dark"] .bottom-nav a{ color: #eef2ff }
[data-theme="dark"] .bottom-nav a:hover{ background: rgba(255,255,255,.06) }
[data-theme="dark"] .ticker-bar{ background: #0b142e; border-top-color: rgba(255,255,255,.12) }
[data-theme="dark"] .ppdb-cta{ background: linear-gradient(135deg,#0b142e 0%,#16284a 100%) }
[data-theme="dark"] .card, [data-theme="dark"] .program-card, [data-theme="dark"] .news-card, [data-theme="dark"] .gallery-card, [data-theme="dark"] .announcement-item, [data-theme="dark"] .staff-card{
  background: #0f1b3c; color: var(--fg); border-color: var(--border)
}
[data-theme="dark"] .footer, [data-theme="dark"] footer{ background: #0b142e; color: var(--fg); border-top:1px solid var(--border) }
[data-theme="dark"] .theme-toggle{ background: var(--surface); color: #ffd700; border-color: var(--border) }

/* Readability & contrast tweaks in dark mode */
[data-theme="dark"] a{ color: #e5e7eb }
[data-theme="dark"] a:hover{ color: #ffd700 }
[data-theme="dark"] .btn{ color:#0b142e; background:#e5e7eb; border:1px solid #cfd5df }
[data-theme="dark"] .btn:hover{ filter: brightness(.96) }
[data-theme="dark"] .btn-primary{ background:#ffd700; color:#0b142e; border-color:#e2c100 }
[data-theme="dark"] .btn-primary:hover{ background:#f0c800 }
[data-theme="dark"] .btn-success{ background:#22c55e; color:#0b142e; border-color:#1eae54 }
[data-theme="dark"] .btn-success:hover{ background:#1fb755 }
[data-theme="dark"] .footer a{ color:#e5e7eb }
[data-theme="dark"] .footer a:hover{ color:#ffd700 }

/* Ticker text colors */
.ticker-bar{ color:#fff }
[data-theme="dark"] .ticker-bar{ color:#e5e7eb }
[data-theme="dark"] .ticker-text a{ color:#ffd700 }

/* Scroll progress stays brand but ensure visibility on dark */
[data-theme="dark"] .scroll-progress{ box-shadow: 0 1px 0 rgba(0,0,0,.2) inset }

/* Lightbox backdrop & content in dark */
[data-theme="dark"] .lightbox{ background: rgba(0,0,0,.7) }
[data-theme="dark"] .lightbox-content{ background: #0f1b3c; color: var(--fg); border:1px solid var(--border) }

/* Subtle shadow adjustments */
[data-theme="dark"] .hover-raise{ box-shadow: 0 12px 24px rgba(0,0,0,.35) }

/* Background overlay transparency tweak for dark for better contrast */
[data-theme="dark"] body::before{ opacity: .08 }

/* Scroll-in animations */
[data-animate]{
  opacity: 0;
  will-change: opacity, transform;
  transition: opacity .6s ease, transform .6s cubic-bezier(.22,.61,.36,1);
}
[data-animate].in{ opacity: 1; transform: none }
[data-animate="fade-up"]{ transform: translate3d(0,16px,0) }
[data-animate="slide-left"]{ transform: translate3d(16px,0,0) }
[data-animate="slide-right"]{ transform: translate3d(-16px,0,0) }
[data-animate="zoom-in"]{ transform: scale(.96) }

@media (prefers-reduced-motion: reduce){
  [data-animate]{ opacity: 1 !important; transform: none !important; transition: none !important }
}

/* Preloader removed per user request */

/* Sponsors marquee */
.sponsors{ padding: 24px 0 0 }
.sponsors .section-header{ margin: 10px auto 6px; text-align:center }
.sponsors-bar{ position: relative; overflow: hidden; border-top:1px solid var(--border); border-bottom:1px solid var(--border); background: var(--surface); }
.sponsors-track{ display:flex; align-items:center; gap: 36px; padding: 14px 0; will-change: transform; animation: sponsors-scroll 28s linear infinite; }
.sponsor-item{ flex: 0 0 auto; display:flex; align-items:center; justify-content:center; min-width: 120px; opacity:.95 }
.sponsor-item img{ height: 48px; width: auto; object-fit: contain; filter: grayscale(0.2); opacity:.95; transition: filter .2s ease, opacity .2s ease, transform .2s ease }
.sponsor-item a:hover img, .sponsor-item:hover img{ filter: none; opacity:1; transform: translateY(-1px) }
.sponsors-bar:hover .sponsors-track{ animation-play-state: paused }
@keyframes sponsors-scroll{ from{ transform: translateX(0) } to{ transform: translateX(-50%) } }
@media (max-width: 768px){ .sponsor-item img{ height: 40px } }
@media (prefers-reduced-motion: reduce){ .sponsors-track{ animation: none } }

/* Dark mode sponsor contrast */
[data-theme="dark"] .sponsors-bar{ background: var(--surface); border-top-color: var(--border); border-bottom-color: var(--border) }
[data-theme="dark"] .sponsor-item img{ filter: grayscale(0.2) brightness(0.95) }