/*
Theme Name: Minimalio Child
Template: minimalio
Theme URI: https://minimalio.org
Description: Minimalio is a free simple minimalist WordPress theme for personal portfolios and blogs. It features all the necessary tools for creators, artists and other professionals, with its sleek minimal design. The theme has many extra options if you want to create e.g., photography, video, design, or a film portfolio. Fast performance, clean code, mobile-first design, and schema markup make the theme exceptionally SEO-friendly. Extra care was also given to accessibility. Minimalio is of course fully responsive, including modern responsive typography settings. It works with the most popular page builders such as Elementor, Beaver Builder, Brizy, Visual Composer, Divi, SiteOrigin, and can be translated with WPML. Minimalio also offers extra premium features, portfolio custom post type, Gutenberg blocks for videos and galleries, and more. Check out our premium version at https://minimalio.org.
Version: 1.0.1
Author: mikulas-k
Author URI: https://mikulaskarpeta.net/en
Tested up to: 6.5
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
License URI:  https://en.wikipedia.org/wiki/End-user_license_agreement
Text Domain: minimalio
Tags: two-columns, one-column, right-sidebar, left-sidebar, footer-widgets, blog, portfolio, photography, flexible-header, full-width-template, custom-header, custom-logo, custom-background, custom-menu, custom-colors, threaded-comments, translation-ready, rtl-language-support, featured-images, theme-options

Minimalio, Copyright 2024
Minimalio is distributed under the terms of the GNU GPL
*/

/* Grid layout - 16 gifs*/
    .grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 16px;
        max-width: 1200px;
        margin: auto;
    }
    /* 2 per row on smaller screens */
    @media (max-width: 800px) {
        .grid {
            grid-template-columns: repeat(2, 1fr);
        }
    }
    /* Responsive 16:9 container */
    .image-container {
        position: relative;
        width: 100%;
        aspect-ratio: 16 / 9;
        cursor: pointer;
        overflow: hidden;
        border-radius: 10px;
        touch-action: manipulation;
    }
    .image-container img {
        position: absolute;
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: opacity 0.4s ease;
    }
    .static-img {
        opacity: 1;
        z-index: 1;
    }
    .gif-img {
        opacity: 0;
        z-index: 2;
    }
    .image-container.hovered .static-img,
    .image-container:hover .static-img {
        opacity: 0;
    }
    .image-container.hovered .gif-img,
    .image-container:hover .gif-img {
        opacity: 1;
    }
    /* Bottom caption */
    .caption-bottom {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        padding: 6px 8px;
        box-sizing: border-box;
        background: rgba(0, 0, 0, 0.6);
        color: white;
        font-size: 13px;
        text-align: center;
        pointer-events: none;
        transition: opacity 0.4s ease;
        z-index: 3;
    }
    .image-container.hovered .caption-bottom,
    .image-container:hover .caption-bottom {
        opacity: 0;
    }
    a {
        color: inherit;
        text-decoration: none;
    }


/* Contact Form 7 */
/* CONTACT FORM WRAPPER WIDTH */
.wpcf7 {
    width: 80%;
    max-width: 900px;
    margin: 0 auto;
    color: #fff;
    font-size: 16px;
}
/* GRID LAYOUT */
.cf7-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px 30px;
}
.cf7-field.full {
    grid-column: span 2;
}
/* MOBILE */
@media (max-width: 768px) {
    .cf7-grid {
        grid-template-columns: 1fr;
    }

    .cf7-field.full {
        grid-column: span 1;
    }
}
/* LABELS */
.cf7-field label {
    display: block;
    margin-bottom: 6px;
    font-weight: 500;
    letter-spacing: 0.5px;
    font-size: 15px;
}
/* INPUTS */
.wpcf7 input,
.wpcf7 textarea {
    width: 100%;
    padding: 14px 16px;
    border-radius: 6px;
    border: 1px solid rgba(255,255,255,0.15);
    background: rgba(20,20,20,0.85);
    color: #fff;
    font-size: 16px;
    transition: all 0.35s ease;
}
/* GLOW ON FOCUS */
.wpcf7 input:focus,
.wpcf7 textarea:focus {
    outline: none;
    border-color: #ff6a00;
    box-shadow: 0 0 10px rgba(255,106,0,0.4),
                0 0 20px rgba(255,106,0,0.2);
    background: rgba(30,30,30,0.95);
}
/* HOUDINI BUTTON */
.wpcf7 input[type="submit"] {
    position: relative;
    background: linear-gradient(135deg, #ff6a00, #ff9a3c);
    border: none;
    color: white;
    padding: 14px 28px;
    font-size: 17px;
    font-weight: 600;
    letter-spacing: 1px;
    border-radius: 6px;
    cursor: pointer;
    overflow: hidden;
    box-shadow: 0 0 15px rgba(255,106,0,0.4);
    transition: 0.3s;
}

/* BUTTON HOVER */
.wpcf7 input[type="submit"]:hover {
    transform: translateY(-2px);
    box-shadow: 0 0 25px rgba(255,106,0,0.6);
}
/* LIGHT SWEEP ANIMATION */
.wpcf7 input[type="submit"]::after {
    content: "";
    position: absolute;
    top: 0;
    left: -120%;
    width: 60%;
    height: 100%;
    background: linear-gradient(
        120deg,
        transparent,
        rgba(255,255,255,0.6),
        transparent
    );
    animation: sweep 3.5s linear infinite;
}
@keyframes sweep {
    0% { left: -120%; }
    100% { left: 130%; }
}
/* SUCCESS MESSAGE CINEMATIC */
.wpcf7-response-output {
    margin-top: 20px;
    padding: 14px;
    border-radius: 6px;
    background: rgba(0,0,0,0.6);
    border: 1px solid rgba(255,106,0,0.4);
    color: #fff;
    animation: fadeSlide 0.8s ease;
}
@keyframes fadeSlide {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/* ================================
   Cinematic Footer
================================ */

.footer-cinematic {
    text-align: center;
    position: relative;
    padding-top: 30px;
}

/* Glowing divider line */

.footer-divider {
    width: 80%;
    height: 1px;
    margin: 0 auto 25px;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255,120,40,0.6),
        rgba(255,120,40,1),
        rgba(255,120,40,0.6),
        transparent
    );
    box-shadow: 0 0 12px rgba(255,120,40,0.6);
    animation: dividerGlow 4s ease-in-out infinite;
}

@keyframes dividerGlow {
    0%,100% { opacity: 0.6; }
    50% { opacity: 1; }
}


/* Copyright */

.site-copyright {
    color: rgba(255,255,255,0.7);
    font-size: 14px;
    letter-spacing: 0.5px;
}

.site-copyright a {
    color: #ff6a00;
    text-decoration: none;
    transition: 0.3s;
}

.site-copyright a:hover {
    color: #ffa24c;
    text-shadow: 0 0 6px rgba(255,106,0,0.6);
}


/* ===============================
   Cinematic Neon Social Icons
================================ */
.footer-social {
    margin-bottom: 20px;
    position: relative;
    display: flex;
    justify-content: center;
    gap: 26px;
}
/* Base icon */
.social-icon {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    color: rgba(255,255,255,0.9);
    transition: all 0.35s ease;
    overflow: hidden;
}
/* SVG */
.social-icon svg {
    width: 22px;
    height: 22px;
    fill: currentColor;
    z-index: 2;
    transition: 0.35s ease;
}
/* Neon outline ring */
.social-icon::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 1px solid rgba(255,120,40,0.5);
    box-shadow:
        0 0 6px rgba(255,120,40,0.4),
        0 0 12px rgba(255,120,40,0.3);
    animation: neonPulse 3s ease-in-out infinite;
}
/* Cursor proximity glow */
.social-icon::after {
    content: "";
    position: absolute;
    width: 120px;
    height: 120px;
    background: radial-gradient(circle, rgba(255,120,40,0.25), transparent 70%);
    top: var(--y, 50%);
    left: var(--x, 50%);
    transform: translate(-50%, -50%);
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}
.social-icon:hover::after {
    opacity: 1;
}
/* Hover motion */
.social-icon:hover {
    transform: translateY(-5px) scale(1.15);
    color: #ffffff;
}
/* Brand hover colors */
.social-icon.linkedin:hover {
    box-shadow: 0 0 16px rgba(10,102,194,0.8);
}
.social-icon.youtube:hover {
    box-shadow: 0 0 16px rgba(255,0,0,0.8);
}
.social-icon.vimeo:hover {
    box-shadow: 0 0 16px rgba(26,183,234,0.8);
}
/* Neon animation */
@keyframes neonPulse {
    0%, 100% {
        box-shadow:
            0 0 6px rgba(255,120,40,0.4),
            0 0 12px rgba(255,120,40,0.3);
    }
    50% {
        box-shadow:
            0 0 10px rgba(255,120,40,0.7),
            0 0 22px rgba(255,120,40,0.6);
    }
}


/* =========================
   Responsive 3x2 Grid - Schauspieler Gallery Thumbnails
========================= */
.acting-gallery-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* always 3 columns */
    gap: 12px;
    padding: 10px 0;
}
/* =========================
   Item
========================= */
.acting-gallery-item {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1; /* square responsive */
    overflow: hidden;
    border-radius: 4px;
    background: #000;
    text-decoration: none;
}
/* Image */
.acting-gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: brightness(0.72) contrast(1.05);
    transition: transform 0.6s ease, filter 0.6s ease;
}
/* Title */
.acting-gallery-title {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 10px 8px;
    text-align: center;
    color: #fff;
    font-size: 15px;
    letter-spacing: 1px;
    background: linear-gradient(to top, rgba(0,0,0,0.75), transparent);
    opacity: 0;
    transition: opacity 0.35s ease;
}
/* Light Sweep */
.acting-gallery-item::before {
    content: "";
    position: absolute;
    top: 0;
    left: -120%;
    width: 60%;
    height: 100%;
    background: linear-gradient(
        120deg,
        transparent,
        rgba(255,255,255,0.25),
        transparent
    );
    transform: skewX(-25deg);
}
/* Glow Frame */
.acting-gallery-item::after {
    content: "";
    position: absolute;
    inset: 0;
    border: 1px solid rgba(255,120,40,0.4);
    box-shadow: 0 0 8px rgba(255,120,40,0.4);
    opacity: 0;
    transition: 0.4s ease;
}
/* Hover Effects */
.acting-gallery-item:hover img {
    transform: scale(1.06);
    filter: brightness(0.9) contrast(1.1);
}
.acting-gallery-item:hover .acting-gallery-title {
    opacity: 1;
}
.acting-gallery-item:hover::before {
    animation: actingSweep 1.2s ease;
}
.acting-gallery-item:hover::after {
    opacity: 1;
}
/* Sweep Animation */
@keyframes actingSweep {
    0% { left: -120%; }
    100% { left: 140%; }
}
/* Smaller screens → still 3 columns but scaled */
@media (max-width: 900px) {
    .acting-gallery-grid {
        gap: 8px;
    }
}


/* Acting Button */
.acting-cinematic-btn {
  --mouse-x: 50%;
  --mouse-y: 50%;

  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  margin-right: 6px;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  text-decoration: none;
  color: #fff;
  border: 1px solid rgba(255,140,0,0.6);
  border-radius: 5px;
  position: relative;
  overflow: hidden;
  background: rgba(255,140,0,0.05);
  backdrop-filter: blur(4px);
  transition: all 0.35s ease;
}
/* icon */
.acting-btn-icon {
  font-size: 0.7rem;
  opacity: 0.9;
  transform: translateY(-1px);
}
/* orange neon outline pulse */
.acting-cinematic-btn::after {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: 6px;
  border: 1px solid rgba(255,140,0,0.6);
  opacity: 0.5;
  animation: actingPulse 2.5s ease-in-out infinite;
  pointer-events: none;
}
@keyframes actingPulse {
  0%, 100% {
    opacity: 0.35;
    box-shadow: 0 0 8px rgba(255,140,0,0.25);
  }
  50% {
    opacity: 0.9;
    box-shadow: 0 0 18px rgba(255,140,0,0.6);
  }
}
/* cinematic light sweep */
.acting-cinematic-btn::before {
  content: "";
  position: absolute;
  top: 0;
  left: -120%;
  width: 60%;
  height: 100%;
  background: linear-gradient(
    120deg,
    transparent,
    rgba(255,180,60,0.7),
    transparent
  );
  transform: skewX(-25deg);
}
.acting-cinematic-btn:hover::before {
  animation: actingSweep 1s ease;
}
@keyframes actingSweep {
  0% { left: -120%; }
  100% { left: 140%; }
}
/* mouse proximity glow */
.acting-cinematic-btn .glow {
  position: absolute;
  inset: 0;
  background: radial-gradient(
    circle at var(--mouse-x) var(--mouse-y),
    rgba(255,140,0,0.35),
    transparent 60%
  );
  opacity: 0;
  transition: opacity 0.25s ease;
  pointer-events: none;
}
.acting-cinematic-btn:hover .glow {
  opacity: 1;
}
/* hover glow */
.acting-cinematic-btn:hover {
  border-color: rgba(255,170,60,0.9);
  box-shadow:
    0 0 12px rgba(255,140,0,0.7),
    0 0 28px rgba(255,140,0,0.35);
  transform: translateY(-1px);
}




/* Live Website Preview with iframe for Dinomite */
/* ===== Wrapper ===== */
.live-preview-wrapper {
  max-width: 900px;
  margin: 40px auto;
}
/* ===== Frame ===== */
.live-preview-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid rgba(255,140,0,0.4);
  background: #000;

  box-shadow:
    0 0 25px rgba(0,0,0,0.6),
    0 0 30px rgba(255,140,0,0.15);

  transition: 0.4s ease;
  cursor: pointer;
}
/* iframe */
.live-preview-iframe {
  width: 100%;
  height: 100%;
  border: none;
  pointer-events: none;
}
/* fallback image */
.live-preview-fallback {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: none;
}
/* overlay */
.live-preview-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;

  background: linear-gradient(
    rgba(0,0,0,0.2),
    rgba(0,0,0,0.6)
  );

  opacity: 0;
  transition: 0.35s ease;
}
.live-preview-overlay span {
  padding: 10px 20px;
  border: 1px solid rgba(255,140,0,0.8);
  border-radius: 6px;
  color: white;
  font-size: 0.8rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  background: rgba(255,140,0,0.08);

  box-shadow: 0 0 12px rgba(255,140,0,0.5);
}
/* hover */
.live-preview-frame:hover {
  transform: translateY(-4px);
  box-shadow:
    0 0 18px rgba(255,140,0,0.6),
    0 0 50px rgba(255,140,0,0.25);
}
.live-preview-frame:hover .live-preview-overlay {
  opacity: 1;
}



/* ===============================
   FULL WIDTH DSGVO FIELD
   =============================== */
.cf-consent-wrapper {
  width: 100%;
  margin-top: 25px;
  font-size: 0.95rem;
  color: #ccc;
}
/* Make it behave like textarea */
.cf-consent-field {
  display: flex;
  align-items: flex-start;
  gap: 12px;

  width: 100%;
  padding: 16px;
  border-radius: 6px;

  border: 1px solid rgba(255,140,0,0.4);
  background: rgba(255,140,0,0.04);

  transition: 0.3s ease;
}
/* Glow on hover */
.cf-consent-field:hover {
  border-color: rgba(255,140,0,0.8);
  box-shadow: 0 0 12px rgba(255,140,0,0.3);
}
/* Checkbox styling */
.cf-consent input[type="checkbox"] {
  appearance: none;
  width: 20px;
  height: 20px;
  min-width: 20px;
  margin-top: 3px;

  border: 1px solid rgba(255,140,0,0.6);
  border-radius: 4px;
  background: #111;

  cursor: pointer;
  transition: 0.3s ease;
}

.cf-consent input[type="checkbox"]:checked {
  background: rgba(255,140,0,0.9);
  box-shadow: 0 0 12px rgba(255,140,0,0.9);
}
.cf-consent input[type="checkbox"]:checked::after {
  content: "✓";
  position: relative;
  left: 4px;
  top: -1px;
  font-size: 14px;
  font-weight: bold;
  color: black;
}
/* Text */
.cf-consent-text {
  flex: 1;
  line-height: 1.6;
}
/* Expand section */
.cf-consent-extra {
  margin-top: 10px;
}
.cf-consent-expand {
  font-size: 0.75rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: rgba(255,140,0,0.9);
  cursor: pointer;
  transition: 0.3s ease;
}
.cf-consent-expand:hover {
  color: #fff;
  text-shadow: 0 0 8px rgba(255,140,0,0.8);
}
/* Collapsible text */
.cf-consent-details {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 0.4s ease, opacity 0.4s ease;
  margin-top: 10px;
}
.cf-consent-wrapper.active .cf-consent-details {
  max-height: 200px;
  opacity: 1;
}
/* Error animation */
.cf-consent-error .cf-consent-field {
  border-color: rgba(255,0,0,0.8);
  box-shadow: 0 0 15px rgba(255,0,0,0.6);
  animation: consentShake 0.4s ease;
}
@keyframes consentShake {
  0% { transform: translateX(0); }
  25% { transform: translateX(-4px); }
  50% { transform: translateX(4px); }
  75% { transform: translateX(-4px); }
  100% { transform: translateX(0); }
}




/* ==========================================
   CLEAN CINEMATIC OVERLAY (SAFE VERSION) - mobile Menu
========================================== */

@media (max-width: 768px) {

  /* Force hamburger color only */
  .mobile-toggle {
    color: rgba(255,140,0,0.95) !important;
    z-index: 10001 !important;
  }
  .mobile-toggle svg {
    fill: rgba(255,140,0,0.95) !important;
    stroke: rgba(255,140,0,0.95) !important;
  }
  /* Overlay styling */
  #mobilemenu {
    position: fixed !important;
    inset: 0 !important;

    background: rgba(0,0,0,0.82) !important;
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);

    display: flex !important;
    justify-content: flex-start;
    align-items: center;

    padding-left: 10vw;

    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    transition: opacity 0.4s ease;

    z-index: 10000;
  }
  #mobilemenu.mobile-active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }
  /* Remove white backgrounds */
  #mobilemenu,
  #mobilemenu * {
    background: transparent !important;
  }
  /* Menu layout */
  #mobilemenu ul {
    display: flex;
    flex-direction: column;
    gap: 30px;
  }
  #mobilemenu a {
    font-size: 1.6rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: white !important;
    transition: 0.3s ease;
  }
  #mobilemenu a:hover {
    color: rgba(255,140,0,0.95) !important;
    text-shadow: 0 0 20px rgba(255,140,0,0.8);
  }

}


/* ===== Two Column Cinematic Layout for the Reels(isolated classes) ===== */
.cine-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: start;
}
.cine-left h5 {
  font-weight: 400;
  line-height: 1.6;
  margin: 0;
}
.cine-right-title {
  font-size: 18px;
  margin-bottom: 18px;
  letter-spacing: 0.04em;
  text-align: center; /* centered title */
}
/* ===== Grid ===== */
.cine-square-grid {
  display: grid;
  grid-template-columns: repeat(3, 200px);
  gap: 18px;
  justify-content: center;
}
/* ===== Square Item ===== */
.cine-square-item {
  position: relative;
  width: 200px;
  height: 200px;
  overflow: hidden;
  border-radius: 12px;
  cursor: pointer;
  background: #000;
  perspective: 900px;
}
.cine-square-inner {
  position: absolute;
  inset: 0;
  transition: transform 0.25s ease;
  will-change: transform;
}

.cine-square-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: contrast(1.05) saturate(0.95) brightness(0.9);
  transition: transform 0.6s ease, filter 0.6s ease;
}
/* Film grain overlay */
.cine-square-grain {
  pointer-events: none;
  position: absolute;
  inset: 0;
  opacity: 0.18;
  z-index: 4;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.5'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
}
/* Cinematic overlay ALWAYS visible */
.cine-square-overlay {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at center, rgba(0,0,0,0.25) 0%, rgba(0,0,0,0.7) 100%);
  z-index: 1;
}
/* Frame */
.cine-square-frame {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 70%;
  height: 70%;
  transform: translate(-50%, -50%);
  border: 2px solid rgba(255,255,255,0.85);
  z-index: 2;
  transition: box-shadow 0.4s ease, transform 0.4s ease;
}
/* Glow animation */
@keyframes cineGlow {
  0% { box-shadow: 0 0 0 rgba(255,255,255,0); }
  50% { box-shadow: 0 0 18px rgba(255,255,255,0.6); }
  100% { box-shadow: 0 0 0 rgba(255,255,255,0); }
}
/* Text */
.cine-square-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #fff;
  font-size: 18px;
  letter-spacing: 1.5px;
  font-weight: 500;
  text-align: center;
  z-index: 3;
  text-shadow: 0 2px 10px rgba(0,0,0,0.6);
}
/* Hover effects */
.cine-square-item:hover img {
  transform: scale(1.1);
  filter: contrast(1.1) saturate(1.05) brightness(1);
}
.cine-square-item:hover .cine-square-frame {
  animation: cineGlow 2s ease-in-out infinite;
  transform: translate(-50%, -50%) scale(1.03);
}
/* Responsive: switch to 1 column */
@media (max-width: 900px) {
  .cine-layout {
    grid-template-columns: 1fr;
  }
  .cine-square-grid {
    grid-template-columns: repeat(3, 1fr);
  }
  .cine-square-item {
    width: 100%;
    aspect-ratio: 1 / 1;
    height: auto;
  }
}

/* ==============================
   LEFT COLUMN LANGUAGE SWITCH
============================== */

.cine-lang {
  display: none;
}

.cine-lang.active {
  display: block;
}

.cine-lang-switch-left {
  text-align: left;
  margin-bottom: 16px;
}

.cine-flag {
  cursor: pointer;
  font-size: 24px;   /* increased */
  margin-right: 12px;
  opacity: 0.5;
  transition: 0.3s ease;
}

.cine-flag.active {
  opacity: 1;
  transform: scale(1.15);
}

/* Typography refinement */
.cine-left h2 {
  margin-bottom: 20px;
  font-weight: 500;
  letter-spacing: 0.04em;
}

.cine-left p {
  line-height: 1.7;
  margin-bottom: 16px;
  opacity: 0.85;
}

/* ==============================
   MOBILE: Remove Squares
============================== */

@media (max-width: 900px) {

  .cine-layout {
    grid-template-columns: 1fr;
  }

  /* Keep 3 thumbnails in ONE row */
  .cine-square-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
  }

  /* Make perfect 1:1 squares */
  .cine-square-item {
    width: 100%;
    aspect-ratio: 1 / 1;
    height: auto;
  }

  /* Remove white inner frame only */
  .cine-square-frame {
    display: none;
  }

}


/* =================================================
   CINEMATIC TYPOGRAPHY SYSTEM – NIKO RUCH
   Refined, Small Scale, Premium Interaction
================================================= */

/* ==============================
   BASE SCALE
============================== */
.entry-content h1 {
  font-size: 1.5rem;              /* 1.5x body */
  font-weight: 600;
  letter-spacing: 0.04em;
  line-height: 1.3;
  margin-bottom: 0.6em;
  position: relative;
  transition:
    letter-spacing 0.4s ease,
    text-shadow 0.4s ease;
}
.entry-content h2 {
  font-size: 1.25rem;             /* between h1 and body */
  font-weight: 650;               /* stronger presence */
  letter-spacing: 0.045em;
  line-height: 1.35;
  margin-top: 1.4em;
  margin-bottom: 0.5em;
  position: relative;
}
.entry-content h3 {
  font-size: 1.05rem;             /* near body size */
  font-weight: 650;               /* emphasized */
  letter-spacing: 0.04em;
  line-height: 1.45;
  margin-top: 1.2em;
  margin-bottom: 0.4em;
  position: relative;
}
/* ==============================
   H1 – HERO UNDERLINE EFFECT
============================== */
.entry-content h1::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -6px;
  width: 0%;
  height: 2px;
  background: linear-gradient(
    90deg,
    rgba(255,140,0,0.9),
    rgba(255,80,0,0.7)
  );
  box-shadow: 0 0 12px rgba(255,140,0,0.6);
  transition: width 0.7s ease-out;
}
.entry-content h1:hover {
  letter-spacing: 0.08em;
  text-shadow:
    0 0 14px rgba(255,140,0,0.6),
    0 2px 12px rgba(0,0,0,0.7);
}
.entry-content h1:hover::after {
  width: 100%;
}
/* ==============================
   H2 – CONFIDENT LIGHT SWEEP
============================== */
.entry-content h2 {
  background: linear-gradient(
    120deg,
    #ffffff 0%,
    #ffffff 45%,
    rgba(255,140,0,0.55) 50%,
    #ffffff 55%,
    #ffffff 100%
  );
  background-size: 200% auto;
  background-position: 0% center;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  transition:
    letter-spacing 0.4s ease,
    background-position 1.2s ease;
}
.entry-content h2:hover {
  background-position: 100% center;
  letter-spacing: 0.065em;
  text-shadow:
    0 0 8px rgba(255,140,0,0.4);
}
/* ==============================
   H3 – EMPHASIZED + SLOW SWEEP
============================== */
.entry-content h3 {
  background: linear-gradient(
    120deg,
    #ffffff 0%,
    #ffffff 48%,
    rgba(255,140,0,0.4) 50%,
    #ffffff 52%,
    #ffffff 100%
  );
  background-size: 200% auto;
  background-position: 0% center;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  transition:
    letter-spacing 0.5s ease,
    background-position 1.8s ease;   /* slowest sweep */
}
.entry-content h3:hover {
  background-position: 100% center;
  letter-spacing: 0.055em;
  text-shadow:
    0 0 6px rgba(255,140,0,0.3);
}
/* ==============================
   MOBILE REFINEMENT
============================== */
@media (max-width: 768px) {

  .entry-content h1 { font-size: 1.4rem; }

  .entry-content h2 { font-size: 1.15rem; }

  .entry-content h3 { font-size: 1rem; }

}
/* entry / page title h1 */
.entry-title {
  font-size: 2rem;
  line-height: 1.2;
}

/* Footer profession line */
.footer-profession{
    text-align:center;
    margin-top:14px;
    margin-bottom:6px;
    font-size:14px;
    letter-spacing:0.12em;
    color:#d0d0d0;
    opacity:0.9;
    font-weight:500;
}
/* subtle cinematic highlight */
.footer-profession:hover{
    color:#ff7a2f;
    transition:color .35s ease;
}


/* SEO keyword block */
.seo-keywords{
    text-align:center;
    font-size:1px!important;
    opacity:0.1!important;
    margin-top:8px;
    letter-spacing:.08em;
}
/* SEO front page figcaption */
.visually-hidden {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0,0,0,0);
white-space: nowrap;
border: 0;
}

/* ================================
   Project Meta (Software / Tools)
================================ */

.project-meta{
    margin-top:32px;
    padding:20px 24px;
    max-width:720px;

    font-size:14px;
    line-height:1.7;
    letter-spacing:.04em;

    color:#e6e6e6;

    background:linear-gradient(
        145deg,
        rgba(20,20,20,.9),
        rgba(10,10,10,.95)
    );

    border-radius:10px;

    border:1px solid rgba(255,120,60,.25);

    position:relative;
    overflow:hidden;

    transition:all .35s ease;
}

/* subtle orange edge highlight */

.project-meta::before{
    content:"";
    position:absolute;
    inset:0;
    pointer-events:none;

    background:linear-gradient(
        120deg,
        transparent,
        rgba(255,120,60,.15),
        transparent
    );

    opacity:.4;
}

/* labels */

.project-meta strong{
    display:inline-block;
    min-width:90px;

    font-weight:600;
    letter-spacing:.08em;

    color:#ff7a2f;
}

/* spacing between rows */

.project-meta strong + br{
    margin-bottom:6px;
}

/* hover polish */

.project-meta:hover{

    transform:translateY(-2px);

    border-color:rgba(255,120,60,.45);

    box-shadow:
        0 8px 20px rgba(0,0,0,.6),
        0 0 12px rgba(255,120,60,.15);
}

/* mobile */

@media (max-width:768px){

.project-meta{

    font-size:13px;
    padding:16px 18px;
}

.project-meta strong{
    min-width:80px;
}

}